登 录
注册
Search
标签搜索
技术教程
typecho
JavaScript
成长日记
Joe主题
Typecho主题
前端学习
网站搭建
typecho函数
影视分享
情感
css
帮助文档
虚拟机
服务器
typecho编辑器
插件
Linux
typecho插件
Windows
Brains - 灵感乌托邦
累计撰写
81
篇文章
累计收到
4,299
条评论
文章首页
分类栏目
技术教程
Typecho
程序代码
学习笔记
Web前端
CSS
JavaScript
其他文章
生活
独立页面
胡言乱语
生活吐槽
友情链接
网站统计
关于博主
自建图床
自建网盘
博主推荐
灵感宝物库
灵感图床库
Code-Server
在线工具箱
TypechoDoc
在线转换
灵感导航页
登录
丨
注册
社交信息
(共
1
篇)
搜索到
1
篇与
社交信息
的结果
『原创』『教程』博客的侧栏增加社交信息2.0
前言因为之前出了一个给侧栏添加社交信息的模块,但是只能固定设置QQ、微信、B站、微博这四个联系方式所以当时就想着能不能做一个无限添加信息的模块,就立了一个Flag,然后在3天之后才实现了这个功能(主要是懒,一直不想写)成果展示如图提示,可以无限添加,5个为一行,并且自动均匀分布教程开始一、添加PC端打开 Joe/public/aside.php 文件,然后在想要增加的位置添加以下代码隐藏内容,请前往内页查看详情二、添加PE端打开 Joe/public/header.php 文件,然后在想要增加的位置添加上面PC的代码PE端的代码和上面的一样,只需要将 <section class="top-social"> 换成 <section class="top-social pe-social"> 三、添加后台请参考第一版给自己博客的侧栏增加社交信息1.0 将其中的描述修改一下就行了四、添加样式同样参考上一版的样式就行,可以自己再优化一下这里放出我的样式.top-social { position: relative; padding: 5px 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); li { width: 50px; text-align: center; padding: 5px 0px; position: relative; img { height: 32px; } .WeChatInner { display: none; position: absolute; box-shadow: 0px 1px 4px 2px var(--theme); border-radius: var(--radius-wrap); transition: 0.7s all ease; background: var(--background); -webkit-transition: 0.7s all ease; top: -175px; left: -50px; transform: translate3d(0, 16px, 0); width: 150px; height: 150px; z-index: 2; &::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: var(--background); filter: drop-shadow(0px 4px 2px var(--theme)); } img { border-radius: 2px; width: 140px; height: auto; margin: 5px; background: none; } } &:hover .WeChatInner { display: block; } } } .pe-social { width: 100%; }五、添加JS(最重要)可以直接在 Joe/assets/js/joe.global.min.js 最后添加也可以在自定义js文件内添加,当然如果是自定义,一定要在 Joe/public/include.php 里引入你的js文件添加以下代码隐藏内容,请前往内页查看详情结语这里取了一个巧,给div设置了href属性,但是按照html规范这是不被提倡的不过我这里为了获得弹出二维码的功能,把微信的a标签变成了div来达到微信图标不可点击的效果一点拙劣的技巧,不建议做项目使用
2022年04月20日
18,397 阅读
111 评论
29 点赞
2022-04-20