在前端开发中，我们常常需要搭建个人博客或者团队博客网站，vuepress-theme-blog 是一个基于vuepress的npm包，它可以帮助我们快速搭建一个美观简洁的博客网站。
安装
安装 vuepress-theme-blog 可以使用 npm 或者 yarn 安装。
npm install vuepress-theme-blog --save
或者
yarn add vuepress-theme-blog
使用
在使用 vuepress-theme-blog 搭建博客网站时，我们需要先在项目中引入该主题，然后按照该主题的具体配置进行设置。
- 在项目的
docs/.vuepress/config.js文件中，引入该主题，具体的配置如下：
-- -------------------- ---- -------
-------------- - -
------ --- ------
------------ --- ------
------ ----------------------
------------ -
-- --- ----
----- ------------
-- -----
----- -
-- -----
--------- -----------
-- -----
---- ------
-- -----
----- ---------
-- -------
------- ------
--
-- ----
------------ --
------ ---- ------
----- -----------------------
---
-- ----
------------ --
------ ----------
----- ----------------------
---
-- ------ --
------- -
--------- ------
----- ----------------------
--------- ----- ----------
------------- ----- -------------
-
-
-- 在项目中创建
.md文件用来发布博客，在docs/blog目录下创建分类和标签，博客文件中的frontmatter部分需要加入category和tags信息。示例如下：
-- -------------------- ---- ------- --- ------ ---- ----- ---------- ------------ ---- --------- -- ----- - --- - --- --- -------- --
如果要在博客中添加评论，可以注册一个 Github 应用程序并使用
vuepress-plugin-comment插件，具体步骤如下：a. 在 Github 上注册一个新的 OAuth 应用程序，在
Settings > Developer settings > OAuth Apps界面下，选择New OAuth App创建一个新的 OAuth 应用程序。b. 在输入应用程序名称 / 主页 url / 授权回调 URL 后，点击
Register application。c. 在应用程序设置页中获取
client ID和client Secret信息。d. 在
docs/.vuepress/config.js文件中添加如下配置：-- -------------------- ---- ------- -------------- - - ---- -------- - - ------------------------------- - --------- --------- ------ ----- ---------- ----- ----- ------ --------- ----- ---------- ------------- ----- -------------- ---------------- ---- - - - -注意需要把
your username和your repo更换成你自己的账号和所在的仓库名称。e. 在
.md文件中添加Toc快捷指令，用于生成评论区。-- -------------------- ---- ------- --- ------ ---- ----- ---------- ------------ ---- --------- -- ----- - --- - --- -------- ---- ---- ---- ---
运行本地服务，在终端命令中输入以下命令：
npm run dev
- 构建部署，在终端命令中输入以下命令：
npm run build
构建成功后，生成的静态网站可自行上传到服务器上进行部署，也可以将代码上传到 GitHub 上，通过 GitHub Pages 进行在线浏览博客。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbcf9