前言

前几天在翻主页的时候，看到 Nots 分享了他和他女朋友的甜蜜日常。

然后注意到了他网站侧栏的小部件，有一个他和他女朋友恋爱的计时模块，很感兴趣

我刚好也想给自己女朋友制作一点小浪漫，所以就着手把他分享的代码搬了过来，做了一些优化

紧急修复

刚测试时发现夜间模式下，会直接透明显示，没有浮块显示

我估计是主题作者忘记给自定义模块设置背景色了，所以显示很不协调，就像这样

所以我又调用了Joe主题的CSS样式，让这个模块会根据日间模式和夜间模式改变背景颜色，达到和其他模块样式统一

顺便修改了这个模块的文字颜色，夜间模式下不会再是一片漆黑了（PE端同时修复）

成果展示

{tabs}
{tabs-pane label="PC端"}

{/tabs-pane}
{tabs-pane label="手机端"}

{/tabs-pane}
{/tabs}

实现方法

本教程仅适用于typecho且使用了Joe主题的小伙伴，其他主题或者博客的小伙伴请自行发挥你们的才能

{tabs}
{tabs-pane label="PC端"}

{callout color="#f0ad4e"}
PC端代码：（样式我已经根据Joe主题适配好了，不喜欢的自己修改）
{/callout}

{mtitle title="在文章最后下载"/}

如果是使用的 Joe for typecho ，那就很简单了，直接在后台的主题设置里

登录你的网站后台，进入 外观设置-网站外观-设置外观（必须使用Joe主题）-侧栏设置

找到 自定义侧边栏模块-PC

保存好后，再刷新自己的网站就可以看到了！
{/tabs-pane}
{tabs-pane label="PE端"}

{callout color="#ab74e4"}
PE端代码：（因为是后端代码，所以我就直接套用了Joe主题的样式）
{/callout}

{mtitle title="在文章最后下载"/}

手机端的侧栏要复杂一点，但你都进入我的博客了，那我肯定要手把手把你教会了:@(得意)

如果你懂一些 HTML，那就很容易能找到PE端的侧栏文件

PE端的样式配置在 Joe/public/header.php里

那我们直接在 header.php 添加代码就行了，找到PE端侧栏配置位置

然后找到想要加入的位置，可以加在作者信息下，也可以加在网站统计下

我是加在了作者信息下，可以更为直接显示，也更明显，主要是女朋友能够一眼就看到:@(得意)

当然这里添加的代码跟上面的是有一点区别的，我试了几次，发现同样的代码会出现PE端显示，而PC端文字不显示

测试了很多次，终于被我发现，原来是 JS 的 id 重复了，导致PHP后端的id占用了前端的id

而因为PE端的代码是直接加在源代码里的，所以导致PC端文字不显示了

因此我又对代码进行了优化，没错，从发现bug-测试bug-修改bug又磨了我一小时:@(喷血)

注意：因为是修改了后端代码，每次更新Joe的主题时都会被覆盖，所以每次更新主题后记得去 header.php 重新添加代码

希望Joe主题作者后期能够添加自定义PE侧栏的功能，或者不要更新太频繁 :@(扇耳光)
{/tabs-pane}
{/tabs}

结语

教程到此结束，祝各位早日找到心仪的另一半，幸福美满！

感谢 Nots 分享的代码。

代码下载