如何通过 Vitepress 搭建一个博客 #

不废话,直接开工吧 #

// 1、创建项目并初始化package.json
mkdir my_blog 
cd my_blog
pnpm init

//2、安装vitePress和vue3.0
pnpm i vitepress vue -D

//3、创建文件夹docs，并在其中添加一个md文档index.md
mkdir docs && echo '# Hello VitePress' > docs/index.md

//4、在package.json中添加scripts脚本
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs"
  },
  
//5、通过命令运行项目
pnpm dev

ε=(´ο｀*)))唉,感觉照着文档抄这个,好傻,不抄了,大家还是照着文档看看吧,我们来写点高级的

中文文档😄👍 💯

研究一下配置吧 #

回归初心,我原来就是为了应付备案检查,所以先配置一下备案信息吧,文档在这里

1. 先新建一个配置文件config.ts,文件结构如下:

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.ts
│  └─ index.md
└─ package.json

2. 添加配置,config.ts如下( 配置如下,去除掉其他配置 )

import { defineConfig } from 'vitepress';

export default defineConfig({
  themeConfig: {
    footer: {
      message: '<a href="https://beian.miit.gov.cn/">苏ICP备2020067590号</a>',
      copyright: 'Copyright © 2022-12-06 ～ present Wukoon',
    },
  },
});

各种配置很多,文档写得很细,查看文档,好好学习

研究一下编辑器吧 #

我觉得这个可以写写,毕竟,这是一个Blog,写文章才是重要的,作为一个程序员,我决定万物归于vscode,写blog,需要解决的第一个问题就是图片存储,俗话说,无图言🐦

添加插件(Markdown Image)
这个插件支持很多图床设置,但是最简单的就是存在项目里面,毕竟github不要钱,虽然速度有点慢,但是所有文章和图片都在自己手上,是不是安全感满满.

添加项目配置(这种插件,每个项目配置都不一样,所以添加在项目配置中比较好):

这时候,项目中会多一个文件.vscode/setting.json

{
    "markdown-image.local.path": "/docs/public/images",
    "markdown-image.base.fileNameFormat": "${mdname}/${hash}",
    "markdown-image.local.referencePath": "/images/${mdname}/"
}

解释一下配置:

1. 本地图片存储位置/docs/public/images,public/images目录在编译之后会被拷贝到输出目录的根目录下,可以通过images/XXXXX来访问.
2. 存储文件格式为 文件名/hash ,用文件名做一下隔离,便于找到图片.
3. 自动插入文档时代码 [图 1](/images/文件名/hash.png)

配置完成后,就可以直接在 markdown 文档中直接粘贴截图了,Mac 版本的快捷键为Option+shift+v,截图回自动保存,并插入markdown图片链接,十分的丝滑.

没有emoji的文档,多少有点无聊,但是在markdown中加入emoji有点麻烦,所以需要加一个插件来解决这个问题

添加插件(:emojisense:)

现在可以开始快乐输入了,在markdown文档中,键入:: 弹出提示.