在aircloud主题下方添加gitee图标

需求产生

  1. aircloud主题真的好漂亮，我好喜欢！！！！
  2. 国内gitee访问速度快，github非常慢
  3. aircloud 默认不支持在博客下方添加gitee图标

实现

观察aircloud主题源代码

  1. 主题demo部分在_config.yml部分可以配置相应的社交平台_

    hexo-aircloud-blog/_config.yml (github.com)

    image-20211115091424648

  2. 主题/blob/master/layout/_partial/footer.ejs中配置的界面下方的标题栏 _

    hexo-theme-aircloud/layout/_partial/footer.ejs (github.com)

    image-20211115092705043

    1. herf 里面应该是链接地址的拼接，

      1
      <%- config.github_username %>

      应该是从config文件中读取github的用户名

      1
      <i class="iconfont icon-github"></i>

      好像是图标？

      1. 修改拼接格式image-20211115093208494在_config中修改image-20211115093354718

        1. 效果奇怪怪的image-20211115093425534

        2. 搜索

          1
          class="iconfont icon

          猜对关键词image-20211115095406160阿里图标的三种使用方式 - 简书 (jianshu.com)

      2. 在head .ejs中存放了对阿里图标的调用

        image-20211115095945291

        hexo-theme-aircloud/head.ejs at master · aircloud/hexo-theme-aircloud (github.com)

      3. 注册自己的阿里账号，插入进去

        image-20211115100352759

      4. 插入gitee2 图标

        image-20211115100522255

        image-20211115100705213

      5. 完美解决

        image-20211115100606419

总结

  1. 注册阿里云，创建项目，添加gitee2图标,并在head.ejs中添加自己的css文件

    1
    2
    3
    4
    <!-- 它提供的css文件 -->
       <link href="//at.alicdn.com/t/font_620856_pl6z7sid89qkt9.css" rel="stylesheet" type="text/css">
       <!-- 我自己的css文件 -->
    <link href="//at.alicdn.com/t/font_2937294_fvlq3ab7zh.css" rel="stylesheet" type="text/css">

  2. 在footer.ejs文件中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <% if (config.gitee_username) { %>
       <li>
           <a target="_blank"  href="https://gitee.com/<%= config.gitee_username %>">
                           <span class="fa-stack fa-lg">
                               <i class="iconfont icon-gitee2"></i>
                           </span>
           </a>
       </li>
       <% } %>

  3. 在_config.yml添加自己的配置信息

    1
    gitee_username:    an-ran0

  4. 完美解决