NexT-Pisces主题配置

NexT 主题虽然已经很好看，但还可以在进一步美化。本文对做过的美化进行了大致的记录。

背景半透明

新建自定义格式文件

在主题的 _config.yml 中取消 custom_file_path 下 style 的注释，进入根目录 source/_data 文件夹并创建 styles.styl。

修改 custom.styl 文件

我的配置如下：

// 文章背景半透明
.content-wrap {
  background: rgba(255, 255, 255, 0.5);
}
.header-inner {
  background: rgba(255, 255, 255, 0.5);
}
.sidebar-inner {
  background: rgba(255, 255, 255, 0.5);
}

// 代码背景透明
.table-container {
  background: rgba(0, 0, 0, 0.68);
}
table > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0);
}
table > tbody > tr:hover {
  background-color: rgba(0, 0, 0, 0);
}
pre,
.highlight {
  background: rgba(0, 0, 0, 0);
}
.highlight .gutter pre {
  background: rgba(0, 0, 0, 0.68);
}
.highlight .code pre {
  background: rgba(0, 0, 0, 0);
}

// 行内代码块的自定义样式
code {
  margin: 2px;
}

// 去掉文章白色背景
.main-inner {
  background: rgba(255, 255, 255, 0);
}

// 侧边栏上半部分设置为透明
.menu-item-active a,
.menu .menu-item a:hover,
.menu .menu-item span.exturl:hover {
  background: rgba(255, 255, 255, 0);
  border-bottom-color: rgba(255, 255, 255, 0);
}

// 侧边栏下半部分设置为透明
.sidebar {
  background: rgba(255, 255, 255, 0);
}
.sidebar-inner {
  background: rgba(255, 255, 255, 0.8);
}

文章结束标识

新建文件

在博客根目录下新建 source/_data/post-body-end.swig ,即 _data 目录和 _posts 目录平级。

在根目录的 _config.yml 取消 custom_file_path 下 postBodyEnd 的注释。

编辑 post-body-end.swig

<div>
  {% if not is_index %}
  <div style="text-align:center;color: #ccc;font-size:14px;">
    -------------本文结束 <i class="fa fa-paw"></i> 感谢您的阅读-------------
  </div>
  {% endif %}
</div>

更换自定义字体

新建 fonts 文件夹

在根目录的source文件夹新建fonts文件夹，把字体文件放进去。

修改 styles.styl

// 更改字体
@font-face {
  font-family: "Sarasa Mono SC";
  font-display: swap;
  src: url("Sarasa-Mono-SC-Regular.eot");
  src: url("Sarasa-Mono-SC-Regular.eot?#iefix") format("embedded-opentype"), url("Sarasa-Mono-SC-Regular.svg#Sarasa-Mono-SC-Regular")
      format("svg"), url("Sarasa-Mono-SC-Regular.ttf") format("truetype"), url("Sarasa-Mono-SC-Regular.woff")
      format("woff"), url("Sarasa-Mono-SC-Regular.woff2") format("woff2");
}

@font-face 属性详解

修改 base.styl

贴上我的配置

// Font families.
$font-family-chinese      = "PingFang SC", "Sarasa Mono SC", "Microsoft YaHei";

$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = "Sarasa Mono SC", get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

$font-family-logo         = $font-family-base;
$font-family-logo         = "Sarasa Mono SC", get_font_family('title'), $font-family-base if get_font_family('title');

$font-family-headings     = $font-family-base;
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');

$font-family-posts        = $font-family-base;
$font-family-posts        = "Sarasa Mono SC", get_font_family('posts'), $font-family-base if get_font_family('posts');

$font-family-monospace    = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace    = "Sarasa Mono SC", get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');