继上一篇文章 我的网站正式上线了 ，next
先看效果
前言
经过众多个主题的选择，终于选择了优雅的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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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",
},
