DieselChen

个人博客,记录一下学习的点滴～

0%

使用hexo搭建博客的自定义设置

发表于 分类于 ， Valine：
本文字数： 3.3k 阅读时长 ≈ 3 分钟

个人博客搭建一些自定义设置，基于hexo + next +github pages

数据文件

自从 NexT-7.3.0 开始，官方推荐采用数据文件将配置与主题分离，这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式，便于后续 NexT 版本更新。

next.yml

我们可以将所有主题配置放在一个位置（hexo/source/_data/next.yml）

具体步骤：

  1. 在 hexo/source/_data 目录中创建 next.yml（如果_data 不存在，则创建目录）。
  2. 在 next.yml 设置 override 选项为 true。
  3. 将所有 NexT 主题选项从主题配置文件复制到 hexo/source/_data/next.yml 中。

styles.styl

我们只需要把原来的 hexo/next/source/css/_custom/_custom.styl 中的全部自定义样式放到 hexo/source/_data/styles.styl 即可。

然后在 NexT 的配置文件 next.yml 中取消 styles.styl 的注释：

1
2
3
4
custom_file_path:

-  #style: source/_data/styles.styl
+  style: source/_data/styles.styl

variables.styl

在自定义样式文件 variables.styl 中添加：

1
2
3
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

然后在 NexT 的配置文件 next.yml 中取消 variables.styl 的注释：

1
2
3
4
custom_file_path:

-  #variables: source/_data/variables.styl
+  variables: source/_data/variables.styl

在文章底部增加版权信息

编辑 主题配置文件，修改如下配置：

1
2
3
4
5
copycreative_commons:
  license: by-nc-sa
  sidebar: false # 不在侧边栏显示版权信息
  post: true
  language:

删除侧边栏目录下划线

找到对应的a标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 修改链接样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #ff106c;
  }
}

a, span.exturl {
  border-bottom: none;
  &:hover {
    color: #ff106c;
  }
}

顶部阅读进度条

主题配置文件 next.yml 中修改 reading_progress 选项。

1
2
3
4
5
6
reading_progress:
  enable: true
  # 显示在顶部
  position: top
  color: "#06d633"
  height: 3px

. 在每篇文章末尾统一添加“本文结束”标记

实现效果图

img

具体实现方法

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

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

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

代码如下：

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

标签页面样式

在 hexo/source/_data/styles.styl 文件加入下面样式。

1
2
3
4
5
6
7
8
.tag-cloud a {
    box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
    padding: 2px 10px;
    margin: 8px;
    background: rgba(193,66,92,0);
    border-bottom: none;
    border-radius: 20px;
}

页面阅读统计

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: false              # 设true 开启
  total_visitors: true       # 总阅读人数（uv数）
  total_visitors_icon: user  # 阅读总人数的图标
  total_views: true          # 总阅读次数（pv数）
  total_views_icon: eye      # 阅读总次数的图标
  post_views: true           # 开启内容阅读次数
  post_views_icon: eye       # 内容页阅读数的图标

首页文章不展示全文显示摘要

我们可以在主题配置文件中设置：

1
2
3
4
5
6
7
8
9
scroll_to_more: true      # 点击阅读全文后是否跳到<!--more-->标记处,设为false时点击阅读全文可以从头阅读

save_scroll: false        # 自动保存每篇文章或页面上一次滚动的地方

excerpt_description: true # 自动在首页对文章进行摘要描述作为前言文本

auto_excerpt:   # 是否自动截取摘要
  enable: false # 设置为true则自动截取150字当做首页摘要
  length: 150   # 自动截取的字数

官方公告：auto_excerpt 可以自动截断文章内容作为摘要。此功能不是一个 Hexo 主题应当负责的，这为主题的维护者带来了太大压力。自 7.6.0 版本开始，此功能被移除，请自行安装第三方插件，或阅读 Hexo 有关文档。当然，我们仍然建议通过 <!-- more --> 来精确控制 Read More 的位置。

hexo new post 打开markdown 编辑器

方法
在博客根目录里新建一个scripts 的 folder。

在这个 scripts 的 folder 里新建一个js文件，內容如下 (Typora 是我用的编辑器，把路径和软件修改成你想要的）：

For Window:

1
2
3
4
5
var spawn = require('child_process').exec;

hexo.on('new', function(data){
  spawn('start  "C:\Program Files (x86)\Brackets\Brackets.exe" ' + data.path);
});

For Mac:

1
2
3
4
5
var exec = require('child_process').exec;

hexo.on('new', function(data){
    exec('open -a "..\Brackets\Brackets.app" ' + data.path);
});

欢迎关注我的其它发布渠道

-----------本文结束感谢您的阅读-----------