新增博文,注释登录注册窗口,修改h3样式,更改地址为lijue.net
This commit is contained in:
363
content/blog/1.技术栈/975.新的文档渲染样式.md
Normal file
363
content/blog/1.技术栈/975.新的文档渲染样式.md
Normal file
@@ -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]
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
```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)
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
### 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) |
|
||||
|
||||
这样的表格让数据展示更为清爽!
|
||||
|
||||
|
||||
## 结语
|
||||
|
||||
- 还有更多的组件等待你发现.
|
@@ -37,10 +37,10 @@ Kali 默认不开 SSH , 配置 SSH 服务, 连接到Kali Linux:
|
||||
|
||||

|
||||
最终完成了任务.
|
||||
[系统安全综合评估报告](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 模型进行审查.
|
||||
|
@@ -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'`
|
||||
```
|
Reference in New Issue
Block a user