From ec60c8ed677e261c350718d6bdf61257f6fda9d4 Mon Sep 17 00:00:00 2001 From: estel <690930@qq.com> Date: Mon, 11 Aug 2025 12:38:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8D=9A=E6=96=87,=E6=B3=A8?= =?UTF-8?q?=E9=87=8A=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E7=AA=97=E5=8F=A3?= =?UTF-8?q?,=E4=BF=AE=E6=94=B9h3=E6=A0=B7=E5=BC=8F,=E6=9B=B4=E6=94=B9?= =?UTF-8?q?=E5=9C=B0=E5=9D=80=E4=B8=BAlijue.net?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.config.ts | 2 +- app/components/TemplateMenu.vue | 2 +- app/components/blog/BlogHeader.vue | 18 +- app/components/content/ProseH3.vue | 8 +- app/components/docs/DocsHeader.vue | 18 +- app/pages/index.vue | 2 +- content/blog/1.技术栈/975.新的文档渲染样式.md | 363 ++++++++++++++++++ .../blog/1.技术栈/981.使用 AI 守护内网安全.md | 4 +- .../blog/1.技术栈/993.Docker 里配置hosts.md | 10 +- nuxt.config.ts | 2 +- package.json | 2 +- 项目说明/简介文档.md | 2 +- 12 files changed, 398 insertions(+), 35 deletions(-) create mode 100644 content/blog/1.技术栈/975.新的文档渲染样式.md diff --git a/app/app.config.ts b/app/app.config.ts index 68ac9be..c560a72 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -66,7 +66,7 @@ export default defineAppConfig({ }, { icon: 'simple-icons-nuxtdotjs', label: '个人博客', - to: 'https://lijue.me', + to: 'https://lijue.net', target: '_blank' }] } diff --git a/app/components/TemplateMenu.vue b/app/components/TemplateMenu.vue index 44f1eba..724bb2e 100644 --- a/app/components/TemplateMenu.vue +++ b/app/components/TemplateMenu.vue @@ -4,7 +4,7 @@ :modal="false" :items="[{ label: 'Blog', - to: 'https://lijue.me' + to: 'https://lijue.net' }, { label: 'Docs', to: 'https://docs-template.nuxt.dev/', diff --git a/app/components/blog/BlogHeader.vue b/app/components/blog/BlogHeader.vue index 3f8ca59..39524ff 100644 --- a/app/components/blog/BlogHeader.vue +++ b/app/components/blog/BlogHeader.vue @@ -33,13 +33,13 @@ const Props = withDefaults(defineProps(), { }) // 登录注册函数 -const handleLoginRegister = (type: 'login' | 'register') => { - if (type === 'login') { - isLoginModalOpen.value = true - } else if (type === 'register') { - isRegisterModalOpen.value = true - } -} +// const handleLoginRegister = (type: 'login' | 'register') => { +// if (type === 'login') { +// isLoginModalOpen.value = true +// } else if (type === 'register') { +// isRegisterModalOpen.value = true +// } +// } diff --git a/app/components/content/ProseH3.vue b/app/components/content/ProseH3.vue index d9604d0..d603e69 100644 --- a/app/components/content/ProseH3.vue +++ b/app/components/content/ProseH3.vue @@ -29,8 +29,8 @@ const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolea // 主题风格： // - classic：左侧竖线（主色），无额外背景 -// - elegant：底部虚线 -// - minimal：卡片式浅色主色背景 + 左侧竖线 +// - elegant：卡片式浅色主色背景 + 左侧竖线 +// - minimal：底部虚线 const { selectedTheme, selectedThemeColor, customColor, themeColors } = useTheme() const themeSizeClass = computed(() => { @@ -40,8 +40,8 @@ const themeSizeClass = computed(() => { }) const isClassic = computed(() => selectedTheme.value === 'classic') -const isElegant = computed(() => selectedTheme.value === 'elegant') -const isMinimal = computed(() => selectedTheme.value === 'minimal') +const isElegant = computed(() => selectedTheme.value === 'minimal') +const isMinimal = computed(() => selectedTheme.value === 'elegant') const showLeadingLine = computed(() => isClassic.value || isMinimal.value || isElegant.value) diff --git a/app/components/docs/DocsHeader.vue b/app/components/docs/DocsHeader.vue index 58b9060..74be9b3 100644 --- a/app/components/docs/DocsHeader.vue +++ b/app/components/docs/DocsHeader.vue @@ -33,13 +33,13 @@ const Props = withDefaults(defineProps(), { }) // 登录注册函数 -const handleLoginRegister = (type: 'login' | 'register') => { - if (type === 'login') { - isLoginModalOpen.value = true - } else if (type === 'register') { - isRegisterModalOpen.value = true - } -} +// const handleLoginRegister = (type: 'login' | 'register') => { +// if (type === 'login') { +// isLoginModalOpen.value = true +// } else if (type === 'register') { +// isRegisterModalOpen.value = true +// } +// } diff --git a/app/pages/index.vue b/app/pages/index.vue index 8ece108..ec2084a 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -111,7 +111,7 @@ useSeoMeta({ size="16" /> diff --git a/content/blog/1.技术栈/975.新的文档渲染样式.md b/content/blog/1.技术栈/975.新的文档渲染样式.md new file mode 100644 index 0000000..21a8c73 --- /dev/null +++ b/content/blog/1.技术栈/975.新的文档渲染样式.md @@ -0,0 +1,363 @@ +--- +title: 新的文档渲染样式 +description: 重新构建了渲染组件,优化了样式. +date: 2025-08-10 +img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250811100000000.png +navigation: + icon: simple-icons:nuxtdotjs +--- + +# 文档系统新样式 + +## 重新对文档的样式进行了优化 +- 周日媳妇回娘家，晚上爆肝到12点。重写了十几个组件，将大部分组件重写。 +- 纯古法手工敲代码,部分css样式由 GPT-5 生成. +- 大部分组件对主题进行了响应式处理,会根据主题进行不同的样式渲染 + +### 1. 标题：让你的内容层次分明 + +用 `#` 号来创建标题。标题从 `#` 开始，`#` 的数量表示标题的级别。 + +:::code-group + ```mdc [标题文本.md] + # 一级标题 + ## 二级标题 + ### 三级标题 + #### 四级标题 + ##### 五级标题 + ###### 六级标题 + ``` + + ::::code-preview{icon="i-lucide-eye" label="预览效果"} + :::::example-title + # 一级标题 + ## 二级标题 + ### 三级标题 + #### 四级标题 + ##### 五级标题 + ###### 六级标题 + ::::: + :::: +::: + +以上代码将渲染出一组层次分明的标题，使你的内容井井有条。 + +### 2. 流程图与公式渲染： + +:::code-group +:::code-preview{icon="i-lucide-eye" label="预览效果"} + ```mermaid + graph TD + A[Local Coolify 实例] --> B[生产服务器] + A --> D[编译服务器] + B --> B1[生产环境] + D --> B + ``` +::: + +```mermaid[流程图语句.md] + ```mermaid[流程图语句.md] + graph TD + A[Local Coolify 实例] --> B[生产服务器] + A --> D[编译服务器] + B --> B1[生产环境] + D --> B + ``` +``` +::: + +:::code-group +::code-preview{icon="i-lucide-eye" label="预览效果"} +```mermaid +pie +title 为什么总是宅在家里？ +"喜欢宅" : 45 +"天气太热" : 70 +"穷" : 500 +"没人约" : 95 +``` +:: +```mermaid[饼图语句.md] + ```mermaid[饼图语句.md] + pie + title 为什么总是宅在家里？ + "喜欢宅" : 45 + "天气太热" : 70 + "穷" : 500 + "没人约" : 95 + ``` +``` +::: + +:::code-group +::code-preview{icon="i-lucide-eye" label="预览效果"} +- **单行公式**：用 `$` 包裹公式，如 $E = mc^2$ +- **块级公式**：用 `$$` 包裹公式，如： + + $$ + \begin{aligned} + d_{i, j} &\leftarrow d_{i, j} + 1 \\ + d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\ + d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\ + d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1 + \end{aligned} + $$ +- 列表内块公式 + $$ + \chi^2 = \sum \frac{(|O - E| - 0.5)^2}{E} + $$ +:: +```mermaid[公式语句.md] +- **单行公式**：用 `$` 包裹公式，如 $E = mc^2$ +- **块级公式**：用 `$$` 包裹公式，如： + + $$ + \begin{aligned} + d_{i, j} &\leftarrow d_{i, j} + 1 \\ + d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\ + d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\ + d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1 + \end{aligned} + $$ +- 列表内块公式 + $$ + \chi^2 = \sum \frac{(|O - E| - 0.5)^2}{E} + $$ +``` +::: + +### 3. 代码块与代码树：展示你的代码 + +- **行内代码**：用反引号包裹，如 `code`。 +- **代码块**：用三个反引号包裹，并指定语言，如： + + +```ts[hello.vue] +console.log("Hello, Doocs!"); +``` +- **代码树**：用 `::code-tree` 包裹，并指定默认值，如： + +::code-tree{defaultValue="nuxt.config.ts"} + +```css [app/assets/main.css] +@import "tailwindcss" theme(static); +@import "@nuxt/ui-pro"; +``` + +```ts [app/app.config.ts] +export default defineAppConfig({ + ui: { + colors: { + primary: 'sky', + colors: 'slate' + } + } +}); +``` + +```vue [app/app.vue] + +``` + +```json [package.json] +{ + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare", + "typecheck": "nuxt typecheck" + }, + "dependencies": { + "@iconify-json/lucide": "^1.2.18", + "@nuxt/ui-pro": "3.0.0-alpha.10", + "nuxt": "^3.15.1" + }, + "devDependencies": { + "typescript": "^5.7.2", + "vue-tsc": "^2.2.0" + } +} +``` + +```json [tsconfig.json] +{ + "extends": "./.nuxt/tsconfig.json" +} +``` + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'], + + future: { + compatibilityVersion: 4 + }, + + css: ['~/assets/main.css'] +}); +``` + +````md [README.md] +# Estel Docs 文档系统 + +Look at the [Estel Docs](https://lijue.net) to learn more. + +## 安装 + +确保安装依赖: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## 开发服务器 + +在 `http://localhost:3000` 启动开发服务器: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## 生产构建 + +构建生产应用: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build + +# bun +bun run build +``` + +本地预览生产构建: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +查看 [部署文档](https://lijue.net/) 了解更多信息. +```` + +:: + +::tip{icon="i-lucide-info"} +代码树可以用来展示简单的项目文件结构.但并不适合过于复杂的项目. +:: + + +### 4. 字体样式：强调你的文字 + +- **粗体**：用两个星号或下划线包裹文字，如 `**粗体**` 或 `__粗体__`。 +- _斜体_：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。 +- ~~删除线~~：用两个波浪线包裹文字，如 `~~删除线~~`。 + +这些简单的标记可以让你的内容更有层次感和重点突出。 + +### 5. 列表：整洁有序 + +- **无序列表**：用 `-`、`*` 或 `+` 加空格开始一行。 +- **有序列表**：使用数字加点号（`1.`、`2.`）开始一行。 + +在列表中嵌套其他内容？只需缩进即可实现嵌套效果。 + +- 无序列表项 1 + 1. 嵌套有序列表项 1 + 2. 嵌套有序列表项 2 +- 无序列表项 2 + +1. 有序列表项 1 +2. 有序列表项 2 + +### 6. 链接与图片：丰富内容 + +- **链接**：用方括号和圆括号创建链接 `[显示文本](链接地址)`。 +- **图片**：和链接类似，只需在前面加上 `!`，如 `![描述文本](图片链接)`。 + +[访问 Estel Docs](https://lijue.net) + +![Estel Docs](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250811123147804.png) + + + +### 7. 引用：引用名言或引人深思的句子 + +使用 `>` 来创建引用，只需在文本前面加上它。多层引用？在前一层 `>` 后再加一个就行。 + +> 这是一个引用 +> +> > 这是一个嵌套引用 + +这让你的引用更加富有层次感。 + +语法高亮让你的代码更易读。 + +### 8. 分割线：分割内容 + +用三个或更多的 `-`、`*` 或 `_` 来创建分割线。 + +--- + +为你的内容添加视觉分隔。 + +### 9. 表格：清晰展示数据 + +Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。 + +| 项目名称 | 演示网址 | 仓库地址 | +| ------------------------------------------- | ---------------------- | ------------ | +| Estel Docs | [lijue.net](https://lijue.net) | [Github](https://github.com/estel-li/estel-docs) | +| Estel Docs | [lijue.net](https://lijue.net) | [GitEE](https://gitee.com/estel-li/estel-docs) | +| Estel Docs | [lijue.net](https://lijue.net) | [Gitee(国内)](https://gitee.com/estel-li/estel-docs) | + +这样的表格让数据展示更为清爽！ + + +## 结语 + +- 还有更多的组件等待你发现. diff --git a/content/blog/1.技术栈/981.使用 AI 守护内网安全.md b/content/blog/1.技术栈/981.使用 AI 守护内网安全.md index 1be622d..3b4d05d 100644 --- a/content/blog/1.技术栈/981.使用 AI 守护内网安全.md +++ b/content/blog/1.技术栈/981.使用 AI 守护内网安全.md @@ -37,10 +37,10 @@ Kali 默认不开 SSH , 配置 SSH 服务, 连接到Kali Linux: ![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805200634764.png) 最终完成了任务. -[系统安全综合评估报告](https://lijue.me/index.php/archives/19/) +[系统安全综合评估报告](https://lijue.net/index.php/archives/19/) 使用的命令 -[系统安全扫描工具命令集合](https://lijue.me/index.php/archives/20/) +[系统安全扫描工具命令集合](https://lijue.net/index.php/archives/20/) 最后整个过程,使用的工具,命令交由 Claude 4 sonnet 模型进行审查. diff --git a/content/blog/1.技术栈/993.Docker 里配置hosts.md b/content/blog/1.技术栈/993.Docker 里配置hosts.md index 448ea03..39406c4 100644 --- a/content/blog/1.技术栈/993.Docker 里配置hosts.md +++ b/content/blog/1.技术栈/993.Docker 里配置hosts.md @@ -10,10 +10,10 @@ navigation: ``` docker run - --add-host='lijue.me:127.0.0.1' - --add-host='www.lijue.me:192.168.1.1' + --add-host='lijue.net:127.0.0.1' + --add-host='www.lijue.net:192.168.1.1' --name hello-docker - -it reg.lijue.me/public/hello-docker:latest + -it reg.lijue.net/public/hello-docker:latest ``` @@ -25,6 +25,6 @@ docker run 3. `web:` 4. `image: hello-docker:latest` 5. `extra_hosts:` -6. `- 'www.lijue.me:192.168.1.1'` -7. `- 'lijue.me:127.0.0.1'` +6. `- 'www.lijue.net:192.168.1.1'` +7. `- 'lijue.net:127.0.0.1'` ``` \ No newline at end of file diff --git a/nuxt.config.ts b/nuxt.config.ts index 3892c19..6268c1a 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -99,7 +99,7 @@ export default defineNuxtConfig({ } }, llms: { - domain: 'https://lijue.me', + domain: 'https://lijue.net', title: 'Estel Docs', description: 'Estel Docs 文档系统', sections: [ diff --git a/package.json b/package.json index d0c91ce..6c85289 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "author": "Estel", "license": "MIT", "version": "1.0.0", - "homepage": "https://lijue.me", + "homepage": "https://lijue.net", "repository": { "type": "git", "url": "https://github.com/estel-li/estel-docs" diff --git a/项目说明/简介文档.md b/项目说明/简介文档.md index 31a942a..e3bab47 100644 --- a/项目说明/简介文档.md +++ b/项目说明/简介文档.md @@ -220,7 +220,7 @@ const { data: articles } = await useAsyncData( - **项目仓库**: https://github.com/estel-li/estel-docs - **在线演示**: https://docs.jiwei.xin -- **个人博客**: https://lijue.me +- **个人博客**: https://lijue.net - **技术文档**: https://nuxt.com/docs ---