😁作为一个程序员，在日常的工作、生活、学习的过程中基本都有很多需要做笔记的地方；做笔记的主要目的之一是为了“温故而知新”，另一个则是为了在下一次遇到的时候，不需要再次耗费精力去找解决方法；

回顾自己之前写的那个主题，不管是写还是查都不怎么方便，最终下定决心重写一个主题；以 “方便记、方便查、简约”作为设计核心；

开源地址

Github：https://github.com/friend-nicen/theme-document

Gitee：https://gitee.com/friend-nicen/theme-document

插件推荐

Wp外部图片本地化插件：https://nicen.cn/2893.html

Wp用户行为回放插件：https://nicen.cn/7565.html 

安装主题

直接将整个Github仓库下载，然后上传到wordpress的/wp-content/themes目录，然后在后台启用主题即可。启用后通过后台左侧菜单【主题选项】进行相关配置 。

安装完了肯定跟 nicen.cn是不一样的，你需要进行如下的一些配置。

安装之后

主题默认启用经典文章编辑器、经典小部件编辑器，同时对经典文章编辑器进行了增强。

主题对JS、CSS全局进行了压缩，同时在主题内提供了未压缩的源文件。

1.关于文章目录

主题自带的文章目录解析模式有两种：

• 插件元标签：通过读取【h1】、【h2】、【h3】这些编辑器插件的元标签（编辑器内的小插件可直接插入）生成文章目录。
• HTMl标签：通过读取html中的H2、H3、H4标签生成文章目录（从seo的角度来说，一篇文章只能有一个H1标签，也就是文章标题，所以插件默认从H2开始读取）

编辑器插件元标签

设置文章目录解析模式：

文章目录相关配置

开启文章目录显示：

开启文章目录显示

2.主题后台修改基本信息

主题后台可以自定义如下内容：

1. 博客副标题
2. 博客页面关键字
3. 博客页面描述
4. 博客logo链接
5. 留言板链接
6. 文章聚合链接
7. 赞赏码
8. 百度站长推送Token
9. ICP备案号
10. Gravatar镜像服务器
11. 页脚附加代码

3.新增页面模板

主题具有 文章聚合、留言两个文章模板，在后台添加页面时选择对应模板发布后，可将导航栏内的文章聚合、留言页面链接修改为你创建的链接。

1. 新建页面
2. 选择留言板或者文字聚合模板
3. 发布
4. 复制链接，
5. 修改主题选项为这俩页面

4.顶部菜单

主题具有顶部文章分类、快速阅读两个菜单，文章分类用于展示文章类别，快速阅读用于添加常用的一些链接，快速访问。

1. 新建菜单
2. 添加菜单项
3. 发布到顶部菜单

菜单配置

5.小部件、侧边栏

主题具有文章信息、作者信息、最新文章、最近更新 四个小部件（小部件自带配置，可在添加的时候填写），添加后默认在文章页面的右侧边栏显示。

1. 关闭之前主题自带的小工具
2. 拖入document主题的小部件
3. 保存修改
4. 不保存的话，会显示之前主题的小部件导致样式错乱

侧边栏配置

6.邮箱SMTP配置

wordpress自带的邮件发送服务不太友好，你可以在主题选项开启主题自带的邮件服务，使用自己的邮箱服务

1. 开启后，新评论通知站长
2. 评论回复通知被回复评论的用户
3. 评论审核通知通知发布评论的用户

主题介绍

端午节，在style.css里敲下了第一段代码，描述主题。🤣然后初步确定主要需要具备的一些功能：

/*
  Theme Name: Document
  Theme URI: https://nicen.cn
  Author: 友人a丶
  Author URI: https://nicen.cn
  Description: 一个基于文档类型的博客主题，更加方便的记录、查询学习笔记
  Version: 1.0
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: Document
  Tags: 文档,自适应,主题切换,阅读进度跟随
*/

1.文章目录导航

能够根据文章内容自动生成文章目录，虽然这个前端实现比较方便，但是考虑到需要seo所以直接在后端生成；

文章目录导航需要自动跟随阅读进度，点击文章目录导致自动跳转到对应的内容；

文章目录最小高度为屏幕的一半，悬浮在文章左侧；

2. 黑夜、白天阅读模式切换、主题色切换

支持黑夜、白天阅读模式，主题色切换，悬浮在屏幕右下角，附带一个屏幕滚动进度；

3. 主题前端元素

1. 代码高亮
2. 代码块一键复制

   resolve: {
       alias: {
         compiler: resolve('src/compiler'),
   }
3. 成功文字块、失败文字块、警告文字块
   成功文字块

   这是成功文字块
   警告文字块

   这是警告文字块
   失败文字块

   这是失败文字块
4. 文字标记   this is <code>
5. 图片灯箱
   

   图片灯箱
6. 一级、二级、三级标题
7. 作者信息卡片
8. 文章信息卡片
9. 评论区
10. 最新文章
11. 文章导航
12. 文章底部赞赏
13. 站点底部信息
14. 导航栏菜单
15. 导航栏搜索
16. 上一篇、下一篇文章
17. 一键回到顶部
18. 主题色、阅读模式切换
19. 文章点赞、踩
20. 文章浏览、评论、发布时间、作者信息显示
21. 表格
    

    表格列	表格列	表格列
    表格列	表格列	表格列
    表格列	表格列	表格列

     

22. 下划线：这是下划线，这是下划线，这是下划线

4. 主题前端优化

1. 文章页右边栏正常高度时，跟随文章滚动，滚动高度超出侧边栏高度时自动悬浮，保持右边侧边栏始终存在元素，不会空白；
2. 访问首页时显示自定义的站点描述，文章页时自动截取文章内容作为网页描述；
3. 优化Gavatar头像，改为国内镜像服务器；

5. 主题后端优化

1. 自动切换到经典编辑器。
2. 去除后台加载的无用代码。
3. 增加后台设置，可设置主题的基本信息：关键词、主题描述、作者信息等；
4. 增加编辑器插件：代码高亮、一级、二级、三级标题、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记
5. 新增元标签：一级、二级、三级标题、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记
6. 自定义顶部菜单
7. 404页面
8. 搜索空结果页面
9. 文章密码权限控制

6.主题后台

基本设置

首页设置

页脚设置

导航栏设置