『原创』『教程』给自己博客的侧栏增加社交信息,方便业务(PY)联系
Brains - 灵感乌托邦

『原创』『教程』给自己博客的侧栏增加社交信息,方便业务(PY)联系

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

前言

前不久突发奇想,录了一个视频然后留了自己的博客,却发现博客却没有链接回去的方式,所以就写了一个社交信息的侧栏模块

然后有小伙伴看到了,专门留言让我出个教程,当时答应的好好的,可是一连鸽了好几天,今天进入留言板看到许诺的话,不禁老脸一红,差点忘了这茬了 表情

l0thn4pd.png

成果展示

博客的侧栏增加社交信息2.0

这个模块适合任何主题及程序,只需要根据自己的主题或者程序进行改进就行

我这里演示的是我正在使用的Joe主题,是一款轻量、开源的主题

教程开始

一、添加PC端

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

二、添加PE端

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

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

l0ti1w9z.png

三、添加后台

直接在 Joe/functions.php 添加以下代码

(当然,如果看过我之前的文章,也可以放在 Joe/public/custom.php 里面)

// 侧栏社交信息开关
$SocialSwitch = new Typecho_Widget_Helper_Form_Element_Select(
    'SocialSwitch',
    array(
        'off' => '关闭(默认)',
        'on' => '开启PC社交信息',
        'on1' => '开启PE社交信息',
        'on2' => '同时开启PC与PE社交信息',
    ),
    'off',
    '是否启用侧栏社交信息',
    '介绍:开启后,侧栏展示社交信息功能(必须填写下面的侧栏社交信息)'
);
$SocialSwitch->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other
$form->addInput($SocialSwitch->multiMode());

//侧栏社交信息
$SocialInfo = new Typecho_Widget_Helper_Form_Element_Textarea(
    'SocialInfo',
    NULL,
    NULL,
    '侧栏社交信息',
    '介绍:用于设置侧栏社交信息 <br />
         格式:你的QQ号 || 你的微信二维码链接 || 你的B站ID || 你的微博ID<br />
         例如:123456 || https://www.a.con/a.png || 13503064 || 3125196513 '
);
$SocialInfo->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other
$form->addInput($SocialInfo);

然后你网站后台主题就会出现这样两项,根据相应的格式把你的信息填进去就行了

l0tibx56.png

四、添加显示样式

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

我这里的样式是已经压缩了的,如果想要自己修改,只需要在代码编辑器里格式化以下就行了

.top-social{position:relative;padding:10px 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)}.top-social li{width:50px;text-align:center;padding:5px 0px}.top-social li img{height:25px}.top-social .wechat{position:relative}.top-social .wechat .wechatInner{display:none;position:absolute;box-shadow:0px 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-175px;left:-45px;transform:translate3d(0, 16px, 0);width:140px;height:140px}.top-social .wechat .wechatInner::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:#fff;filter:drop-shadow(0px 4px 2px var(--theme))}.top-social .wechat .wechatInner img{border-radius:var(--radius-wrap);width:140px;height:auto;padding:0;background:none}.top-social .wechat:hover .wechatInner{display:block}.pe-social{width:100%}

结语

教程到此就结束了,其实还是很简单的

不过我又想把这个模块做成填写ico图片链接和跳转链接的自定义模块,就可以自由添加更多的社交信息

但是那样只能舍弃微信那个移入弹窗的效果,所以很难取舍呀

13
打赏
gzh

评论 (38)

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

    也许我们都没有长大,只是世界变小了。

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

    区区一只趴在地上的蝼蚁,谁允许你抬起头的, 虫子就要有虫子的样子,低头伏地然后去死。

    回复 待审 垃圾
  3. 头像
    amiisk
    Windows 10 · QQ Browser

    一切真实与虚假,一切辉煌与破灭,只存后人之言,只存岁月之中。

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

    所谓“大家”,

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

    温柔解救不了这个世界

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

    我已经完全爱上沃玛(Warma)了!

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

    不管是怎样的回忆,都是我们活过的人生。

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

    虽然爱情主要取决于精神层面的东西,但是恋情却在相貌,气味等感官层面占的比例比较大。爱和恋并存,这才是所谓的恋爱啊

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

    从你站在桥上看我的 那一刻起你就是我的世界。

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

    人间四月芳菲尽,山寺桃花始盛开。

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

    过去的人真笨,过去的人真难。

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

    不要哀求,学会争取;若是如此,终有所获。

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

    弱水三千,我只取一瓢饮。

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

    一切都一成不变。

    回复 待审 垃圾
  15. 头像
    墨客
    Windows 10 · QQ Browser

    让我们不要把过去的不幸重压在我们的记忆上。

    回复 待审 垃圾
  16. 头像
    墨客
    Windows 10 · QQ Browser

    那些关于烦恼的事,我们呆到忘掉吧。

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

    QQ

    回复 待审 垃圾
  18. 头像
    xiojiujiu
    Windows 10 · Google Chrome

    多少事,从来急,天地转,光阴迫,一万年太久,只争朝夕。

    回复 待审 垃圾
  19. 头像
    ni
    Windows 10 · Google Chrome

    感谢

    回复 待审 垃圾
  20. 头像
    nb
    Android · Google Chrome

    对友谊来说,笑声确实是个不错的开端,同时也是最好的结局。

    回复 待审 垃圾
文章目录