Brkhu用来瞎搞的地方
0%

侧边栏社交链接图标显示的抽象问题

发表于 更新于 分类于

今天尝试加相关链接和友链, 仔细阅读 _config.yml, 发现了如下的片段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
  enable: false
  icons_only: false
  transition: false

尝试添加 github, 邮箱和知乎, 将其修改成如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
social:
  GitHub: https://github.com/Brkhu || fab fa-github
  E-Mail: mailto:w-zc21@mails.tsinghua.edu.cn || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  知乎: https://www.zhihu.com/people/yi-ge-pu-tong-ren-45

social_icons:
  enable: false
  icons_only: false
  transition: false

结果只要把下面的 social_icon 中的 enable 改成 true 就会在生成 .html 文件的时候崩溃, 导致主页都进不去. 在网络上没有找到特别相关的结果.

阅读 \themes\next\layout\_partials\sidebar\site-overview.swig 源代码 77-96 行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{%- if theme.social %}
  <div class="links-of-author motion-element">
    {%- for name, link in theme.social %}
      <span class="links-of-author-item">
      {%- set sidebarURL = link.split('||')[0] | trim %}
      {%- if theme.social_icons.enable %}
        {%- set sidebarIcon = '<i class="' + link.split('||')[1] | trim + ' fa-fw"></i>' %}
      {%- else %}
        {%- set sidebarIcon = '' %}
      {%- endif %}
      {%- if theme.social_icons.enable and theme.social_icons.icons_only %}
        {%- set sidebarText = '' %}
      {%- else %}
        {%- set sidebarText = name %}
      {%- endif %}
        {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' → ' + sidebarURL}) }}
      </span>
    {%- endfor %}
  </div>
{%- endif %}

并实验后, 发现原因在于只要 theme.social_icons.enable = true, 就会将字符串用 || 分割, 并调用后半部分, 前后添加一些元素变成 <i class="xxx fa-fw"></i> 的 html 代码. 但我设置的知乎网址后面没有使用 || 而是直接留空, 从而 link.split('||')[1] 不存在, 导致生成出错.

这么弱智的错误难怪在网上找不到. 整理成一篇博客, 留作警示.