css
(共3篇)
搜索到
3
篇与
css
的结果
-
『原创』『教程』给自己博客的侧栏增加社交信息，方便业务（PY）联系 前言前不久突发奇想，录了一个视频然后留了自己的博客，却发现博客却没有链接回去的方式，所以就写了一个社交信息的侧栏模块然后有小伙伴看到了，专门留言让我出个教程，当时答应的好好的，可是一连鸽了好几天，今天进入留言板看到许诺的话，不禁老脸一红，差点忘了这茬了 ::(狂汗) 成果展示博客的侧栏增加社交信息2.0 这个模块适合任何主题及程序，只需要根据自己的主题或者程序进行改进就行我这里演示的是我正在使用的Joe主题，是一款轻量、开源的主题{tabs}{tabs-pane label="PC展示"}{/tabs-pane}{tabs-pane label="PE展示"}{/tabs-pane}{/tabs}教程开始一、添加PC端打开 Joe/public/aside.php 文件，然后在想要增加的位置添加以下代码{tabs}{tabs-pane label="代码"}隐藏内容，请前往内页查看详情{/tabs-pane}{tabs-pane label="位置"}{/tabs-pane}{/tabs}二、添加PE端打开 Joe/public/header.php 文件，然后在想要增加的位置添加上面PC的代码PE端的代码和上面的一样，只需要将 <section class="top-social"> 换成 <section class="top-social pe-social"> 三、添加后台直接在 Joe/functions.php 添加以下代码（当然，如果看过我之前的文章，也可以放在 Joe/public/custom.php 里面）// 侧栏社交信息开关 $SocialSwitch = new Typecho_Widget_Helper_Form_Element_Select( 'SocialSwitch', array( 'off' => '关闭（默认）', 'on' => '开启PC社交信息', 'on1' => '开启PE社交信息', 'on2' => '同时开启PC与PE社交信息', ), 'off', '是否启用侧栏社交信息', '介绍：开启后，侧栏展示社交信息功能（必须填写下面的侧栏社交信息）' ); $SocialSwitch->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialSwitch->multiMode()); //侧栏社交信息 $SocialInfo = new Typecho_Widget_Helper_Form_Element_Textarea( 'SocialInfo', NULL, NULL, '侧栏社交信息', '介绍：用于设置侧栏社交信息 <br /> 格式：你的QQ号 || 你的微信二维码链接 || 你的B站ID || 你的微博ID<br /> 例如：123456 || https://www.a.con/a.png || 13503064 || 3125196513 ' ); $SocialInfo->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialInfo);然后你网站后台主题就会出现这样两项，根据相应的格式把你的信息填进去就行了四、添加显示样式在 Joe/assets/css/joe.global.min.css 里添加以下样式我这里的样式是已经压缩了的，如果想要自己修改，只需要在代码编辑器里格式化以下就行了.top-social{position:relative;padding:10px 0;width:250px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.top-social li{width:50px;text-align:center;padding:5px 0px}.top-social li img{height:25px}.top-social .wechat{position:relative}.top-social .wechat .wechatInner{display:none;position:absolute;box-shadow:0px 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-175px;left:-45px;transform:translate3d(0, 16px, 0);width:140px;height:140px}.top-social .wechat .wechatInner::before{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;display:inline-block;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:#fff;filter:drop-shadow(0px 4px 2px var(--theme))}.top-social .wechat .wechatInner img{border-radius:var(--radius-wrap);width:140px;height:auto;padding:0;background:none}.top-social .wechat:hover .wechatInner{display:block}.pe-social{width:100%}结语教程到此就结束了，其实还是很简单的不过我又想把这个模块做成填写ico图片链接和跳转链接的自定义模块，就可以自由添加更多的社交信息但是那样只能舍弃微信那个移入弹窗的效果，所以很难取舍呀{timeline}{timeline-item color="#19be6b"}2022.3.16 在这里挖一个坑吧：利用JS选择对应的元素，实现微信的弹窗效果（令人头秃 :@(哭泣) ）{/timeline-item}{timeline-item color="#ed4014"}2022.3.19 Flag已实现，请移步 侧栏社交信息2.0 {/timeline-item}{/timeline}
-
『原创』『代码』为你的博客添加悬浮打赏按钮（按钮切换） 前言博客搭建已经有一段时间了，文章也写了不少了（虽然有些是扒的:@(狂汗)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 分享了他和他女朋友的甜蜜日常。然后注意到了他网站侧栏的小部件，有一个他和他女朋友恋爱的计时模块，很感兴趣我刚好也想给自己女朋友制作一点小浪漫，所以就着手把他分享的代码搬了过来，做了一些优化紧急修复刚测试时发现夜间模式下，会直接透明显示，没有浮块显示我估计是主题作者忘记给自定义模块设置背景色了，所以显示很不协调，就像这样所以我又调用了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 分享的代码。代码下载
