使用Jekyll撰写博客(三)

在模板底部添加外部链接

以添加csdn为例,效果图见博客底部:

下面开始:

  1. 从网上下载csdn图标的svg资源(这里必须是svg格式的,测试了ico格式,但是在jekyll serve启动时显示:Liquid Exception: invalid byte sequence in UTF-8的错误,替换了svg格式后问题消失)。点击下载icon-csdn.svg

  2. 配置

    我们建立好网站后一般都默认的会有githubtwitter两个链接,后面就可以仿照它们来放置我们自己的图标。

    • 找到icon-github.svg图标所在路径,如果不知道在哪,请参考搭建jekyll章节的补充内容

      使用喜欢的编辑器打开icon-github.svg,找到里面的widthheight属性,对应修改,其他内容不变

    • icon-github.svg图标和icon-github.html复制到自己site的_includes文件夹下,如果没有,则在site的根路径下创建即可

    • 新建icon-csdn.html文件,并将icon-github.html中的内容复制过来

    • 修改icon-csdn.html

      <a href="http://blog.csdn.net/{{ include.username }}"><span class="icon icon--csdn">{% include icon-csdn.svg%}</span><span class="username">{{ include.username }}</span></a>
      

      上面的语法不难理解,因为是链接到csdn,所以是http://blog.csdn.net/用户名,后面使用{% include icon-csdn.svg %}将图标包含进来

    • 修改footer.html文件

      我们每篇文章的模板都默认是{% include footer.html %},因此需要修改该文件,找到对应部分,添加即可:

      <div class="footer-col footer-col-2">
        <ul class="social-media-list">
          {% if site.github_username %}
          <li>
            {% include icon-github.html username=site.github_username %}
          </li>
          {% endif %}
      
          {% if site.twitter_username %}
          <li>
            {% include icon-twitter.html username=site.twitter_username %}
          </li>
          {% endif %}
      
          {% if site.csdn_username %}
          <li>
            {% include icon-csdn.html username=site.csdn_username %}
          </li>
          {% endif %}
        </ul>
      </div>
      
    • 修改配置文件_config.yml,在里面添加csdn_username: your_csdn_username