终于等到你

发表于   |   分类于   |  

初看这篇博文的标题诸位一定以为我是要写一篇年度狗血秀恩爱的博文，但是考虑到我是一个理工科出身的人，最头疼的就是作文，所以事实上我是要讲一下这个静态博客的主题Next的修改问题，还有在配置Next主题时发现的主题配置文档里的部分问题。至于为什么要用这个标题呢，因为之前好多次讲要找个时间写一下，结果找个时间找到了现在，二零一六年元月，对于之前在知乎里询问我主题怎么修改成现在这样的亲们，真是灰常抱歉啊。说到修改其实我对nodejs几乎也是一窍不通，什么swig，styl也是根本从来没接触过，但好在有做Web开发的底子，外加上swig长的也比较像HTML加自有标签，还有神器firebug相助，然后摸索着修改了Next主题，最终完成了我的私人定制。

拖延症的错

要写这篇博文前，突然想到先前搭建这个静态博客的时间是很久之前的事了，Next主题 不出意外的话，在现在这个时间节点肯定已经早就更新过n多次了（感谢作者的辛勤付出让我们用上这么漂亮简洁的主题），于是在本地新建了一个demo站点然后pull下来最新的主题，配置到这个示例站点上看了下，果不其然，作者又做出来一个Pisces的侧边栏分成双栏的scheme，非常漂亮，而且我所使用Mist的scheme作者也做了较大的改动，所以这次的主题修改以最新的Next主题的Mist scheme为例，最终完成的效果会与我的这个博客有些许不同，还请见谅。

开始变（xiu）形（gai）了

底栏部分

  1. 去除底部“由XXX驱动”文字及链接：找到站点（以deom为例）本地磁盘目录“demo\themes\next\layout_partials”文件夹下面的footer.swig文件，用记事本之类的文本编辑工具打开，删除以下两个div区块的内容。

    1
    2
    3
    4
    5
    6
    7
    <div class="powered-by">
    省略内容
    </div>

    <div class="theme-info">
    省略内容
    </div>

  2. 更改底栏高度：找到站点（以deom为例）本地磁盘目录“demo\themes\next\source\css_variables”文件夹下面的base.styl文件，打开后找到Layout sizes段落，修改如下内容。

    1
    $footer-height  = 20px

  3. 更改底栏文字为居中对齐(侧边栏一直显示情况下比较美观，否则不用修改)：找到站点（以deom为例）本地磁盘目录“demo\themes\next\source\css_scheme\Mist”文件夹下面的index.styl文件，打开后找到Layout sizes段落，修改如下内容。

    1
    2
    3
    4
    .footer-inner {
      省略内容
      text-align: center;
    }

侧边栏部分

  1. 隐藏社交链接项下划线：找到站点（以deom为例）本地磁盘目录“demo\themes\next\source\css_common\components\siderbar”文件夹下面的sidebar-author-links.styl文件，打开后修改如下内容。

    1
    2
    3
    4
    .links-of-author a {
      省略内容
      border-bottom-color: $black-deep;
    }

  2. 去除社交链接项前面的圆点:打开1步骤中同样文件去掉如下内容中标注的一行。

    1
    2
    3
    4
    5
    6
    7
    .links-of-author a {
      省略内容
      &:before {
        省略内容
        background: rgb(random-color(0, 255) - 50%,random-color(0, 255) - 50%, random-color(0, 255) - 50%);#只去掉这一行#
      }
    }

  3. 去除社交链接文字描述：找到站点（以deom为例）本地磁盘目录“demo\themes\next\layout_macro”文件夹下面的sidebar.swig文件，打开后修改如下内容。

    1
    2
    3
    4
    5
    6
    <div class="links-of-author motion-element">
        省略内容
        {% if theme.social_icons.enable %}
        <i class="fa fa-{{theme.social_icons[name] || 'globe' }}"></i>
        {% endif %}
    </div>

主题配置中遇到的问题

  1. 启用社交链接时，别忘了把social前的注释关闭，在试用新版的主题时，因为这个生成静态页面时一直报错，最后发现是忘记把这个注释关闭了。

    1
    2
    3
    # Social links
    # social: //这个前面的＃号要去掉
      #GitHub: //去掉#号填写社交链接地址并且保留一个空格

  2. 主题使用文档中“自定义logo及图标”部分现在已经废弃，但是有下面的问题其中步骤三中提到的新建styl文件的目录应该“source/css/_common/_fonts/”。

  3. 之前主题还存在一个文本上标（如数学公式中数字的平方的上标）、下标（如标识数字是什么进制的下标）显示不正常的问题，不知道最新的主题解决了没有，因为懒，我也没有再试验，也忘记当初老版本是怎么更改解决的了。