博客 Jekyll Github SaSS 主题 Gulp

博客建站记录（3）| 主题配置与修改（上）

Posted by 空谷 on 2017-10-04

上回做完了所有的框架结构，安装上了主题，但是这个主题任然还是原作者的。接下来的工作就是修改这个主题并适配我的需求。

URL修改

Jekyll默认的Url格式为 .../year/month/day/file.html
月日都显示则过于拖沓，html结尾的链接看着又十分老旧。因此决定修改 url 的显示方式。

查了一下 Jekyll 的文档，发现只需要在配置文件中设置对应的链接样式即可。

Setting permalink styles in your configuration file applies the setting globally in your project. You configure permalinks in your _config.yml file like this:

1
2
> permalink: /:categories/:year/:month/:day/:title.html
>

If you don’t specify any permalink setting, Jekyll uses the above pattern as the default.
When you use permalinks that omit the .html file extension (called “pretty URLs”) Jekyll builds the file as index.html placed inside a folder with the page’s name. For example:

1
2
3
> ├── mypageurl
> │   └── index.html
>

With a URL such as /mypageurl/, servers automatically load the index.html file inside the folder, so users can simply navigate to http://somedomain.com/mypageurl/ to get to mypageurl/index.html

Jekyll 的 URL 有year 、month、day、urlname、title、hour等十几个参数，当然我用不到这么多。
为了让链接看着简单一些，我只选取了year 与 urlname 这两个参数。
选取年份的目的仅仅是为了做个记录，对于一个博客来说，记录单位用年就够了。而为什么选择 urlname 而不是 title，因为很多时候文章的 titile 不一定是英文的，而 urlname 必须是英文的。所以我可以用中文写 title ，然后自己翻译成 urlname，就能轻松保证 URL 的干净度。

1
2
#静态链接设置
permalink: '/:year/:urlname'

配置调整

打开链接时打开新的页面

这个主题的超链接是在同页打开，我个人并不喜欢。因此打算修改这个超链接属性为在新标签栏中打开。
在 index.html 文件找到以下代码行，这一行是用于输出可点击的文章列表的。

1
<a class="post-link" href="{{ post.url }}" title="{{ post.title }}"></a>

在 href 前 插入 target="_blank"，即可实现在新标签页中打开。

取消复制时的商业授权说明

对于我个人来说，博客的用途一个是便于自己和他人后期查找使用，那么加入复制版权申明还是有点累赘的。因此把这个功能取消掉。

用 Sublime Text在index.js找到了setClipboardData函数，将其注释掉就完成了这项工作。

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * Copy and copyright
 */
function setClipboardData(str) {
    str += '\n\n著作权归作者所有。\n商业转载请联系作者获得授权,非商业转载请注明出处。\n原文: ' + location.href;
    $('.post-content').on('copy', function(e) {
        var data = window.clipboardData || e.originalEvent.clipboardData;
        data.setData('text/plain', str);
        e.preventDefault();
    }); 
}

图标修改

网站 icon 增加

默认的主题是没有网站 icon 的，从网上查资料得知，通过引入以下代码即可为网站添加 icon。

1
<link rel="shortcut icon" type="image/png" href="/icon.png">

经过测试后有效，觉得可以加入网站配置文件中。在 _config.yml 中添加以下代码

1
2
#网站 ICON （要求为 PNG 格式）
favicon : 'assets/icons/icon.png'

然后将之前的代码改成模板。

1
<link rel="shortcut icon" type="image/png" href="{{ site.favicon }}">

Logo 替换

用 AI 制作了矢量 Logo 后转成 svg，发现有756K，远远大于原作者的 Logo 大小。通过栅格化阴影图像，便能大大减小 Logo 的尺寸（最后为15k），提升网页 Logo 的加载速度。
另外在修改 SVG logo 过程中，意外发现在 AI 中 SVG 的画板对于最后呈现十分重要，最后图标的大小是完全基于 Ai 中图标和画板的关系的。

将我的 Logo 替换之后，发现视觉上太小了，因此需要放大 Logo 的尺寸。

通过 Sublime Text 的Find in File 功能直接搜索出了 Logo的样式所在位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.g-logo {
       float: left;
       margin-left: 2%;
       width: 50px ;
       height: $g-header-h;
       background: url('../icons/logo.svg') no-repeat center;
       background-size: 100% 100%;
       opacity: .7;
       transition: all .2s;
       &:hover {
           opacity: 1;
       }
       a {
           display: block;
           width: 100%;
           height: 100%;
       }
   }

这里我要修改的是 Logo 的 height 值，是由一个 $g-header-h 变量控制的。这套主题的 CSS 是通过 SASS 设置的，在 helper.scss 这个文件中找到了这个参数。

1
2
3
4
5
6
// size
$g-header-h: 40px;
$g-banner-h: 460px;
$g-footer-h: 40px;
$g-container-w: 960px;
$post-content-w: 720px;

评论模块

不知道为什么，默认的评论模块无法加载。因此我重新从 Disqus 上拉了源代码进来测试。

Disqus 重新安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="disqus_thread"></div>
<script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    /*
    var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        
        s.src = 'https://arvinx.disqus.com/embed.js';
        
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

直接加载没有任何问题。

但是调用模板里的就会报错。

说明问题出在模板上。

1
2
{ % if site.disqus % }
{ % end if % }

但是具体问题是什么，估计要留到以后去解决了。

然后奇怪的事情又发生了。
当我重新把评论状态语句放回去，Disqus又能正常出现，不明白怎么回事…

再次经过测试发现，disqus_url 这个参数不能用…，看来这里有两个坑待填…

样式重新调整

这个主题的样式用的是 SASS 的方式，需要安装 gulp，在一番艰苦学习之后终于安装好了 gulp，实现了 CSS 的自动生成。作者在主题的 README 有说明。参考链接：jekyll-theme-H2O

主题开发使用的技术栈也比较简单：引入jQuery类库、使用Sass代替CSS编写样式，使用Gulp完成Sass的编译、CSS和JavaScript的代码合并压缩等任务。
如果你喜欢折腾，想对模板的代码进行修改，需要使用命令 npm install 安装 package.json 中的依赖，然后 gulp 一下即可开始你的自定义之旅。

实际上，我个人并不喜欢将评论放在网页最底端，我希望是出现在分享下方。因此我调整了评论的位置到分享按钮下方，同时改变了评论的 CSS 类，让它符合逻辑。

1
2
3
4
5
6
7
8
9
10

{ % if site.social-share %}
   <div class="social-share-wrapper">
        <div class="social-share"></div>
    </div>
   { % endif %}

    <section class="comment">
    <div id="disqus_thread"></div>
    </section>

然后修改 comment 类的样式。

在 commin.scss 中找到 .comment 类，修改属性。

1
2
3
4
5
6
.comment {
    margin: 100px auto;  //上方为按钮栏，100px看着比较舒服
    position: relative;
    width: 90%;
    max-width: $post-content-w;
}

再来看感觉作者介绍距离评论距离过大，查看 CSS 样式发现post-content，的底部有 80px 的 padding，因此调整其 CSS 样式。

将 .post-content 里的

1
padding: 40px 0 80px;

改为

1
padding-top: 40px;

以上，评论全部配置完毕。

剩下还有诸如代码高亮修改、黑夜模式优化、文章导航栏等就留到下次再改吧。先睡了…

参考资料

  1. Permalinks - jekyll
  2. Disqus - Install instructions for Universal Code
  3. jekyll-theme-H2O
FEATURED TAGS
博客 Jekyll Github SaSS 主题 Gulp