现在位置: 首页 / Wordpress / Wordpress / 正文

WordPress免费主题：Document，让阅读变得更加方便

  • 友人a丶
  • Wordpress
  • 2022-06-13
  • 19673热度
  • 217评论

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

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

开源地址

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

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

😁，加我微信【good7341】或机器人微信【nicen_friend】拉你进交流群！

插件推荐

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

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

安装主题

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

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

关于主题
大部分代码都有注释，作为学习wordpress主题开发学习的主题模板应该是很OK的

安装之后

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

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

1.关于文章目录

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

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

设置文章目录解析模式：

Wordpress免费主题：Document，让阅读变得更加方便
文章目录相关配置

开启文章目录显示：

Wordpress免费主题：Document，让阅读变得更加方便
开启文章目录显示
提示
没有解析到目录时，文章目录会默认隐藏

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. 发布到顶部菜单
Wordpress免费主题：Document，让阅读变得更加方便
菜单配置

5.小部件、侧边栏

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

  1. 关闭之前主题自带的小工具
  2. 拖入document主题的小部件
  3. 保存修改
  4. 不保存的话，会显示之前主题的小部件导致样式错乱
Wordpress免费主题：Document，让阅读变得更加方便
侧边栏配置

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. 图片灯箱
    Wordpress免费主题：Document，让阅读变得更加方便
    图片灯箱
  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.主题后台

Wordpress免费主题：Document，让阅读变得更加方便
基本设置

Wordpress免费主题：Document，让阅读变得更加方便
首页设置
Wordpress免费主题：Document，让阅读变得更加方便
页脚设置
Wordpress免费主题：Document，让阅读变得更加方便
导航栏设置

2024-11-19更新

  • 新增文章阅读目录可以展开/折叠
  • 新增文章目录顶部图标批量展开/折叠阅读目录
  • 新增图片懒加载

2024-11-16更新

  • 修复文章目录在html模式下跳转异常的问题

2024-08-31更新

2024-04-22更新

  • 修复动态分页时偶发重复加载的问题

2024-04-08更新

  • 修复文章目录在html模式下跳转异常的问题

2024-03-23更新

  • 修复主题接口和wordpress数据导出操作冲突的问题
  • 修复文章目录html解析模式无法正常点击跳转的问题
  • 修改文章推荐小工具内的匿名函数使用方法
  • 修复文章数量过多时，百度推送报错的问题，将百度站长工具链接推送调整为分批推送

2024-02-06更新

  • 新增可选文章目录解析模式（元标签 & HTML）
  • 优化文章字数统计
  • 优化部分样式

2023-11-07更新

  • 新增是否开启文章保留反斜杠的开关
  • 新增管理员访问带密码的文章时忽略密码直接访问
  • 针对历史遗留问题（踩了Wp时间函数的坑）优化时区校准开关
  • 新增几处功能说明的Tips

2023-10-23更新

  • 修复文章保存后反斜杠被当做转义符导致丢失的问题
  • 调整几处css
  • 新增时区校正

2023-01-07更新

  1. 新增文章推荐小工具
  2. 新增动态分页时，滚动到底部时自动加载（可设置是否开启）
  3. 新增开启/关闭显示Logo或标题的选项
  4. 新增支持修改站点部分功能默认的URL规则的功能。
  5. 新增文章底部版权信息、打赏按钮是否显示的选项。
  6. 新增自定义文章底部版权信息的功能，提供获取文章标题、固定链接、作者信息等标签
  7. 新增设置文章上/下一篇的相关文章的来源选项（所有文章和同栏目文章）

2023-01-02更新

  1. 后台主题设置新增调用媒体库设置banner和logo
  2. 新增文章特色图片位置切换（左或者右侧显示）
  3. 新增站内跳转时，记住正在浏览的动态栏目
  4. 文章列表小工具新增【热门文章】，按照阅读量进行排序展示
  5. 修复调色板无法关闭的问题
  6. 更新首页banner小工具的样式，新增移动端是否显示banner的选项
  7. 首页和文章页从统一侧边栏，拆分成两个侧边栏，可在小工具页面进行设置
  8. 新增最新评论小工具
  9. 文章内容标题样式优化
  10. 新增Cravatar镜像服务器（wordpress头像）
  11. 修改一堆小BUG（不记得了）
目前只进行小部分更新，没有大动作，确实空闲时间不够，慢慢来吧。。。

2022-10-25更新

  1. 编辑器新增表格插件
  2. 编辑器新增下划线插件

2022-10-11更新

  1. 更新到2.0版本，风格不变，代码差不多都重构优化了一下，新增了很多实用的功能，后台截图如下（点击图片放大查看），时间有限其它的就不叙述了：

2022-06-17更新

  1. 修复窗口大小改变时，固定状态下的左右侧边栏位置没有同步变动，导致样式错乱的问题；

2022-06-28更新

  1. 新增文章归档页面模板，新建页面时可选。
  2. 新增百度站长一键提交URL功能。
  3. 新增移动端、平板页面自适应。

2022-07-01更新

  1. 压缩css、js，源文件分别保存在同级目录，css源文件为scss文件。
  2. 修复已知的一些UI样式问题。

2022-07-09更新

  1. 重构侧边栏，拆分成四个可自定义的小部件。
  2. 增加文章顶部的面包屑导航。
  3. 修复因为QQ、微信浏览器不支持16进制透明颜色导致阴影失效的BUG。

2022-07-10更新

  1. 修改了Github仓库地址
  2. 新增自定义Smtp邮件发送功能，开启后用户评论、回复时自动会发送邮件通知。

2022-07-24更新

  1. 首页变成两栏显示
  2. 优化了大屏和小屏显示的字体大小
  3. 调整了移动端的UI样式
  4. 下滑阅读时自动隐藏导航栏，上滑时自动显示。
  5. 修复主题logo无法修改的问题（由于未register注册该选项导致）

2022-07-25更新

  1. 新增主题选项：设置首页显示单、双栏