前言
因为之前出了一个给侧栏添加社交信息的模块,但是只能固定设置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">
三、添加后台
请参考第一版
将其中的描述修改一下就行了
四、添加样式
同样参考上一版的样式就行,可以自己再优化一下
这里放出我的样式
.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来达到微信图标不可点击的效果
一点拙劣的技巧,不建议做项目使用
请记住,努力不是为了让别人更喜欢你,而是为了让你更喜欢你自己!
所以,他们的还没结束。
渔舟唱晚,响穷彭蠡之滨;雁阵惊寒,声断衡阳之浦。
此身为剑所天成,身如钢铁,心似琉璃。
光明,制造瞎子。
宁为百夫长,胜作一书生。
一个人的思想等于一个人的素养。
正因为有忘也忘不了的回忆,才会变得坚强,这就是所谓的成长吧!
精神上,没有上进心的人,是笨蛋!
这个人好弱啊,真的是我们的指挥使吗?
从前种种,譬如昨日死;从后种种,譬如今日生
时间可以治愈?如果时间也病了怎么办66666666666
岁月永远年轻,我们慢慢老去,你会发现,童心未泯是一件值得骄傲的事情。
只要还在人间,你就不会完全麻木。
有资格被称为英雄的,既不是仗剑之人,也不是疗伤止痛之人,而是能赌上自己性命的人。
大佬,CSS不知道怎么回事成这样了

那双手那么温暖,呼唤如此真切。然而这颗心本不属于这里,终将远去
不行,微信那个二维码不弹出,鼠标放上去没反应,JS放进去了 引入和直接放在文件说明的那个地方都不行,郁闷了
失去的在夺回来就好了,不是吗?这么一来就没有人在伤心了。
幽深之林乃迷惘之林。美丽乃污秽,污秽即美丽。