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

博主： 2024
发布时间：2024 年 03 月 28 日
269 次浏览
2 条评论
3659字数
分类：博客

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

回顾自己之前写的那个主题，不管是写还是查都不怎么方便，最终下定决心重写一个主题；以 “方便记、方便查、简约”作为设计核心；
<h2 id="h21">开源地址</h2>
Github：<a href="https://github.com/friend-nicen/theme-document" target="_blank" rel="noopener">https://github.com/friend-nicen/theme-document</a>

Gitee：<a href="https://gitee.com/friend-nicen/theme-document" target="_blank" rel="noopener">https://gitee.com/friend-nicen/theme-document</a>
<h2>2023-01-02更新</h2>
<ol>
 	<li>后台主题设置新增调用媒体库设置banner和logo</li>
 	<li>新增文章特色图片位置切换（左或者右侧显示）</li>
 	<li>新增站内跳转时，记住正在浏览的动态栏目</li>
 	<li>文章列表小工具新增【热门文章】，按照阅读量进行排序展示</li>
 	<li>修复调色板无法关闭的问题</li>
 	<li>更新首页banner小工具的样式，新增移动端是否显示banner的选项</li>
 	<li>首页和文章页从统一侧边栏，拆分成两个侧边栏，可在小工具页面进行设置</li>
 	<li>新增最新评论小工具</li>
 	<li>文章内容标题样式优化</li>
 	<li>新增Cravatar镜像服务器（wordpress头像）</li>
 	<li>修改一堆小BUG（不记得了）</li>
</ol>
<div class="custom-container success">
<div class="content">目前只进行小部分更新，没有大动作，确实空闲时间不够，慢慢来吧。。。</div>
</div>
<h2 id="h23">2022-10-25更新</h2>
<h3 id="h31">1.经典编辑器新增表格插件（Tinymce自身的table插件）</h3>
<table border="1">
<tbody>
<tr>
<td>表格列</td>
<td>表格列</td>
<td>表格列</td>
</tr>
<tr>
<td>表格列</td>
<td>表格列</td>
<td>表格列</td>
</tr>
<tr>
<td>表格列</td>
<td>表格列</td>
<td>表格列</td>
</tr>
</tbody>
</table>
<h3 id="h32">2.新增快捷下划线</h3>
<u>这是下划线，这是下划线，这是下划线</u>
<h2>2022-10-11更新</h2>
更新到2.0版本，风格不变，代码差不多都重构优化了一下，新增了很多实用的功能，后台截图如下（点击图片放大查看），时间有限其它的就不叙述了：
<div class="container-image">

<img class="aligncenter size-full wp-image-10131" src="https://www.xnwmw.cn/usr/uploads/2024/03/1j3nv.png" width="1080" height="439" alt="WordPress免费主题：Document，让阅读变得更加方便-1" title="WordPress免费主题：Document，让阅读变得更加方便-1"  style="">
<div class="image-info">导航栏设置</div>
</div>
&nbsp;
<h2 id="h25">安装主题</h2>
直接将整个Github仓库下载，然后上传到wordpress的/wp-content/themes目录，然后在后台启用主题即可。启用后通过后台左侧菜单【主题选项】进行相关配置 。

安装完了肯定跟 <a href="https://nicen.cm/" target="_blank" rel="noopener">nicen.cn</a>是不一样的，你需要进行如下的一些配置。
<div class="custom-container success">
<div class="title">关于主题</div>
<div class="content">大部分代码都有注释，作为学习wordpress主题开发学习的主题模板应该是很OK的</div>
</div>
<h2 id="h26">安装之后</h2>
主题默认启用经典文章编辑器、经典小部件编辑器，同时对经典文章编辑器进行了增强。

主题对JS、CSS全局进行了压缩，同时在主题内提供了未压缩的源文件。
<h3 id="h33">1.关于文章目录</h3>
文章目录由后端生成，默认读取【h1】、【h2】、【h3】元标签（编辑器内的小插件可直接插入）。主题已对经典编辑器进行插件增强，请自行体验哈。
<h3 id="h34">2.主题后台修改基本信息</h3>
主题后台可以自定义如下内容：
<ol>
 	<li>博客副标题</li>
 	<li>博客页面关键字</li>
 	<li>博客页面描述</li>
 	<li>博客logo链接</li>
 	<li>留言板链接</li>
 	<li>文章聚合链接</li>
 	<li>赞赏码</li>
 	<li>百度站长推送Token</li>
 	<li>ICP备案号</li>
 	<li>Gravatar镜像服务器</li>
 	<li>页脚附加代码</li>
