Vuepress-Hope博客模板介绍

Step 0 预备

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

Step 1 创建项目

npm init vuepress-theme-hope@latest kun

Step 2 配置项目

配置 Config.ts

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

配置 navbar.ts

• 属性 text： 这个元素显示的标题，就是显示的文字。
• 属性 icon： 这个元素显示的图表。
• 属性 prefix： 即网页相对路径的前缀，也可以看成文件夹的链接
• 属性 children： 即套娃，但是要注意这里面的网页相对路径要加前所有项的前缀。给个实例就明白了

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/",
  },
]);

配置 sidebar.ts

• 属性 link，即文章夹的网页相对路径，说白了就是让你可以点对应文章夹，然后跳转至文章夹的对应页面（系统自动配置）。
• 属性 children，其实和 navbar.ts的一样，但是多了一个自动扫描文章夹的对应文章，只要键入字符串 structure 即可启用，文件夹什么的都会扫到，反正懒得配就写个这个就行了。

配置 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

• 属性 home&layout：默认即可
• 属性 icon：似乎没用，默认即可。
• 属性 heroText&tagline：就是刚进来博客屏幕正中央看到的两行大字（主副标题）。你可以使用 heroText 设置主标题，并通过 tagline 设置副标题。
• 属性 heroFullScreen： 默认即可。
• 属性 project：name 项目名称，必填。 link 项目链接，必填，填入外部链接或绝对路径。 desc 项目描述，选填 icon 图标，可填入图标名称或图片完整链接。
• 属性 footer： 首页页脚
• 属性 bgimage&bgImageDark: 浅/深色背景图，背景图片的地址，不支持相对路径。如果不填写，会自动应用一张默认的风景图片。

Step 3 创建文章

创建

配置

• 属性 star，设置星标文章。true 是 false 否。
• 属性 title，文章标题。
• 属性 sticky，是否在文章列表置顶，当填入数字时，数字越大，排名越靠前。
• 属性 category，所属分区，字符串。
• 属性 tag，标签，字符串
• 属性 cover，遮罩，填图片的url或相对路径。
• 属性 pageview，浏览量显示。布尔值。
• 属性 article，是否将其添加到文章列表中。
• 属性 icon，文章图标。

文章夹 README 配置

• title：标题显示
• index：是否在侧边栏或目录中索引当前页面。
• icon：图标
• category： 分类，即分属哪一类。

图标获取

Step 4 部署博客

在 Github 上创建仓库

用 Git 提交博客项目。

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

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

git add .

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

git push origin main

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

用 netlify 部署到网络上。

点开 netlify.app

• Team，默认即可。
• Site name，随意，这里写 Kunblog。

你可以看看这个。