登 录
注册
Search
标签搜索
技术教程
typecho
JavaScript
成长日记
Joe主题
Typecho主题
前端学习
网站搭建
typecho函数
影视分享
情感
css
帮助文档
虚拟机
服务器
typecho编辑器
插件
Linux
typecho插件
Windows
Brains - 灵感乌托邦
累计撰写
81
篇文章
累计收到
4,291
条评论
文章首页
分类栏目
技术教程
Typecho
程序代码
学习笔记
Web前端
CSS
JavaScript
其他文章
生活
独立页面
胡言乱语
生活吐槽
友情链接
网站统计
关于博主
自建图床
自建网盘
博主推荐
灵感宝物库
灵感图床库
Code-Server
在线工具箱
TypechoDoc
在线转换
灵感导航页
登录
丨
注册
恋爱计时
(共
1
篇)
搜索到
1
篇与
恋爱计时
的结果
『原创』『教程』给你的Typecho博客侧边栏加一个恋爱计时(修复夜间模式样式)
前言前几天在翻主页的时候,看到 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 分享的代码。代码下载
2021年03月08日
33,474 阅读
170 评论
669 点赞
2021-03-08