基于 vue-theme-hope 的博客搭建指南

在构建博客时，推荐参照官方文档进行构建，本文知识大致介绍与提出基本概念，帮助大家快速构建博客。

搭建个人博客的好处有很多，包括笔记管理，快速定位搜索，知识点复习，激发创作欲等，每个程序员都应有一个个人博客。什么暴论
目前搭建个人博客、资料库的手段很多。例如hexo，wordpress，VuePress，自行搭建······。
VuePress是Vue 驱动的静态网站生成器，VuePress的核心是以Markdown文件为中心，由 Vue、Vue Router 和 webpack驱动的单页应用，它功能强大并支持诸多插件。
VuePress Theme Hope是一个具有强大功能的 vuepress 主题，它基于VuePress2.x并提供了更强大的功能。

构建项目

相关信息

在搭建blog之前，你需要准备：

• Node.js 16+
• 推荐使用pnpm 7+作为包管理工具

初始化项目：

# pnpm
pnpm create vuepress-theme-hope my-docs

这里的my-docs代表当前目录下的项目文件夹名称
构建项目时，可以选择简体中文并回车来在后续流程中使用中文进行显示。
在模板初始化成功后选择立即启动开发服务器，你就可以在浏览器地址栏输入 localhost:8080/ 访问你的博客。

基本概念

在构建项目后，开发项目前，你需要了解的基础知识：

1. VuePress 是以Markdown 为中心的。你项目中的每一个 Markdown 文件都是一个单独的页面。
2. 主要配置文件：
   • .vuepress/config.ts：VuePress的配置文件，用于配置主题，插件，站点等，相关配置
   • .vuepress/theme.ts：主题配置，用于配置主题的功能、布局、外观等，相关配置
   • narbar.ts：用于配置导航栏布局，相关配置
   • sidebat.ts：用于配置侧边栏布局，相关配置
3. frontmatter：必须放在.md文件的开头，可以配置Markdown文件的相关信息，这些信息用于显示在博客上的标题，图标，时间，分类等，相关配置
4. 博客首页（.vuepress/README.md）：如果你创建的是博客项目，那么你打开博客后的初始页面为首页，你可以对其进行配置，也可以更改首页。相关配置
5. 个人介绍页（.vuepress/intro.md）
6. .vuepress/styles：样式配置，用于配置主题样式，添加自己的样式等，相关配置
7. Markdown 文件路由路径

你可以在vueprress-theme-hope官方文档中查询所有的配置与功能

MarkDown增强

有了MarkDown增强即可在编写文章时使用更多的语法来实现更丰富的效果。

• VuePress 本身新增了一些 Markdown 语法
• vuepress-theme-hope 通过 vuepress-plugin-md-enhance 在 Markdown 中启用了更多的语法与新功能。

在MarkDown中使用Vue

在MarkDown文件中可以使用Vue语法和Vue组件
建议在.vuepress/components文件夹下创建组件
通过@vuepress/plugin-register-components插件可以进行组件的注册

安装插件与配置项

在vuepress-theme-hope中使用：
为了正确导入自己的组件，你需要为它们创建别名，你可以通过 alias 选项实现这一点:

// .vuepress/config.ts
import { getDirname, path } from "@vuepress/utils";

const __dirname = getDirname(import.meta.url);

export default {
  alias: {
    "@MyComponent": path.resolve(__dirname, "components/MyComponent.vue"),
  },
};

在MarkDown中引入：

<MyComponent />

<script setup lang="ts">
import MyComponent from "@MyComponent";
</script>

插件

vuepress的官方插件
vuepress-theme-hope内置的插件
插件市场包括更强的搜索，博客，live-2d等功能

常见问题

在构建过程中，难免会发生问题，大部分问题你可以在常见问题和GitHub issues上找到

项目的部署

推荐使用 GitHub Actions 部署到 GitHub Pages
其他方式部署