魔改 Next 不完全教程教你玩转个性化博客

走进魔改 Next 的世界，开启个性化博客的奇妙之旅！

1. 打造时尚吸睛的博客封面

1.1 准备工作

• 更新 Next 至 6.3 版本。
• 熟悉 Yaml 和 Stylus 基础知识。
• 准备好自己喜欢的图片或视频作为封面。

1.2 修改样式文件

• 修改 style/cover.styl 文件。

• 增加或修改 #site-cover 样式，定义封面背景。
• 可调整背景颜色、图片或视频。
• 利用 Yaml 变量控制封面效果。

• 修改 layout/_macro/site-cover.swig 文件。

• 修改封面显示的条件，如仅在首页显示。

1.3 添加封面图片或视频

• 修改 _config.yml 文件。

• 增加 cover: 图片或视频地址。

• 修改 source/cover.jpg 文件。

• 用自己准备的图片替换原图。

2. 优化文章排版，提升阅读体验

2.1 调整文章字体和字号

• 修改 source/css/style.styl 文件。

• 增加或修改 body 样式，控制文章字体和字号。

2.2 优化代码块样式

• 修改 source/css/tomorrow.styl 文件。

• 增加或修改 .tomorrow-comment、.tomorrow-keyword 等样式，调整代码块颜色。

2.3 设置文章字数统计

• 修改 source/js/main.js 文件。

• 增加或修改 show_wordcount 函数，实现字数统计。

3. 自定义侧边栏，彰显个性风格

3.1 添加侧边栏小工具

• 修改 layout/_partial/sidebar.swig 文件。

• 添加侧边栏小工具代码，如标签云、最新文章等。

3.2 修改侧边栏样式

• 修改 source/css/style.styl 文件。

• 增加或修改 .sidebar 样式，调整侧边栏外观。

3.3 调整侧边栏宽度

• 修改 source/_config.yml 文件。

• 增加或修改 sidebar.width: 数值，控制侧边栏宽度。

4. 精心打磨文章细节，凸显博主功底

4.1 添加文章脚注

• 修改 layout/_macro/post/footnotes.swig 文件。

• 增加或修改脚注代码，实现文章脚注功能。

4.2 插入数学公式

• 安装 KaTeX 数学公式库。

• 在 Next 根目录运行 npm install katex。
• 在 source/js/main.js 文件中添加 KaTeX 代码。

4.3 创建文章目录

• 修改 layout/_partial/toc.swig 文件。

• 增加或修改目录代码，实现文章目录功能。

5. 优化博客性能，提升用户体验

5.1 启用静态化

• 修改 source/_config.yml 文件。

• 增加或修改 deploy.type: build，启用静态化。

5.2 压缩静态资源

• 安装 UglifyJS。

• 在 Next 根目录运行 npm install uglify-js。
• 在 package.json 文件中添加压缩任务代码。

5.3 优化图像

• 安装 ImageOptim。

• 在 Next 根目录运行 npm install imageoptim。
• 在 package.json 文件中添加图像优化任务代码。

魔改之旅至此接近尾声，期待你的博客焕然一新！