Web前端
(共14篇)
搜索到
14
篇与
Web前端
的结果
-
『原创』『代码』为你的博客添加悬浮打赏按钮（按钮切换） > ## 前言 博客搭建已经有一段时间了，文章也写了不少了（虽然有些是扒的:@(狂汗)XD） 但是前几天有人发消息说觉得我的文章帮到他了，想要打赏，却没有打赏途径 找了很久，除了几个插件就没有我心仪的，但是插件又要下载上传，太麻烦了 XD 所以我就用自学的HTML写了一个悬浮打赏按钮，添加到文章点赞旁边，效果很好，我非常满意，所以现在分享出来 > ## 成果展示 {tabs} {tabs-pane label="第一版"}  {/tabs-pane} {tabs-pane label="第二版"}  {/tabs-pane} {tabs-pane label="切换版"}  {/tabs-pane} {/tabs} > ## 版本升级 当我把这个功能做好后，发给要打赏我的人时，Ta却说打赏不了，在微信中总是识别成支付宝的链接 :@(吐血倒地) 然后我自己试了一下，发现确实会识别错位，不知道是不是支付宝的二维码更要强一些，识别十次九次都是支付宝链接，打赏的人都不想给我打赏了，气死我了 :@(内伤) {dotted startColor="#ff6c6c" endColor="#1989fa"/} 然后我就想到了点击切换二维码，说干就干，首先我用css试了很久，发现光用css已经实现不了我的需求了 然后我就开始琢磨JS来实现，开始用了if语句来切换 `img` 的 `url` ，确实可以切换了，但是if语句只能对应一个按钮，如果别人不知道按钮可以切换，那就仅显示一个二维码 突然想到，既然用js了，那为什么不直接根据不同的 `input` 按钮给 `img` 赋值呢，然后我就写了三段赋值语句（学艺不精啊） :@(尴尬) 然后就实现了一个按钮切换一个二维码了 {dotted startColor="#ff6c6c" endColor="#1989fa"/} 再发给要打赏我的人，结果.... :@(无奈) 只打赏了0.01元 :@(扇耳光) > ## 代码分享 其实这个功能很简单，其实就是CSS的 `:hover` 来实现的 我使用的是Joe主题，所以我直接添加在点赞旁边，让它看看起来跟整个主题更协调 首先找到Joe主题目录中的点赞文件 `public/handle.php` 再在点赞按钮后添加以下代码 隐藏内容，请前往内页查看详情 添加到 `public/handle.php` 的倒数第二行  保存后，刷新网站，打赏按钮就出现了，试着把鼠标移上去看看效果吧！ > ## 切换版下载
-
『原创』『教程』给你的Typecho博客侧边栏加一个恋爱计时（修复夜间模式样式） > ## 前言 前几天在翻主页的时候，看到 [Nots](https://blog.n0ts.cn/) 分享了他和他女朋友的甜蜜日常。 然后注意到了他网站侧栏的小部件，有一个他和他女朋友恋爱的计时模块，很感兴趣 我刚好也想给自己女朋友制作一点小浪漫，所以就着手把他分享的代码搬了过来，做了一些优化 > ## 紧急修复 刚测试时发现夜间模式下，会直接透明显示，没有浮块显示 我估计是主题作者忘记给自定义模块设置背景色了，所以显示很不协调，就像这样  所以我又调用了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**](https://www.fuuuy.cn/archives/292.html) ，那就很简单了，直接在后台的主题设置里 登录你的网站后台，进入 **外观设置-网站外观-设置外观（必须使用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** 分享的代码。 > ## 代码下载