</ol>
<h3 id="h35">3.新增页面模板</h3>
主题具有 文章聚合、留言两个文章模板，在后台添加页面时选择对应模板发布后，可将导航栏内的文章聚合、留言页面链接修改为你创建的链接。
<ol>
 	<li>新建页面</li>
 	<li>选择留言板或者文字聚合模板</li>
 	<li>发布</li>
 	<li>复制链接，</li>
 	<li>修改主题选项为这俩页面</li>
</ol>
<h3 id="h36">4.顶部菜单</h3>
主题具有顶部文章分类、快速阅读两个菜单，文章分类用于展示文章类别，快速阅读用于添加常用的一些链接，快速访问。
<ol>
 	<li>新建菜单</li>
 	<li>添加菜单项</li>
 	<li>发布到顶部菜单</li>
</ol>
<h3 id="h37">5.小部件、侧边栏</h3>
主题具有文章信息、作者信息、最新文章、最近更新 四个小部件（小部件自带配置，可在添加的时候填写），添加后默认在文章页面的右侧边栏显示。
<ol>
 	<li>关闭之前主题自带的小工具</li>
 	<li>拖入document主题的小部件</li>
 	<li>保存修改</li>
 	<li>不保存的话，会显示之前主题的小部件导致样式错乱</li>
</ol>
<h3 id="h38">6.邮箱SMTP配置</h3>
wordpress自带的邮件发送服务不太友好，你可以在主题选项开启主题自带的邮件服务，使用自己的邮箱服务
<ol>
 	<li>开启后，新评论通知站长</li>
 	<li>评论回复通知被回复评论的用户</li>
 	<li>评论审核通知通知发布评论的用户</li>
</ol>
<h2 id="h27">2022-06-03</h2>
端午节，在style.css里敲下了第一段代码，描述主题。?然后初步确定主要需要具备的一些功能：
<div class="code-toolbar">
<pre class="line-numbers language-javascript" tabindex="0"><code class="language-javascript"><span class="token comment">/*
  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: 文档,自适应,主题切换,阅读进度跟随
*/</span>
</code></pre>
<div class="toolbar">
<div class="toolbar-item"></div>
</div>
</div>
<h3 id="h39">1.文章目录导航</h3>
能够根据文章内容自动生成文章目录，虽然这个前端实现比较方便，但是考虑到需要seo所以直接在后端生成；

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

文章目录最小高度为屏幕的一半，悬浮在文章左侧；
<h3 id="h310">2. 黑夜、白天阅读模式切换、主题色切换</h3>
支持黑夜、白天阅读模式，主题色切换，悬浮在屏幕右下角，附带一个屏幕滚动进度；
<h3 id="h311">3. 主题前端元素</h3>
<ol>
 	<li>代码高亮</li>
 	<li>代码块一键复制
<div class="code-toolbar">
<pre class="line-numbers language-javascript" tabindex="0"><code class="language-javascript"><span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">compiler</span><span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src/compiler'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></code></pre>
<div class="toolbar">
<div class="toolbar-item"></div>
</div>
</div></li>
 	<li>成功文字块、失败文字块、警告文字块
<div class="custom-container success">
<div class="title">成功文字块</div>
<div class="content">这是成功文字块</div>
</div>
<div class="custom-container alert">
<div class="title">警告文字块</div>
<div class="content">这是警告文字块</div>
</div>
<div class="custom-container error">
<div class="title">失败文字块</div>
<div class="content">这是失败文字块</div>
</div></li>
 	<li>文字标记   <code class="code">this is &lt;code&gt;</code></li>
 	<li>图片灯箱
<div class="container-image">

