『原创』『教程』博客的侧栏增加社交信息2.0
Brains - 灵感乌托邦

『原创』『教程』博客的侧栏增加社交信息2.0

六六丶
2022-04-20 / 28 评论 / 2,056 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2022年08月05日,已超过51天没有更新,若内容或图片失效,请留言反馈。

前言

因为之前出了一个给侧栏添加社交信息的模块,但是只能固定设置QQ、微信、B站、微博这四个联系方式

所以当时就想着能不能做一个无限添加信息的模块,就立了一个Flag,然后在3天之后才实现了这个功能(主要是懒,一直不想写)

成果展示

l26z3p8r.png

如图提示,可以无限添加,5个为一行,并且自动均匀分布

l26z75lv.png

教程开始

一、添加PC端

打开 Joe/public/aside.php 文件,然后在想要增加的位置添加以下代码

二、添加PE端

打开 Joe/public/header.php 文件,然后在想要增加的位置添加上面PC的代码

PE端的代码和上面的一样,只需要将 <section class="top-social"> 换成 <section class="top-social pe-social">

l26zhyh2.png

三、添加后台

请参考第一版

给自己博客的侧栏增加社交信息1.0

将其中的描述修改一下就行了

l26zm6zp.png

四、添加样式

同样参考上一版的样式就行,可以自己再优化一下

这里放出我的样式

.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文件

l26zwga3.png

添加以下代码

结语

这里取了一个巧,给div设置了href属性,但是按照html规范这是不被提倡的

不过我这里为了获得弹出二维码的功能,把微信的a标签变成了div来达到微信图标不可点击的效果

一点拙劣的技巧,不建议做项目使用

16
打赏
gzh

评论 (28)

取消
  1. 头像
    chenmo
    Windows 10 · Google Chrome

    如果不能忠于自己的心,胜负又有什么价值呢?

    回复 待审 垃圾
  2. 头像
    66
    Android · Google Chrome

    “做到最牛”就是我所订下的每日标准,不管到哪儿都是。

    回复 待审 垃圾
  3. 头像
    萨血
    Windows 10 · Google Chrome

    如果你执意追寻着我的幻影,总有一天会被真正的我打败。

    回复 待审 垃圾
  4. 头像
    64676
    Android · Google Chrome

    生活就像海洋,只有意志坚强的人,才能到达彼岸。

    回复 待审 垃圾
  5. 头像
    64676
    Android · Google Chrome

    举世皆浊我独清,众人皆醉6我独醒。

    回复 待审 垃圾
  6. 头像
    64676
    Android · Google Chrome

    请记住,努力不是为了让别人更喜欢你,而是为了让你更喜欢你自己!

    回复 待审 垃圾
  7. 头像
    pengyu
    Windows 10 · Google Chrome

    所以,他们的还没结束。

    回复 待审 垃圾
  8. 头像
    Linux · Google Chrome

    渔舟唱晚,响穷彭蠡之滨;雁阵惊寒,声断衡阳之浦。

    回复 待审 垃圾
  9. 头像
    鹤川
    Android · UC Browser

    此身为剑所天成,身如钢铁,心似琉璃。

    回复 待审 垃圾
  10. 头像
    山东干啥
    Windows 10 · Google Chrome

    光明,制造瞎子。

    回复 待审 垃圾
  11. 头像
    有技术含量
    Android · Google Chrome

    宁为百夫长,胜作一书生。

    回复 待审 垃圾
  12. 头像
    无心v
    Windows 10 · Google Chrome

    一个人的思想等于一个人的素养。

    回复 待审 垃圾
  13. 头像
    奉天
    Windows 10 · Google Chrome

    正因为有忘也忘不了的回忆,才会变得坚强,这就是所谓的成长吧!

    回复 待审 垃圾
  14. 头像
    奉天
    Windows 10 · Google Chrome

    精神上,没有上进心的人,是笨蛋!

    回复 待审 垃圾
  15. 头像
    Android Oreo · Google Chrome

    这个人好弱啊,真的是我们的指挥使吗?

    回复 待审 垃圾
  16. 头像
    流年酱
    Windows 10 · Google Chrome

    从前种种,譬如昨日死;从后种种,譬如今日生

    回复 待审 垃圾
  17. 头像
    1111
    Windows 10 · Google Chrome

    时间可以治愈?如果时间也病了怎么办66666666666

    回复 待审 垃圾
  18. 头像
    shu
    Android Oreo · QQ Browser

    岁月永远年轻,我们慢慢老去,你会发现,童心未泯是一件值得骄傲的事情。

    回复 待审 垃圾
  19. 头像
    叶殇珂
    Windows 10 · Google Chrome

    只要还在人间,你就不会完全麻木。

    回复 待审 垃圾
  20. 头像
    111
    Windows 10 · Google Chrome

    有资格被称为英雄的,既不是仗剑之人,也不是疗伤止痛之人,而是能赌上自己性命的人。

    回复 待审 垃圾
文章目录