Vuepress-Hope博客模板介绍

Fish_redflying · 2025-05-10 13:35:00 · 科技·工程

这也可以看成一篇博客搭建的指南。

Step 0 预备

你需要准备

【可选】 下载 Steam++，用于加速 Github。

【必选】 注册 Github 账号，用于储存网页代码

【必选】 安装 Node.js，建议 19+。

【必选】 安装 Git。

【必选】 netlify账号，注意用 github 账号登录。

安装 Git 前，建议先看看这篇文章，里面讲了关于 Git 的安装以及如何操作。

您可以浏览一下效果

Myblog，用本教程 Hope 主题实现。

@tzzl3035's blog，用另外一个主题做的，方法大同小异。叫 plume 主题。

@Wangzc2012's blog，似乎是在 github 上找的主题，叫 Frosti Template。

Step 1 创建项目

本教程采用的博客搭建基于 vuepress 生态系统，我将用 Hope 主题做示例。

在你的工作目录下新建一个文件夹，随你怎么取，这里就叫 kun 吧。

（@Kun_is_Me：酸萝卜别吃）

用文件资源管理器打开这个文件夹，点上面那个路径框，输入 cmd，定位到文件夹。

默认是 npm 包管理器，输入

npm init vuepress-theme-hope@latest kun

即可。

Ask : Ok to proceed? (y)

Answer : Y

Ask : ? Select a language to display / 选择显示语言 (Use arrow keys)

Answer : 简体中文

Ask : 选择包管理器 (Use arrow keys)

Answer : npm

Ask : 你想要使用哪个打包器？ (Use arrow keys)

Answer : 哪个都行，这里我选 webpack。

Ask : 设置应用名称 (vuepress-theme-hope-template) & 设置应用描述 (A project of vuepress-theme-hope) & 设置应用版本号 (2.0.0) & 设置协议 (MIT)

Answer:随意

Ask:你想要创建什么类型的项目？

Answer:docs(文档) / blog(博客) 根据需要选择，这里选 blog。

Ask:项目需要用到多语言么? (y/N)

Answer:一般是不用的，我这里选 N

Ask:是否初始化 Git 仓库? (y/N)

Answer:这里我选 no，其实也可以选 Yes，只不过作者太弱，还没搞清楚怎么搞。

Ask:选择你想使用的源

Answer:国内镜像源，这个比较快（吧）。

等一会....................

Ask:是否想要现在启动 Demo 查看?

Answer:Yes

接下来，在浏览器输入 localhost:8080 或 点他

你可能就会看到：

至此，创建项目已完成。

Step 2 配置项目

Attention ：下面所描述的文件路径都指相对路径，除非特殊指出。

学习一下 demo 每个配置文件的格式。

然后看一看 点他，了解一下文章是的网页相对路径是怎样安排的。

配置 Config.ts

打开文件 src\.vuepress\config.ts。

• 属性 title： 你博客的标题，就是博客顶部左上角那个东西。

配置 navbar.ts

打开文件 src\.vuepress\navbar.ts。

你可以发现一串很繁杂的东西。

太烦了！

那么我们就把它删了。

然后来看看

这里面的元素有分两种。

一种是填一个文件夹或文章的路径，然后自动帮你配置好，显示的图标与文字一一对应。

另一种是你自己配置。

对于每一个元素而言：

• 属性 text： 这个元素显示的标题，就是显示的文字。

• 属性 icon： 这个元素显示的图表。

• 属性 prefix： 即网页相对路径的前缀，也可以看成文件夹的链接

• 属性 children： 即套娃，但是要注意这里面的网页相对路径要加前所有项的前缀。给个实例就明白了

EXAMPLE：

import { navbar } from "vuepress-theme-hope";

