博客搭建

博客搭建

参考：

基础教程 | vuepress-theme-hope (vuejs.press)

安装/使用 | vuepress-theme-hope (vuejs.press)

在一个目录下创建Iblog目录

在该目录下运行

npm init vuepress-theme-hope Iblog

根据提示进行选择（多语言是指中文/英文），类型建议选择blog，而不是docs

切换到docs目录下，运行下列命令，启动项目

npm run docs:dev

VsCode调试这一行

打包项目

npm run docs:build

必备设置

修改启动端口

修改 .vuepress/config.ts

import { defineUserConfig } from "vuepress";
import theme from "./theme.js";

export default defineUserConfig({
  port: 19999,

文章标题多级目录支持

默认只支持2,3级

修改 .vuepress/theme.ts

import { hopeTheme } from "vuepress-theme-hope";
import { enNavbar, zhNavbar } from "./navbar/index.js";
import { enSidebar, zhSidebar } from "./sidebar/index.js";

export default hopeTheme({
  headerDepth: 6,

修改 .vuepress/config.ts

export default defineUserConfig({
  markdown: {
    headers: {
      level: [1,2,3,4,5,6]
    }
  },

文章头部设置

Frontmatter 配置 | vuepress-theme-hope (vuejs.press)

---
# 这是文章的标题
title: 页面配置
# 这是页面的图标
icon: file
# 这是侧边栏的顺序
order: 1
# 设置作者
author: LiAng
# 设置写作时间
date: 2020-01-01
# 一个页面可以有多个分类
category:
  - 使用指南
# 一个页面可以有多个标签
tag:
  - 页面配置
  - 使用指南
# 此页面会在文章列表置顶
sticky: true
# 此页面会出现在文章收藏中
star: true
# 你可以自定义页脚
footer: 这是测试显示的页脚
# 你可以自定义版权信息
copyright: 无版权
---