套个盾

哥们没有代码基础😭……在写小组件的时候一直在查谷歌和求助AI。基本上把所有（我已知的）坑都踩了一遍。还好最后终于磕磕绊绊地写出来了。虽然说是contact me小组件，但实际上当时脑子里想的是follow me。不过都一样啦。

添加相关社交媒体的icon

找到放置icons.yml的文件夹。哥们用的Hexo主题是stellar，所以文件夹路径是node_modules/hexo-theme-stellar/_data/icons.yml。对于其他的Hexo主题，大概修改一下具体的主题文件夹就能找到了？我不确定（（（
在文件里另起一行，粘贴以下svg代码：

node_modules/hexo-theme-stellar/_data/icons.yml
1
2
3
weibo:logo: <svg fill="#FFFFFF" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M13.464 27.099c-5.302 0.521-9.885-1.875-10.229-5.359-0.344-3.479 3.677-6.729 8.984-7.255s9.885 1.87 10.229 5.354c0.349 3.469-3.677 6.734-8.979 7.255zM12.068 22.958c-0.516 0.823-1.609 1.177-2.438 0.802-0.818-0.37-1.057-1.323-0.542-2.125 0.505-0.792 1.568-1.146 2.391-0.797 0.828 0.349 1.094 1.292 0.589 2.12zM13.76 20.792c-0.188 0.313-0.599 0.469-0.917 0.333-0.318-0.12-0.422-0.479-0.24-0.781 0.188-0.302 0.583-0.458 0.896-0.318 0.318 0.12 0.422 0.479 0.24 0.802zM13.995 17.161c-2.526-0.656-5.375 0.604-6.474 2.828-1.115 2.271-0.036 4.786 2.51 5.609 2.646 0.854 5.76-0.453 6.844-2.901 1.068-2.391-0.266-4.859-2.88-5.536zM24.078 15.531c-0.458-0.141-0.76-0.24-0.542-0.818 0.5-1.302 0.563-2.406 0-3.208-1.042-1.479-3.885-1.401-7.151-0.036 0 0-1.021 0.438-0.76-0.365 0.5-1.62 0.422-2.964-0.359-3.745-1.786-1.781-6.495 0.063-10.516 4.109-3.005 3.026-4.75 6.229-4.75 8.995 0 5.307 6.797 8.526 13.448 8.526 8.714 0 14.516-5.068 14.516-9.094 0-2.427-2.063-3.802-3.885-4.375zM26.625 8.745c-1.026-1.146-2.547-1.583-3.948-1.286-0.583 0.12-0.943 0.682-0.823 1.245 0.12 0.557 0.682 0.922 1.245 0.802 0.682-0.141 1.422 0.057 1.922 0.62s0.62 1.302 0.422 1.964c-0.182 0.542 0.12 1.141 0.677 1.323 0.542 0.161 1.146-0.141 1.323-0.682 0.443-1.359 0.161-2.906-0.859-4.047zM29.849 5.818c-2.104-2.344-5.208-3.229-8.073-2.625-0.661 0.135-1.083 0.781-0.943 1.443s0.781 1.083 1.443 0.943c2.042-0.443 4.245 0.198 5.729 1.844 1.479 1.661 1.906 3.922 1.26 5.885-0.219 0.641 0.141 1.344 0.781 1.542 0.641 0.224 1.323-0.135 1.542-0.781 0.901-2.781 0.323-5.969-1.781-8.313z"/></svg>
twitter:logo: <svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
zhihu:logo: <svg fill="#FFFFFF" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"/><path d="M12.344 17.963l-1.688 1.074-2.131-3.35c-.44 1.402-1.172 2.665-2.139 3.825-.402.483-.82.918-1.301 1.375-.155.147-.775.717-.878.82l-1.414-1.414c.139-.139.787-.735.915-.856.43-.408.795-.79 1.142-1.206 1.266-1.518 2.03-3.21 2.137-5.231H3v-2h4V7h-.868c-.689 1.266-1.558 2.222-2.618 2.857L2.486 8.143c1.395-.838 2.425-2.604 3.038-5.36l1.952.434c-.14.633-.303 1.227-.489 1.783H11.5v2H9v4h2.5v2H9.185l3.159 4.963zm3.838-.07L17.298 17H19V7h-4v10h.736l.446.893zM13 5h8v14h-3l-2.5 2-1-2H13V5z"/></g></svg>

创建followme.ejs

找到放置ejs文件的文件夹。哥们的文件夹路径是node_modules/hexo-theme-stellar/layout/_partial/widgets/。新建文件followme.ejs。
其他的主题应该大差不差。
在文件里填入以下内容：

node_modules/hexo-theme-stellar/layout/_partial/widgets/followme.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%
var fmbtns = [
{ platform: 'weibo', link: item.weibo },
{ platform: 'twitter', link: item.twitter },
{ platform: 'zhihu', link: item.zhihu }
];

