Document

个人博客网站的搭建

2023-07-21
dfer
414
前端

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

为什么选择vuepress

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

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

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

一旦页面被加载，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] 是一个参数，你需要使用真实的文件夹名称替换它，例如 docs、blog 或其他你喜欢的名称。

配置网站

配置文件

为了更好地自定义你的网站，所有 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)

上一篇：前端开发者都应知道的

下一篇：入门开发教程之网站品