Solution - 博客网站 - VScode+Obsidian+VuePress+Github

文章摘要： 摘要内容。

简介

使用VitePress进行搭建基础项目。

注释

更多需要注意的是使用 “笔记软件” 和 “博客网站” 都能使用的语法和功能。
部署、使用、同步的流程完善和优化。
Git版本控制，该项目方案必须保证每次只有一台设备对笔记项目进行操作。

项目部署流程

==待完善==

目录结构

src/
|-- .vuepress/  # 博客配置文件
|-- 自定义目录/  # 博客文章目录

package-lock.json
package.json
tsconfig.json

编写规范

在每个博客目录中创建assets/作为资源目录。
使用VScode的Excalidraw插件来绘制白板，文件格式为.excalidraw.svg。
在Obsidian中不对.excalidraw.svg文件进行修改操作。
Obsidian用于编辑.md文件和提供双线链接展示。
VScode提供项目版本控制和打包部署。
Obsidian也配置了自动Git同步的功能。

技巧和规范

目录结构

目录层级不能偏多。最好两层，再往下则使用 “加粗字体” 代表标题。
资源文件夹在每个目录中都有。
.md文件的命名规范是<类别>-<名称>-<提示>.md
例子
src/software/软件类别的目录下，OS-DebianLinux12.md、OS-DebianLinux12-热门推荐-部署配置方案.md。

分类和标签

需要提前规划，清晰且明确。
例子
分类：学习笔记、文章解读、项目总结、软件程序/工具、软件程序/系统、软件程序/依赖、软件程序/语言
标签：学习笔记、项目文档、解决方案、查询手册、问题总结、热门推荐、依赖

文章中的元数据

文章以Markdown的语法规则进行编写，每篇文章的头部会有yaml元数据，用于对文章进行数据统计或分类。

提供便捷导航

在首页顶部导航栏或侧栏添加比较常用或好用的文章，来提高实用性。

页面元信息（头部文章配置）

---
# 这是文章的标题
title: 页面配置
# 你可以自定义封面图片
cover: /assets/images/cover1.jpg
# 这是页面的图标
icon: file
# 这是侧边栏的顺序
order: 3
# 设置作者
author: Ms.Hope
# 设置写作时间
date: 2020-01-01
# 一个页面可以有多个分类
category:
  - 使用指南
# 一个页面可以有多个标签
tag:
  - 页面配置
  - 使用指南
  - 加密  # 实现文章加密
# 此页面会在文章列表置顶
sticky: true
# 此页面会出现在星标文章中
star: true
# 你可以自定义页脚
footer: 这是测试显示的页脚
# 你可以自定义版权信息
copyright: 无版权

# 导航栏
navbar: false
# 侧边栏
sidebar: false
# 路径导航
breadcrumb: false
# 页面信息
pageInfo: false
# 贡献者
contributors: false
# 编辑此页链接
editLink: false
# 更新时间
lastUpdated: false
# 上一篇 连接
prev: false
# 下一篇 链接
next: false
# 评论
comment: false
# 页脚
footer: false
# 返回顶部按钮
backtotop: false
---

语法整理

注释

提示：此处总结的Markdown编写格式是与博客主题和Obsidian笔记软件都支持或最佳编写方案。

链接和图片

方案一：[文章](笔记/文章.md)

方案二：[文章某个片段](笔记/文章#简介.md)

方案三：
![嵌入另一篇文章某个片段](笔记/文章#简介.md)
![Alt](/example.jpg "图片标题")
![Alt](/example.bmp =x300)
![Alt](/example.png =200x300)
![Alt](/example.jpg "图片标题" =200x)

注释

此处我建议使用Obsidian笔记软件，实现在修改文件名或目录时自动更新引用到的文章链接。

任务列表

[x] 计划 1
[ ] 计划 2

- [x] 计划 1
- [ ] 计划 2

上下角标

19^th^ H~2~O

19^th^ H~2~O

剧透/隐藏

VuePress Theme Hope !!十分强大!!.

!!十分强大!!

高亮/标记

你可以标记 ==重要的内容== 。

==重要的内容==

脚注

此文字有脚注^first。

此文字有脚注[^first]。

[^first]: 这是脚注内容

数学公式-行内写法

$xxx$

Euler's identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$ .

Euler's identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.

数学公式-显示写法

$xxx$

$$
xxx
$$

\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}

$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
$$

表格

标题	标题	标题
内容	内容	内容
左对齐	居中对齐	右对齐

| 标题 | 标题 | 标题 |
| :-- | :-: | --: |
| 内容 | 内容 | 内容 |
| 左对齐 | 居中对齐 | 右对齐 |

代码块

npm i -D vuepress-theme-hope

\``` bash
npm i -D vuepress-theme-hope
\```

代码块分组

pnpm

pnpm add -D vuepress

yarn

yarn add -D vuepress

npm

npm i -D vuepress

::: code-tabs#shell

@tab pnpm

\```bash
pnpm add -D vuepress
\```

@tab yarn

\```bash
yarn add -D vuepress
\```

@tab:active npm

\```bash
npm i -D vuepress
\```

:::

选项卡

在这个容器内，你应该使用 @tab 标记来标记和分隔选项卡内容。
在 @tab 标记后，你可以添加文本 :active 默认激活选项卡，之后的文本将被解析为选项卡标题。

标题 1

标题 2

标题 3

::: tabs

@tab 标题 1

<!-- tab 1 内容 -->

@tab 标题 2

<!-- tab 2 内容 -->

<!-- 👇 tab 3 将会被默认激活 -->

@tab:active 标题 3

<!-- tab 3 内容 -->

:::

提示容器

重要

重要容器。

GFM警告

重要

重要文字

文本对齐

::: left

左对齐的内容

:::

::: center

居中的内容

:::

::: right

右对齐的内容

:::

::: justify

两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容

:::

::: left
左对齐的内容
:::

::: center
居中的内容
:::

::: right
右对齐的内容
:::

::: justify
两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容两端对齐的内容
:::

Mermaid图表

提示

需要下载mermaid依赖，npm i -D mermaid。
并在.vuepress/theme.ts配置中启用，mermaid: true。

sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!

PlantUML图表

@startuml :Main Admin: as Admin (Use the application) as (Use)

User -> (Start) User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use) A note can also be on several lines end note

note "This note is connected\nto several objects." as N2 (Start) .. N2 N2 .. (Use) @enduml

@startuml
:Main Admin: as Admin
(Use the application) as (Use)

User -> (Start)
User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use)
A note can also
be on several lines
end note

note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml

提示

详细格式语法查看：Language-UML-语法格式

该博客主题的PlantUML图的格式：教程

问题总结

详细总结：Solution-博客网站-VuePress+Github-问题总结