export default navbar([
  "/",
  "/demo/",
  {
    text: "博文",
    icon: "pen-to-square",
    prefix: "/posts/",
    children: [
      {
        text: "苹果",
        icon: "pen-to-square",
        prefix: "apple/",
        children: [
          { text: "苹果1", icon: "pen-to-square", link: "1" },
          { text: "苹果2", icon: "pen-to-square", link: "2" },
          "3",
          "4",
        ],
      },
    ],
  },
  {
    text: "V2 文档",
    icon: "book",
    link: "https://theme-hope.vuejs.press/zh/",
  },
]);

清空 export default navbar([]); 里面的东西。自己配配你要装什么吧。

配置 sidebar.ts

打开文件 src\.vuepress\sidebar.ts。

这里的 text，icon，prefix 的格式都和 navbar.ts 相同，这里就不再赘述。

• 属性 link，即文章夹的网页相对路径，说白了就是让你可以点对应文章夹，然后跳转至文章夹的对应页面（系统自动配置）。

• 属性 children，其实和 navbar.ts的一样，但是多了一个自动扫描文章夹的对应文章，只要键入字符串 structure 即可启用，文件夹什么的都会扫到，反正懒得配就写个这个就行了。

配置 theme.ts

打开文件 src\.vuepress\theme.ts。

这个不用删东西。

我们一个一个看。

长文件警告。

• 属性 hostname： 不知道显示在哪，当它不存在。

• 属性 author： 是文章下面（或上面）显示的作者信息中的作者，显示文字的属性是 name，链接是 url。

• 属性 logo： 左上角的logo，输入图片链接即可

• 属性 repo： 就是是右上角 github 图标的链接。

• 属性 docsDir： 是文档存放相对路径，默认即可。

• 属性 footer：页脚显示内容，显示在每一篇文章末尾。

• 属性 blog/description： 个人介绍卡片的描述部分。

• 属性 blog/intro： 个人介绍文章的链接

• 属性 blog/medias： 看看就懂，就是那个介绍卡片一堆图标的东西，不要的图标可以删掉。当然可以自己添加图标，格式参考属性 blog/medias/VuePressThemeHope，这个比较简单，就不过多赘述。

• 属性 encrypt/config： 用于配置文章是否要加密，其中的键值指文章相对路径，值中的 hint 属性值密码提示，password 属性指密码。

• 属性 metaLocales： 多语言配置，不管它。

• 属性 markdown：默认即可，注意注释起来的取消注释它们如果你需要 TeX 支持一定要启用，不过你得事先安装 katex 或 mathjax-full 包，详细信息见 官方文档，其他七七八八的东西，这里就不赘述了。

• 属性 plugins：默认即可，注意其中的 components 属性，可以把所有内置组件都启用。其实你还可以自己注册组件，具体详情且看 官方文档。

配置 src/README.md

打开文件 src\README.md。

这里也是一个一个讲。

• 属性 home&layout：默认即可

• 属性 icon：似乎没用，默认即可。

• 属性 heroText&tagline：就是刚进来博客屏幕正中央看到的两行大字（主副标题）。你可以使用 heroText 设置主标题，并通过 tagline 设置副标题。

• 属性 heroFullScreen： 默认即可。

• 属性 project：name 项目名称，必填。 link 项目链接，必填，填入外部链接或绝对路径。 desc 项目描述，选填 icon 图标，可填入图标名称或图片完整链接。

• 属性 footer： 首页页脚

• 属性 bgimage&bgImageDark: 浅/深色背景图，背景图片的地址，不支持相对路径。如果不填写，会自动应用一张默认的风景图片。

下面的东西可以删掉。

官方文档更加全面。

配置至此完毕。

Step 3 创建文章

格式要参考原本的文章配置。

你可以在 CMD 使用下列命令：

npm run docs:dev 启动开发服务器

npm run docs:build 构建项目并输出

npm run docs:clean-dev 清除缓存并启动开发服务器

注意要让 CMD 定位到你创建的项目的文件夹内。

创建

你可以在 docsDir 的路径里面创建文章，解析器会自动扫到。默认是 /src/。

