你好啊，我是大阳。一个撸码近十年的程序员。
不知道你是否有这样的职场困惑：职场三年没有任何进步；学了很多，毛用没有；学了，过了一年全都忘记了，更不知道怎么把已经学到的知识迁移到其他领域或者行业。
也就是搬砖多年，一直都没有在自己的专业上建立完备的知识体系。
时间和知识的碎片化、工作996、职场pua都在阻止我们系统化地学习、更别说沉淀为知识体系啦。
为了能够对抗这些外部因素，我建议你写博客。强制输出倒逼输入、随时记录学习历程夯实脚步、不断实践形成技能树。
而作为一个程序员，形成个人知识体系，对抗危机和忧虑，可以使用下面的方法：
- 建立自己的技能树
- 技术分享
- 技术博客
- 建立自己的代码库
- 开源项目贡献
tixi.png
下面我们来使用VuePress来搭建一个博客系统。我这里使用的是vuepress社区主题vuepress-theme-hope（一款集成了众多插件的vuepress主题）。
## vuepress是如何工作的？
事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby。
vuepress 一些特性
- 为技术文档而优化的内置Markdown拓展
- 在Markdown文件中使用Vue组件的能力
- Vue驱动的自定义主题系统
- 自动生成Service Worker(支持PWA)
- Google Analytics集成
- 基于Git的"最后更新时间"
- 多语言支持
- 响应式布局
- 天然的SEO能力，对比Docsify这种前端渲染HTML要好很多
1. 安装
npm init vuepress-theme-hope@next docs
2. 配置
根据提示进行配置,可以启动自带demo
3. 配置vuepress工作目录
主配置文件config.ts
import { defineHopeConfig } from "vuepress-theme-hope";
import themeConfig from "./themeConfig";
export default defineHopeConfig({
port: 9927,
title: "大阳说",
description: "一个程序员的持续进化",
dest: "./dist",
head: [
// 添加百度统计
["script", {},
`var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?906138b9aada58204bf5d1a51d54abc9";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();`
],["link",{
rel: "stylesheet",
href: "/fonticon.css",
},
],
],
locales: {
"/": {
lang: "zh-CN"
},
},
themeConfig,
});
主题配置：
import { defineThemeConfig } from "vuepress-theme-hope";
import navbar from "./navbar";
import sidebar from "./sidebar";
export default defineThemeConfig({
themeColor: false,
fullscreen: false,
darkmode: "switch",
locales: {
"/": {
lang: "zh",
},
},
hostname: "https://dayangshuo.cn",
author: {
name: "大阳",
url: "https://dayangshuo.cn",
},
iconPrefix: "iconfont icon-",
logo: "/dayang.jpg",
repo: "https://github.com/dayang9927",
docsDir: "demo/src",
// navbar
navbar: navbar,
// sidebar
sidebar: false,
footer: "备案",
displayFooter: true,
pure: true,
pageInfo: ["Author", "Original", "Date", "Category", "Tag", "ReadingTime"],
blog: {
description: "一个程序员的持续进化",
intro: "/intro.html",
medias: {
Email: "dayang9927@163.com",
GitHub: "https://github.com/dayang9927",
Zhihu: "https://www.zhihu.com/people/da-yang-12-48",
},
},
encrypt: {
config: {
"/guide/encrypt.html": ["dayangshuo.cn"],
},
},
plugins: {
search: {
locales: {
"/": {
placeholder: "搜索",
},
},
},
blog: {
autoExcerpt: true,
},
// 你也可以使用 Waline
comment: {
type: "giscus",
repo: "vuepress-theme-hope/giscus-discussions",
repoId: "R_kgDOG_Pt2A",
category: "Announcements",
categoryId: "DIC_kwDOG_Pt2M4COD69",
},
mdEnhance: {
enableAll: true,
presentation: {
plugins: ["highlight", "math", "search", "notes", "zoom"],
},
},
},
});
palette.scss
$themeColor: #3498DB;
$sidebarWidth: 20rem;
$sidebarMobileWidth: 16rem;
.navbar .nav-item > .nav-link::after {
background-color: #3498DB;
}