function layoutfollowmediv()
{
  var el = '';
  el += `<widget class="widget-wrapper${scrollreveal(' ')} followme-widget">`;
  el += '<div class="fmwidget-body">';
    if(item.avatar)
    {
        el += '<div class="fmavatar" ><img no-lazy type="img" src="' + item.avatar + '"></div>'
    }
    if(item.text)
    {
        el += '<p class="fmtext" type="text">' + item.text +'</p>';

    }
    el += '<div class="fmbutton">';
        fmbtns.forEach(link => {
            el += `<a class="fmbtn" href="${link.link}">`;
            el += icon(link.platform + ':logo');
            el += '</a>';
        })
    el += '</div>';
  el += '</div>';
  el += '</widget>';
  return el;
}
%>
<%- layoutfollowmediv() %>

创建followme.styl

文件夹位置和followme.ejs差不多。如果是其他主题，自行修改路径。
在node_modules/hexo-theme-stellar/source/css/_components/widgets/下新建文件followme.styl，填入以下内容：

node_modules/hexo-theme-stellar/source/css/_components/widgets/followme.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.followme-widget 
  .fmwidget-body
    text-align: center
    background: var(--card)
    border-radius: $border-card
    padding: 1rem
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1)
  .fmavatar
    margin: 1rem auto 1.25rem auto
    border-radius: 10%
    max-width: 128px
    overflow: hidden
    border: 3px solid white
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1)
    @media screen and (max-width: $device-tablet)
      max-width: 50%
  .fmtext
    text-align: center
    font-weight: 900
    font-size: $fsh2
    color: var(--text)
    margin: 0
  .fmbutton
    margin: 1rem 0
    display: grid
    grid-gap: 2px
    grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
  .fmbtn
    flex-direction: column
    background: $color-theme
    border-radius: 4px
    padding: 0.25rem 0
    transition: background-color 0.3s ease, transform 0.3s ease
    svg
      height: 1.5em
      width: auto
    &:hover
      background: $color-hover

如何使用

在source/_data/widgets.yml中创建组件：

source/_data/widgets.yml
1
2
3
4
5
6
7
followme:
  layout: followme
  avatar: #头像地址
  text: Contact me #文本内容
  weibo: #微博主页地址
  twitter: #推特主页地址
  zhihu: #知乎主页地址

然后和其他小组件一样，在想要的地方引入就行了喵。

想自定义？

我写下的个人主页是微博、推特和知乎，因为这是哥们最常使用的社交媒体（知乎也算社交媒体吧）。如果想修改成其他的社交媒体，可以按照如下方式修改。举例，把「知乎」修改为「哔哩哔哩」。

修改followme.ejs

打开followme.ejs，把开头的代码改成：

原代码

node_modules/hexo-theme-stellar/layout/_partial/widgets/followme.ejs
1
2
3
4
5
var fmbtns = [
{ platform: 'weibo', link: item.weibo },
{ platform: 'twitter', link: item.twitter },
{ platform: 'zhihu', link: item.zhihu }
];

修改后的代码

node_modules/hexo-theme-stellar/layout/_partial/widgets/followme.ejs
1
2
3
4
5
var fmbtns = [
{ platform: 'weibo', link: item.weibo },
{ platform: 'twitter', link: item.twitter },
{ platform: 'bilibili', link: item.bilibili }
];

添加B站的icon

打开icon.yml，另起一行，粘贴以下代码：

node_modules/hexo-theme-stellar/_data/icons.yml
1
bilibili:logo: <svg fill="#FFFFFF" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"/><path d="M18.223 3.086a1.25 1.25 0 0 1 0 1.768L17.08 5.996h1.17A3.75 3.75 0 0 1 22 9.747v7.5a3.75 3.75 0 0 1-3.75 3.75H5.75A3.75 3.75 0 0 1 2 17.247v-7.5a3.75 3.75 0 0 1 3.75-3.75h1.166L5.775 4.855a1.25 1.25 0 1 1 1.767-1.768l2.652 2.652c.079.079.145.165.198.257h3.213c.053-.092.12-.18.199-.258l2.651-2.652a1.25 1.25 0 0 1 1.768 0zm.027 5.42H5.75a1.25 1.25 0 0 0-1.247 1.157l-.003.094v7.5c0 .659.51 1.199 1.157 1.246l.093.004h12.5a1.25 1.25 0 0 0 1.247-1.157l.003-.093v-7.5c0-.69-.56-1.25-1.25-1.25zm-10 2.5c.69 0 1.25.56 1.25 1.25v1.25a1.25 1.25 0 1 1-2.5 0v-1.25c0-.69.56-1.25 1.25-1.25zm7.5 0c.69 0 1.25.56 1.25 1.25v1.25a1.25 1.25 0 1 1-2.5 0v-1.25c0-.69.56-1.25 1.25-1.25z"/></g></svg>

如果对这个icon不满意的话，也可以自己改成想要的样子。

如何使用

修改后的使用方式和修改前差不多。在source/_data/widgets.yml中创建组件：

source/_data/widgets.yml
1
2
3
4
5
6
7
followme:
  layout: followme
  avatar: #头像地址
  text: Contact me #文本内容
  weibo: #微博主页地址
  twitter: #推特主页地址
  bilibili: #B站主页地址

对于其他平台，自己对照一下就行了喵。
如果觉得三个按钮太多或者太少，可以通过修改followme.styl文件，得到自己想要的按钮数量。不过温馨提示，经过我的测试，三到四个按钮看着比较舒服，太少或者太多都显得很奇怪。

效果

参考主页右上角。对就是那个有福瑞大头像的小组件。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~