你可以在里面创建文件夹放文章，也可以创建 Markdown 文件写文章。

不妨试一下吧。

配置

这是关于每篇文章的 markdown 文件的配置说明。

你可以通过 <!-- more --> 注释添加文章摘要，在这之前的文章内容都会被视为摘要。

• 属性 star，设置星标文章。true 是 false 否。

• 属性 title，文章标题。

• 属性 sticky，是否在文章列表置顶，当填入数字时，数字越大，排名越靠前。

• 属性 category，所属分区，字符串。

• 属性 tag，标签，字符串

• 属性 cover，遮罩，填图片的url或相对路径。

• 属性 pageview，浏览量显示。布尔值。

• 属性 article，是否将其添加到文章列表中。

• 属性 icon，文章图标。

还有更多的属性，且看 官方文档

文章夹 README 配置

一般来说，每个文章夹下要都有一个 README 文件。

每个文件有这几个属性。

• title：标题显示

• index：是否在侧边栏或目录中索引当前页面。

• icon：图标

• category： 分类，即分属哪一类。

最后末尾都要加上 <Catalog />

其实这个 README.md 不加也不是不行，看个人罢。

图标获取

这里不得不提一下，作者在这里卡了好半天。

首先你先进去这个网站

找到你心仪的图标。

点开后，正下方弹出一个窗口。

可以看到，左边一般有 4 个选项 SVG,CCS,Components,PNG。

点 Components。

然后上面有好多个选项，点第一个即 Vue。

找到一串文字 Iconify for Vue usage (consider switching to Iconify Icon web component):

下面有个文本框。

找到属性 icon="巴啦啦"

把里面的字符串复制下来就可以在所有需要图标的场所直接将这个字符串复制进去。

Step 4 部署博客

在 Github 上创建仓库

注意先用 Steam++ 把网络加速的平台加速打开。

然后打开 Github。

找到一个绿绿的 New 按钮，旁边还附着一个像书一样的图标。

点进去。

Repository name：填仓库名称，这里我填 kun。

Description：描述，瞎填。

Public/Private: 肯定选 Public，公共，不然别人看不了你的网站。

README 文件不管它。

用 Git 提交博客项目。

（可能要一些7788的验证，按照提示做即可）

首先编译一下你的项目,用 npm run docs:build 命令。

然后再打开输出目录 src\.vuepress\dist，将里面的内容复制到一个新的文件夹，随你复制。这里复制到 /Big_Kun/。

然后用 CMD 定位到 /Big_Kun/，然后键入以下命令。

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub邮箱"

接下来 (克隆空仓库也没关系)

git clone https://github.com/用户名/仓库名.git
cd 仓库名  # 进入仓库目录

把文件装入暂存区

git add .

提交更改

git commit -m "描述你的更改，其实可以随便填"

推送到 main 分支

git push origin main

如果以后要更新文章的话，直接把文章复制到这个文件夹下，然后输入

git add .  # 添加所有新文件
git commit -m "彻底替换仓库内容"
git push origin main

即可提交更改。

用 netlify 部署到网络上。

点开 netlify.app

找到 Log in，再找到 Log in with Github。

然后是一大串的验证登录，这里不再赘述，按提示来即可。

然后找到 Add new site，在下拉菜单里选择第一个即可。

等一伙，找到 Github，点他。

接下来出现一大堆项目，选择刚才创建的仓库。这里肯定是 Kun 啦。

然后键入 ：

• Team，默认即可。

• Site name，随意，这里写 Kunblog。

接下来都默认，不用管。

点下面那个绿油油的 deploy，等一伙。

然后，在浏览器输入 你的博客名字.netlify.app。

至此，博客创建完成。

你可以看看这个。

这是 Kunblog.netlify.app

如果有什么不足或缺漏甚至是错误，欢迎指出。

我在评论区恭候。

【官方文档】