VuePressTemplate

• VuePressTemplate
  • 简易部署流程
  • 简易编写说明
  • 首页博客样式

---

参阅 VuePressTemplate / 简易部署流程 食用～

自动部署展示页面: VuePressTemplate

原始手动从头构建仓库的说明在 此处

---

简易部署流程

使用此仓库创建 Repo

可以看到一个 Actions 正在运行，运行完毕后会生成一个新的 branch

---

打开仓库设置页面 -> Pages：选择从 branch 部署 Pages并选择 gh=pages branch， 点击 Save

---

然后就会看到一个新的 Actions 运行：

访问此 URL 可以看到站点部署完成

此时你的站点有可能显示如下, 表现为样式无法加载:

此时需要将此处修改为与你当前的仓库名一致:

修改后 push 到仓库, Actions 运行完成后再次访问网页应该就正常了

---

接下来需要将仓库 Clone 到本地然后修改一些配置项：

clone 仓库到本地后，先 cd 到仓库根目录运行 pnpm install 安装依赖

主要修改如下配置项：

两个配置项文件 config.ts 和 theme.ts， 除了下面特别说明的关键配置项外，其余配置项参阅注释和 pnpm,Github Actions, Github/Gitlab Pages 自动化部署文档 修改即可

---

修改完配置项后可以在本地运行看看效果：

pnpm docs:dev

---

推送到 github 后触发 Actions 自动部署

---

简易编写说明

部署完成后编写部署随笔只需要考虑两个部分：

• 写 markdown 随笔

  在 docs 目录下自行组织目录结构编写 markdown 文件随笔即可：

  

• 写目录配置

  参阅下图编写随笔的顶部导航栏和侧边导航栏即可

  可以对照仓库中的示例文档的目录写法来编写

  

---

首页博客样式

VuePress Theme Hope 主题有对博客的支持，详情可参阅 VuePress Theme Hope/指南/博客/博客功能介绍

类似下面这种首页博客样式：

只需要配置 docs/README.md 中的如下红框部分的样式内容即可，具体可参阅 https://github.com/233Official/dailynotes/blob/main/docs/README.md

额外的博客样式比如如下标签之类的需要在 docs/.vuepress/theme.ts 中进行配置，具体可参阅 https://github.com/233Official/dailynotes/blob/main/docs/.vuepress/theme.ts

---