文章

Jekyll主题Chirpy简单客制化

发表于 更新于
Preview Image
作者 Ge Zhaoyou 3 分钟阅读

本博客使用Jekyll生成，部署在阿里云服务器上，使用的是Chirpy主题，一款非常简约却又功能丰富的主题。有些地方个人做了少许改动，记录一下。

文章列表缩略图

增加了文章列表缩略图，三种尺寸 small, medium, large, 效果也可查阅本博客首页。修改内容为:

在 _layouts/home.html 的 <div class="card-body"> 标签下增加

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

<!-- thumb start -->
 {% if post.image.thumb.enable %}
  {% if post.image.thumb.size == 'small' %}
    <img class="card-thumb-small" src="{{ post.image.path }}"/>
  {% endif %}
  {% if post.image.thumb.size == 'medium' %}
    <img class="card-thumb-medium" src="{{ post.image.path}}"/>
  {% endif %}
  {% if post.image.thumb.size == 'large' %}
    <img class="card-thumb-large" src="{{ post.image.path}}" />
  {% endif %}
 {% endif %}
<!-- thumb end -->

增加自定义css，修改assets/css/style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.card-thumb-small {
  border-radius: 8px;
  margin-right: 20px;
  height: 120px;
  display: block;
  object-fit: cover;
  float: left;
}

.card-thumb-medium {
  width: 100%; 
  margin-bottom: 15px;
  border-radius: 8px;
  max-height: 125px;
  display: block;
  object-fit: cover;
  float: left;
}

.card-thumb-large {
  width: 100%; 
  margin-bottom: 15px;
  border-radius: 8px;
  max-height: 300px;
  display: block;
  object-fit: cover;
  float: left;
}

@media all and (max-width: 830px) {
  .card-thumb-small {
    width: 100%;
    margin-bottom: 15px;
  }
}

@media all and (min-width: 831px) {
  .card-thumb-small {
    width: 25%;
  }
}

创建文章头部image标签下增加thumb字段：

1
2
3
4
5
6

image:
  path: http://io.fifo.site/typora5691682473820.jpg
  alt: android & ffmpeg.
  thumb:  
    enable: false
    size: 'medium' #small, medium, large

代码高亮

代码高亮头部改为mac风格有颜色的点, 并且字体颜色稍微调深一点。

增加自定义css，修改assets/css/style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.highlight {
  .lineno {
    color: #999999;
  }
}

.code-header {
  &::before {
    $dot-size: 0.75rem;
    $dot-margin: 0.5rem;

    background-color: #ED6C5F;
    box-shadow: ($dot-size + $dot-margin) 0 0 #F4BF4F,
      ($dot-size + $dot-margin) * 2 0 0 #62C655;
  }

  /* the label block */
  span {
    /* label icon */
    i {
      color: #999999;
    }
    
    /* label text */
    &::after {
      color: #999999;
    }
  }

  button {
    i {
      color: #999999;
    }
  }
}

行内代码字体颜色

行内代码字体颜色修改为浅红，原来为浅灰不是太显眼

增加自定义css，修改assets/css/style.scss

1
2
3
4
5
6

code {
  &.highlighter-rouge {
    color: #BF2D44;
    // background-color: #FCF6E5;
  }
}

总结

对原主题的侵入比较小，主要修改了css和少量home.html，后期升级主题也比较方便。整体改完使用效果非常不错，有需要的朋友可以按照上面方法修改一下。

巧记
Jekyll
本文由作者按照 CC BY 4.0 进行授权