侧边栏壁纸
    • 累计撰写 142 篇文章
    • 累计收到 195 条评论
    博客的侧栏增加社交信息
    2022-08-13  61 阅读 5 评论 2 点赞

    博客的侧栏增加社交信息

    奉天
    2022-08-13 / 5 评论 / 61 阅读 / 检测收录中......
    温馨提示:
    本文最后更新于2022年08月13日,已超过112天没有更新,若内容或图片失效,请留言反馈。
    前言:这个模块适合任何主题及程序,只需要根据自己的主题或者程序进行改进就行
    我这里演示的是我正在使用的Joe主题,是一款轻量、开源的主题

    截图展示

    教程

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


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

    三、添加后台控制
      其他模板直接在 functions.php 添加以下代码
      Joe模板可以放在 Joe/public/custom.php 里面


    四、添加样式CSS
    Joe/assets/css/joe.global.min.css 里添加以下样式

    .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

    教程结束

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

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

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

    JS源文件

    价格: 1.00 元
    温馨提示:登录 用户付款后可永久阅读隐藏的内容。 付费可读
    2

    海报

    正在生成.....

    评论 (5)

    QQ
    昵称
    邮箱
    取消
    1. 头像
      pony
      桂林 ·Windows 10 · Google Chrome
      沙发

      69291398

      回复 删除 垃圾
    2. 头像
      pony
      桂林 ·Windows 10 · Google Chrome
      板凳

      8575345757454

      回复 删除 垃圾
    3. 头像
      社会的大爷!
      桂林 ·iPhone · Safari
      地毯

      黑社会死掉

      回复 删除 垃圾
    4. 头像
      爆炒板蓝根
      昆明 ·Windows 7 · Google Chrome
      第4楼

      66666666

      回复 删除 垃圾
    5. 头像
      Lshow
      福州 ·Windows X64 · QQ Browser
      第5楼

      6666666

      回复 删除 垃圾