个人博客网站的搭建

::: info 博客开发流程
1.初始化vuepress项目
2.选择喜欢的博客主题
3.下载模板主题
4.配置修改成自己想要的风格
5.迁移博客
:::

为什么选择vuepress

  1. vuepress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器,适合国内开发人员开发个人静态博客网站,操作简单易上手。

    有众多开发人员开发出的博客主题模板供大家选择修改、开发出自己的博客网站。

  2. vuepress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器,基于Markdown语法生成网页。简单的说它就是一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档,

  3. 一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。

初始化vuepress项目

前提条件:VuePress 需要 Node.js (opens new window)>= 8.6

1.新建一个文件作为项目根目录

2.终端打开该项目,对包管理器初始化

::: tabs#environment

@tab npm#npm

npm init

@tab yarn#yarn

yarn init

:::

3.将 VuePress 安装为本地依赖

::: tabs#environment

@tab npm#npm

npm install -D vuepress

@tab yarn#yarn

yarn add -D vuepress

:::

4.在 package.json 中添加一些 script,这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

6.在本地启动服务器

::: tabs#environment

@tab npm#npm

npm run docs:dev

@tab yarn#yarn

yarn docs:dev

:::

下载自己喜欢的博客模板主题

模板网址:keywords:vuepress-theme - npm search (npmjs.com)

下面以vuepress-theme-hope为例

安装

要将 vuepress-theme-hope 作为文档构建器添加到现有项目中,请在项目根目录中运行以下命令:

::: tabs#environment

@tab npm#npm

npm init vuepress-theme-hope add [dir]

@tab yarn#yarn

yarn create vuepress-theme-hope add [dir]

:::

[dir] 文件夹内新建 vuepress-theme-hope 项目:

::: tabs#environment

@tab npm#npm

npm init vuepress-theme-hope [dir]

@tab yarn#yarn

yarn create vuepress-theme-hope [dir]

:::

!这里的 [dir] 是一个参数,你需要使用真实的文件夹名称替换它,例如 docsblog 或其他你喜欢的名称。

配置网站

配置文件

为了更好地自定义你的网站,所有 VuePress 相关的文件都将会被放在.vuepress 目录下。你的项目结构可能是这样:

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

1.站点配置 | 应用级别的配置(defineUserConfig):

对所有的主题都生效

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 或者Typescript对象:

::: tabs#language

@tab ts#ts

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    // 此处放置主题配置
  }),
});

@tab js#js

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    // 此处放置主题配置
  }),
};

:::

2.主题配置:

仅对该主题生效,更换主题将不再生效。一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中,目前自带了一个默认的主题(正是你现在所看到的),它是为技术文档而设计的。同时,默认主题提供了一些选项,让你可以去自定义导航栏(navbar)、 侧边栏(sidebar)和 首页(homepage) 等,详情请参见 默认主题

::: tabs#language

@tab ts#ts

import { hopeTheme } from "vuepress-theme-hope";
import { zhNavbar } from "./navbar/index.js";
import { zhSidebar } from "./sidebar/index.js";
export default hopeTheme({
  hostname: "",
  blog: { },
  plugins: { },
  type AuthorName = string;
  interface AuthorInfo {
      /**
       * 作者姓名
       */
      name: string;

      /**
       * 作者网站
       */
      url?: string;

      /**
       * 作者 Email
       */
      email?: string;
  }
  type Author = AuthorName | AuthorName[] | AuthorInfo | AuthorInfo[];
});

@tab js#js

import { hopeTheme } from "vuepress-theme-hope";
import { zhNavbar } from "./navbar/index.js";
import { zhSidebar } from "./sidebar/index.js";
export default hopeTheme({
  hostname: "",
  blog: { },
  plugins: { },
  type AuthorName = string;
  interface AuthorInfo {
      /**
       * 作者姓名
       */
      name: string;

      /**
       * 作者网站
       */
      url?: string;

      /**
       * 作者 Email
       */
      email?: string;
  }
  type Author = AuthorName | AuthorName[] | AuthorInfo | AuthorInfo[];
});

:::

详细请参考: 主题基本选项 | vuepress-theme-hope (vuejs.press)

迁移博客

首先启用实现了文章信息展示。

页面信息默认全局启用,同时支持页面配置。你可以在特定页面的 front matter 中设置 pageInfo: false 来局部禁用它。

如果你需要保持全局禁用,请在主题选项中设置 pageInfo: false。这样你可以在特定页面的 front matter 中设置 pageInfo 来局部启用它。

pageInfo 默认接受一个字符串数组,可以填入各条目名称,填入的顺序即是各条目显示的顺序。

条目可选的值和对应内容如下:

条目 对应内容 页面 frontmatter 值 主题设置的配置项
"Author" 作者 author author
"Date" 写作日期 date N/A
"Original" 是否原创 isOriginal N/A
"Category" 分类 category N/A
"Tag" 标签 tag N/A
"ReadingTime" 预计阅读时间 N/A(自动生成) N/A
"Word" 字数 N/A(自动生成) N/A
"PageView" 访问量 pageview (仅 Waline 可用) plugins.comment.pageview

默认会显示 “作者,访问量,写作日期,分类,标签,预计阅读时间”

eg:

---
author: Mr.Hope	 // 作者
date: 2020-01-01 //写作日期
pageview: false  //浏览量
---

分类设置:

只需要在页面 frontmatter 中设置 category 数组,并设置一个或多个文章所属的分类,该文章会自动渲染在 /category/<分类名>/ 分类页面的列表中。

---
category:
  - HTML
  - Web
---

页面内容...

标签:

只需要在页面的 frontmatter 中设置 tag,并设置一个或多个文章所属的标签,该文章会自动渲染在 /tag/<标签名>/ 标签页面的列表中。

---
tag:
  - HTML
  - Web
---

页面内容...

以上是我对项目的简单总结,大家如果想要开发出自己的网站,还需要根据官方文档系统学习。

主页 | vuepress-theme-hope (vuejs.press)