Hexo 主题美化

发表于 | 分类于 | 阅读次数 |

这一篇主要介绍了 Hexo nexT 主题的美化，添加了如何修改标题栏上面的进度条，进度条根据阅读得多少显示长度，还增加了头像旋转特效和如何添加畅言评论系统，主要先介绍三个样式修改，希望大家更多的时间放在原创文章上面，把博客当成自己总结经验和知识的地方，相信你的经验也会带给别人更多的收获！

头像旋转

先找到位于
source/css/_common/components/sidebar/sidebar-author.syl
模板文件里侧边栏头像的样式
.site-author-image

1
2
3
4
5
6
7
8
.site-author-image {
    display: block;
    margin: 0 auto;
    padding: $site-author-image-padding;
    max-width: $site-author-image-width;
    height: $site-author-image-height;
    border: $site-author-image-border-width solid $site-author-image-border-color;
}

通过修改 border-radius 属性就可以改图片四个角的圆角,再加上属性变化的动画效果.

1
2
3
4
5
6
.site-author-image {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transition: 1.4s all;
}

添加 .site-author-image:hover 样式

1
2
3
4
5
6
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

完成！

页面加载进度条

获取提供了 nprogress.css 和 nprogress.js 两个文件获取代码
这两个文件加进 source\lib\nprogress\ 目录下
在 layout/_partials/head.swig 模板中加入 nprogress.css:

1
2
{% set nprogress_uri = url_for(theme.vendors._internal + '/nprogress/nprogress.css') %}
<link href="{{ nprogress_uri }}" rel="stylesheet" type="text/css" />

在 layout/_scripts/vendors.swig 模板中加入 nprogress.js:

1
{% set js_vendors.nprogress   = 'nprogress/nprogress.js' %}

在 source\js\custom.js 里添加

1
2
3
4
5
6
$(document).ready(function () {
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    };
});

完成！

添加畅言评论系统

在这之前，我们得说一下，如果网站没有ICP申报的只有15天的试用期，但是由于多说服务关闭，在国内的评论系统，也就畅言(畅言欠我一个广告费)看起来不错，具体的需要你们自己斟酌。

在这里我们要说一个畅言网站的一个坑，这个坑就是你注册的其实是快站的账号,当你保存畅言的网站下次登陆的时候，其实你是登不上去的，只有从快站登陆并且登陆后才能切换。
（说了一堆废话，只是不想让你们入我的坑，傻傻的再敲账号和密码/(ㄒoㄒ)/~~）

###主题配置文件
next主题的配置文件:

1
2
3
4
#changyan
//畅言在后台管理提供的 需要复制粘贴到下面
changyan_appid:
changyan_appkey:

添加畅言评论框

添加文件layout/_scripts/third-party/comments/changyan.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% if theme.changyan_appid and theme.changyan_appkey %}
	{% if is_home() %}
		<script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId={{theme.changyan_appid}}"></script>
	{% else %}
		 <script type="text/javascript">
		(function(){
		var appid = '{{theme.changyan_appid}}';
		var conf = '{{theme.changyan_appkey}}';
		var width = window.innerWidth || document.documentElement.clientWidth;
		if (width < 960) {
		window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>
		<script type="text/javascript" src="https://assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>
	{% endif %}
{% endif %}

注意：前面忘记说了，新建的文件定要保证是UTF-8格式，全英文可能没事，但是如果文件中有中文就需要注意了.

修改文件 layout/_partials/comments.swig,在id为 comments 的div中最后增加

1
2
{% elseif theme.changyan_appid and theme.changyan_appkey %}
        <div id="SOHUCS" ></div>

注意放的位置

增加畅言评论调用

修改 layout/_scripts/third-party/comments.swig ，最底下增加

1
{% include './comments/changyan.swig' %}

增加评论统计数

修改layout/_macro/post.swig,增加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% elseif theme.changyan_appid and theme.changyan_appkey %}
	<!--noindex-->
	<span class="post-comments-count">
	<span class="post-meta-divider">|</span>
	<span class="post-meta-item-icon">
	  <i class="fa fa-comment-o"></i>
	</span>
	{% if is_post() %}
	    <a href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
	      <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="{{ post.path }}" itemprop="commentsCount"></span>
	    </a>
	{% else %}
	    <a href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
	    <span id = "url::{{ post.permalink }}" class = "cy_cmt_count" data-xid="{{ post.path }}" itemprop="commentsCount" ></span>
	    </a>
	{% endif %}

放入到div 中间 即可 如果有添加 leanCould用户统计的，可以定位ctrl+F ‘leanCould’ 放到上面即可如图：

一切ok！

文章配图

主要实现的就是在标题和摘要中间，插进一张Logo图片，而当点击进入后，就不会再显示这个logo图片了。原文地址：Hexo主题的数据封装，样式渲染和扩展实例。

css样式

hexo/themes/next/source/css/: 是next主题的样式文件，决定主题的外观。
hexo/themes/next/source/css/main.styl：汇总css文件夹中所有的样式。
hexo/themes/next/source/css/ _custom/custom.styl：是空的，专门让开发者扩展。
需要在custom.styl里为图片设计一个专用容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//图片外部的容器方框
.out-img-topic {
  display: block;
  max-height:300px;
  margin-bottom: 24px;
  overflow: hidden;
}
//图片
img.img-topic {
  display: block ;
  margin-left: .7em;
  margin-right: .7em;
  padding: 0;
  float: right;
  clear: right;
}

这里图片外部的容器用来限制图片显示的大小，最大的高度为300px，overflow: hidden;让多余部分隐藏。margin-bottom: 24px;确保图片和文章摘要部分空出一定空间。

渲染

修改 /themes/next/layout/ _macro/post.swig ，在 if is_index 与 if post.description and theme.excerpt_description 之间添加以下代码

1
2
3
4
5
{% if post.images %}
    <div class="out-img-topic">
        <img src={{ post.images }} class="img-topic">
    </div>
{% endif %}
模板

在 /scaffolds/post.md ，加一个images字段，那么在创建新的文章时，填的图片地址就会一直作为文章的一个属性被传递。

1
2
3
4
5
title: {{ title }}
date: {{ date }}
categories:
tags:
images: "/images/摘要配图/"

推荐几个其他主题美化的链接：
Hexo搭建博客的个性化设置一
Hexo搭建博客的个性化设置二
Hexo搭建博客的个性化设置三

如果在搭建有问题的童鞋，可以给我留言，我理解你们那种出现问题想要快点解决的心，我自己之所以开始坚持写文章，是希望能给别人，更多的借鉴！

(*^▽^*)