前言
经过众多个主题的选择，终于选择了优雅的hope，以下是一些使用心得。
安装&启动
- 下载依赖
初始化
npm install vuepress
npm install yarn
yarn install
- 命令运行本地服务
yarn docs:dev
- 打包成静态文件
命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。
vuepress build docs
或
npm run build
项目结构
全局基础信息配置
import { defineThemeConfig } from "vuepress-theme-hope"; import * as navbar from "./navbar"; import * as sidebar from "./sidebar"; export default defineThemeConfig({ hostname: "http://javapub.net.cn/", author: { name: "Wang Shiyu", url: "http://javapub.net.cn", }, iconPrefix: "iconfont icon-", logo: "/javapub-backgroup.svg", repo: "https://github.com/Rodert", docsDir: "demo/src", pageInfo: ["Author", "Original", "Date", "Category", "Tag", "ReadingTime"], footer: "<a href='https://beian.miit.gov.cn/'>京ICP备2021007111号-2</a>", displayFooter: true, blog: { medias: { // Baidu: "https://example.com", // Bitbucket: "https://example.com", // Dingding: "https://example.com", // Discord: "https://example.com", // Dribbble: "https://example.com", // Email: "https://example.com", // Evernote: "https://example.com", // Facebook: "https://example.com", // Flipboard: "https://example.com", Gitee: "https://gitee.com/rodert/JavaPub", GitHub: "https://github.com/Rodert", // Gitlab: "https://example.com", // Gmail: "https://example.com", // Instagram: "https://example.com", // Lines: "https://example.com", // Linkedin: "https://example.com", // Pinterest: "https://example.com", // Pocket: "https://example.com", // QQ: "https://example.com", // Qzone: "https://example.com", // Reddit: "https://example.com", // Rss: "https://example.com", // Steam: "https://example.com", // Twitter: "https://example.com", // Wechat: "https://example.com", // Weibo: "https://example.com", // Whatsapp: "https://example.com", // Youtube: "https://example.com", Zhihu: "https://www.zhihu.com/people/zhui-ma-7-49", }, }, locales: { "/": { // navbar navbar: navbar.javapub, // sidebar sidebar: sidebar.javapub, footer: "<a href='https://beian.miit.gov.cn/'>京ICP备2021007111号-2</a>", displayFooter: true, //浏览量 visitor: true, blog: { description: "一个来自巴彦淖尔的朋友", intro: "/intro.html", }, }, /** * Chinese locale config */ "/zh/": { // navbar navbar: navbar.zh, // sidebar sidebar: sidebar.zh, footer: "<a href='https://beian.miit.gov.cn/'>京ICP备2021007111号-2</a>", displayFooter: true, blog: { description: "一个前端开发者", intro: "/zh/intro.html", }, }, }, encrypt: { config: { "/guide/encrypt.html": ["1234"], "/zh/guide/encrypt.html": ["1234"], }, }, plugins: { blog: { autoExcerpt: true, }, // If you don't need comment feature, you can remove following option // The following config is for demo ONLY, if you need comment feature, please generate and use your own config, see comment plugin documentation for details. // To avoid disturbing the theme developer and consuming his resources, please DO NOT use the following config directly in your production environment!!!!! comment: { /** * Using giscus */ // type: "giscus", // repo: "Rodert/JavaPub-Blog", // repoId: "R_kgDOHK-WNg", // category: "Announcements", // categoryId: "DIC_kwDOHK-WNs4COsXL", /** * Using twikoo */ // type: "twikoo", // envId: "https://twikoo.ccknbc.vercel.app", /** * Using Waline */ type: "waline", serverURL: "https://rodert-java-pub-blog-cq4tgfqik-rodert.vercel.app", dark: "auto",//自适应深色模式 meta: ['nick', 'mail', 'link'], login: "force", }, mdEnhance: { enableAll: true, presentation: { plugins: ["highlight", "math", "search", "notes", "zoom"], }, }, }, });
导航栏
这里我是一般都会定制使用
import { defineNavbarConfig } from "vuepress-theme-hope"; export const javapub = defineNavbarConfig([ "/", "/home", { text: "使用指南", icon: "creative", link: "/guide/" }, { text: "练手项目", icon: "creative", link: "/project/" }, { text: "最少必要面试题", icon: "edit", prefix: "/willbe/", children: [ { text: "文章 1-n", icon: "edit", // prefix: "article/", children: [ { text: "10道不得不会的Java基础面试题", icon: "edit", link: "java-basics-interview-must" }, { text: "10道不得不会的Java容器面试题", icon: "edit", link: "java-container-interview-must" }, { text: "10道不得不会的Java并发基础面试题", icon: "edit", link: "java-concurrent-interview-must" }, { text: "10道不得不会的JVM面试题", icon: "edit", link: "jvm-interview-must" }, { text: "10道不得不会的MySQL基础面试题", icon: "edit", link: "mysql-interview-must" }, { text: "10道不得不会的ElasticSearch面试题", icon: "edit", link: "elasticsearch-interview-must" }, ], }, ], }, { text: "关于站长", icon: "note", link: "/me/", }, ]);
侧边栏
- 侧边栏我们一般需要自动生成一些东西
import { defineSidebarConfig } from "vuepress-theme-hope"; export const javapub = defineSidebarConfig({ "/": [ "", "home", "slide", { text: "最少必要面试题", icon: "creative", prefix: "willbe/", link: "willbe/", collapsable: true,//可折叠 children: "structure", }, { text: "小游戏", icon: "creative", prefix: "project/game/", link: "project/game/", collapsable: true, children: "structure", }, // { // text: "文章", // icon: "note", // prefix: "posts/", // children: [ // { // text: "文章 1-4", // icon: "note", // collapsable: true, // prefix: "article/", // children: ["article1", "article2", "article3", "article4"], // }, // { // text: "文章 5-12", // icon: "note", // children: [ // { // text: "文章 5-8", // icon: "note", // collapsable: true, // prefix: "article/", // children: ["article5", "article6", "article7", "article8"], // }, // { // text: "文章 9-12", // icon: "note", // children: ["article9", "article10", "article11", "article12"], // }, // ], // }, // ], // }, ], });
文章目录
图标
{ text: "小游戏", icon: "creative",//图标 prefix: "project/game/", link: "project/game/", collapsable: true, children: "structure", },
