Hexo博客之Next主题自定义配置

发表于   |     |    阅读次数

前言

Next主题是Hexo博客上的一款人气非常高的主题，到目前为止在Github上面已经有3400+ Star，这款主题风格简约，大气，并且作者将一些常用的配置都集成在了主题里面，我们只需要修改主题的_config.ymal 进行简单的配置，就能方便的集成，评论，统计等等第三方功能，十分方便

本博客使用了Next 主题的PiscesScheme

详细的使用说明在这里Next使用说明,通过使用说明我们非常容易的进行绝大部分配置

  • 修改Scheme 为Pisces（Next同时包含三个子样式，我们选择左右边栏同时出现的样式）
  • 定义导航条按钮
  • 配置头像
  • 添加多说评论
  • 配置代码高亮主题
  • 代码高亮主题配置

本篇文章主要记录自己对主题其他地方的一些修改，自定义

修改标题字体大小

主题默认的标题字号大小如图

上面分别是1号标题，2号标题，在我看来，可能1号标题不够大，并且1，2号标题区分不太明显，我希望能够修改这几号标题的字体大小
显然了解html的人一定知道 我们需要修改css 样式里面的h1~h6标签
那我们就打开主题的css目录 搜索h1结果如下

_base.styl 是Mist scheme 里面的配置文件应该不是我们要找的
我们打开base.styl文件 搜索h1 看到如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  line-height: 1.5;
  font-family: $font-family-headings;
}

h2, h3, h4, h5, h6 { margin: 20px 0 15px; }

for headline in (1..6) {
  h{headline} {
    font-size: $font-size-headings-base - $font-size-headings-step * headline;
  }

  +mobile() {
    h{headline} {
      font-size: $font-size-headings-base - $font-size-headings-step * headline - 4px;
    }
  }
}

显然是我们要找的内容，三个区域先是为h1~h6定义了字体，接着定义了margin,然后用for循环递减的设置了h1~h6的字号大小
删除 下面的样式

1
2
3
4
5
6
7
8
9
10
11
for headline in (1..6) {
  h{headline} {
    font-size: $font-size-headings-base - $font-size-headings-step * headline;
  }

  +mobile() {
    h{headline} {
      font-size: $font-size-headings-base - $font-size-headings-step * headline - 4px;
    }
  }
}

添加自定义代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
h1 {
    margin-bottom: 18px;
    font-size: 30px;
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 18px;
}
h4 {
    font-size: 16px;
}
h5 {
    font-size: 14px;
}
h6 {
    font-size: 13px;
}

此时不用重新生成启动本地server 直接刷新页面localhost:4000即可看到变化

修改前

修改分隔线


可能我个人还是喜欢 更加简约的一条横线分割，所以同样需要修改css 样式里面的 hr 标签
同上进入css 文件夹 搜索hr

打开 base_styl 搜索hr看到如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
hr {
  margin: 40px 0;
  height: 3px;
  border: none;
  background-color: $gray-lighter;
  background-image: repeating-linear-gradient(
    -45deg,
    white,
    white 4px,
    transparent 4px,
    transparent 8px
  );
}

很显然 background-image 就是设置背景白色，灰色相间的样式 修改样式如下

1
2
3
4
5
6
hr {
  margin: 40px 0;
  height: 1px;  #高度设置为1
  border: none;
  background-color: $gray-lighter;
}

最后分割线的效果

利用learn-cloud为文章添加阅读数（首页与详情页）

本博客使用的Next主题版本为 5.0.1 默认已经集成了

  • busuanzi统计
  • learn-cloud统计
    但是由于busuanzi统计只能在文章详情页面显示阅读次数，博客首页不能显示文章阅读数，所以不满足我们的要求

主题集成的learn-cloud 在显示上面有一点问题，所以我们需要在其基础上做修改

原理

learn_cloud 作为我们的云端数据存储平台，将我们每篇文章的计数数据保存到learn_cloud上面，
在我们的文章html 页面嵌入计数js代码，每次打开页面根据页面url 读区learn_cloud上面相应的计数显示，然后计数+1 并更新到learn_cloud 平台

实现步骤

具体实现参考下面的网页，步骤非常详细

Hexo的NexT主题个性化：添加文章阅读量

遇到的问题

主题已经有leancloud_visitors 配置

本博客使用的Next主题版本为5.0.1 在_config.yml 中已经有leancloud_visitors的配置了，我们只需要修改即可，不用重复添加，负责会报错

计数脚本lean-analytics.swig

同样5.0.1版本的主题已经在layout/_scripts/third-party 目录里面创建了lean-analytics.swig,我们这里不使用主题默认的lean-analytics.swig

打开我们刚刚创建的脚本 ／layout／_scripts／lean-analytics.swig

showTime函数是根据页面的url从我们的learn-cloud 读取counter,然后显示，这个函数一般在博客首页使用，因为没有进入文章详情，所以并不增加计数，只显示

addCount函数用来增加计数并显示，当某个url对应的counter 不存在的时候先创建，并初始化为1，如果存在直接增加计数，并更新回learn-cloud

具体怎么判断增加计数，还是只显示，要看下面的函数

1
2
3
4
5
6
7
8
$(function() {
	var Counter = AV.Object.extend("Counter");
	if ($('.leancloud_visitors').length == 1) {
		addCount(Counter);
	} else if ($('.post-title-link').length > 1) {
		showTime(Counter);
	}
});

修改post.swig文件

同样由于主题已经有了 learn-cloud 的配置 所以在post.swig 文件里面已经有了相关配置如下
判断theme.leancloud_visitors.enable如果开启的话，增加阅读数量显示 

1
2
3
4
5
6
7
8
9
10
{% if theme.leancloud_visitors.enable %}
  <span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
    &nbsp; | &nbsp;
    <span class="post-meta-item-icon">
      <i class="fa fa-eye"></i>
    </span>
    <span class="post-meta-item-text">{{__('post.visitors')}} </span>
    <span class="leancloud-visitors-count"></span>
   </span>
{% endif %}

删除上面的代码用教程里面的代码做替换

修改layout.swig文件

同样由于主题已经有了 learn-cloud 的配置，这里默认有 主题自带的配置,引用的主题创建的third-party/lean-analytics.swig

1
{% include '_scripts/third-party/lean-analytics.swig' %}

删除上面的代码 添加教程里面的代码

1
2
3
{% if theme.leancloud_visitors.enable %}
{% include '_scripts/lean-analytics.swig' %}
{% endif %}

博客首页能显示计数数字，详情页不能显示计数数字

原因是learn-cloud 后台创建的Counter Class 没有写权限，只有读取权限
所有showTime的时候只是读取能够正常显示

但是 addCount的时候要先增加计数，更新到learn-cloud 由于这时没有写权限，所以更新失败

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var counter = results[0];
counter.fetchWhenSave(true);
counter.increment("time");
counter.save(null, {
	success: function(counter) {
	＃写入成功 更新界面为 x 阅读数量
		var content =  counter.get('time') + ' ' + $(document.getElementById(url)).text();
		$(document.getElementById(url)).text(content);
	},
	#写入失败  
	error: function(counter, error) {
		console.log('Failed to save Visitor num, with error message: ' + error.message);
	}
});