社交信息
(共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来达到微信图标不可点击的效果一点拙劣的技巧，不建议做项目使用