<img class="aligncenter size-full wp-image-10133" src="https://www.xnwmw.cn/usr/uploads/2024/03/c5ob7.jpeg" width="600" height="277" alt="WordPress免费主题：Document，让阅读变得更加方便-4" title="WordPress免费主题：Document，让阅读变得更加方便-4"  style="">
<div class="image-info">图片灯箱</div>
</div></li>
 	<li>一级、二级、三级标题</li>
 	<li>作者信息卡片</li>
 	<li>文章信息卡片</li>
 	<li>评论区</li>
 	<li>最新文章</li>
 	<li>文章导航</li>
 	<li>文章底部赞赏</li>
 	<li>站点底部信息</li>
 	<li>导航栏菜单</li>
 	<li>导航栏搜索</li>
 	<li>上一篇、下一篇文章</li>
 	<li>一键回到顶部</li>
 	<li>主题色、阅读模式切换</li>
 	<li>文章点赞、踩</li>
 	<li>文章浏览、评论、发布时间、作者信息显示</li>
</ol>
<h3 id="h312">4. 主题前端优化</h3>
<ol>
 	<li>文章页右边栏正常高度时，跟随文章滚动，滚动高度超出侧边栏高度时自动悬浮，保持右边侧边栏始终存在元素，不会空白；</li>
 	<li>访问首页时显示自定义的站点描述，文章页时自动截取文章内容作为网页描述；</li>
 	<li>优化Gavatar头像，改为国内镜像服务器；</li>
</ol>
<h3 id="h313">5. 主题后端优化</h3>
<ol>
 	<li>自动切换到经典编辑器。</li>
 	<li>去除后台加载的无用代码。</li>
 	<li>增加后台设置，可设置主题的基本信息：关键词、主题描述、作者信息等；</li>
 	<li>增加编辑器插件：代码高亮、一级、二级、三级标题、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记</li>
 	<li>新增元标签：一级、二级、三级标题、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记</li>
 	<li>自定义顶部菜单</li>
 	<li>404页面</li>
 	<li>搜索空结果页面</li>
 	<li>文章密码权限控制</li>
</ol>
<h2 id="h28">20220617更新</h2>
<ol>
 	<li>修复窗口大小改变时，固定状态下的左右侧边栏位置没有同步变动，导致样式错乱的问题；</li>
</ol>
<h2 id="h29">20220628更新</h2>
<ol>
 	<li>新增文章归档页面模板，新建页面时可选。</li>
 	<li>新增百度站长一键提交URL功能。</li>
 	<li>新增移动端、平板页面自适应。</li>
</ol>
<h2 id="h210">20220701更新</h2>
<ol>
 	<li>压缩css、js，源文件分别保存在同级目录，css源文件为scss文件。</li>
 	<li>修复已知的一些UI样式问题。</li>
</ol>
<h2 id="h211">20220709更新</h2>
<ol>
 	<li>重构侧边栏，拆分成四个可自定义的小部件。</li>
 	<li>增加文章顶部的面包屑导航。</li>
 	<li>修复因为QQ、微信浏览器不支持16进制透明颜色导致阴影失效的BUG。</li>
</ol>
<h2 id="h212">20220710更新</h2>
<ol>
 	<li>修改了Github仓库地址</li>
 	<li>新增自定义Smtp邮件发送功能，开启后用户评论、回复时自动会发送邮件通知。</li>
</ol>
<h2 id="h213">20220724更新</h2>
<ol>
 	<li>首页变成两栏显示</li>
 	<li>优化了大屏和小屏显示的字体大小</li>
 	<li>调整了移动端的UI样式</li>
 	<li>下滑阅读时自动隐藏导航栏，上滑时自动显示。</li>
 	<li>修复主题logo无法修改的问题（由于未register注册该选项导致）</li>
</ol>
<h2 id="h214">20220725更新</h2>
<ol dir="auto">
 	<li>新增主题选项：设置首页显示单、双栏</li>
</ol>
</div>
<div class="article-footer"></div>
<div>转载地址:<span class="external-link"><a class="no-external-link" href="https://nicen.cn/1552.html#h39" target="_blank"><i data-feather="external-link"></i>WordPress免费主题：Document，让阅读变得更加方便－Wordpress－友人a的笔记丶 (nicen.cn)</a></span></div>

最后修改：2025 年 03 月 04 日

如果觉得我的文章对你有用，请随意赞赏

2 条评论

荒
November 1st, 2024 at 09:35 pm

换了，很多功能无法自定义，比如段代码添加。但凡有问题作者都说没问题让用户检查html代码，我尼玛我就写个博客和代码有什么关系。

回复
1. 2024
  December 24th, 2024 at 10:46 pm
  
  @荒
  
  这个主题不行就换个主题试试……如果不会的话，还是花钱买个安心……
  
  回复