Next主题优化和配置笔记

本文是我配置Next主题的笔记,记录一些关键点和有价值的内容,包括外观自定义,禁用页面缩放,阿里云OSS+CDN托管Google字体,自行托管Javascript文件,侧栏加入站点运行时间,设定首页和归档页分页,自定义鼠标指针,一键生成/预览/部署脚本等

环境

Node.js: 10.15.3 (x64)

Git: 2.21.0.windows.1

Hexo: 3.8.0 & hexo-cli: 1.1.0

Next: 7.1.1

以上版本可以在相应命令行里用-v或者–version查看

原则

尽可能只修改以下文件:

Hexo站点配置文件_config.yml,位于Hexo站点根目录../Hexo/

Next主题配置文件_config.yml,位于Next主题根目录../Hexo/themes/next/

Next主题自定义css文件custom.styl,位于../Hexo/themes/next/source/css/_custom/

复杂一点的功能,需要修改../Hexo/themes/next-reloaded/layout/目录下的文件

子主题和外观自定义

子主题为Mist7.1.1

外观部分主要是借助修改Hexo站点配置文件_config.yml,Next主题配置文件_config.yml,Next主题自定义css文件custom.styl来实现的。除非必要请不要改动Hexo或主题的源码,容易让你的思路混乱,出错了不好还原,另外也不利于版本升级。

修改custom.styl文件时请在每一段自定义css前面用//加上一行注释,方便回溯。

自定义css主要借助Chrome浏览器的F12控制台,结合inspect工具定位代码,以及在Elements>Styles中调试代码,满意后copy到custom.styl中即可,这部分需要新手在实践中提升动手能力。

特殊配置

禁用页面缩放

开启Valine评论后,我发现在移动端点击评论输入框,浏览器会自作主张地放大页面(为了让我看的更清楚),而且输入完毕后不会还原,需要手动缩放回来,这样既不美观也不方便。

解决方法:修改../Hexo/themes/next-reloaded/layout/_partials/head/head.swig文件

在文件顶部的<meta>区新增一行:

1
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

这行代码定义视窗锁定在原始大小,不允许用户手动缩放(微信/QQ内置浏览器不可以缩放,Safari/Chrome仍可以手动缩放),无论如何,点击Valine评论输入框时,将不会再出现窗口自动放大的问题了。

阿里云OSS+CDN托管Google字体

通过解析从字体CDN服务器返回的font-family文件,统一替换字体url为自建oss,添加镜像回源,实现将Google字体托管到自建阿里云OSS+CDN,保证网络字体加载的可用性和稳定性。

首先要在Next主题配置文件_config.yml中的Font Settings部分将enable设为true,设置host,把你需要的字体都设置好,保存。

1
2
3
4
5
6
7
8
font:
enable: true
host: https://fonts.googleapis.com
global:
external: true
family: //设定为你要的字体
size: //可留空
...

然后打开localhost查看本地网站,在Chrome的调试台的Network选项卡下找到来自https://fonts.googleapis.com返回的一个字体样式表.css文件,具体名字是css?family=...这样的,右键把它保存到本地命名为font-face.css。打开看这个表里会有数百个形如

1
2
3
4
5
6
7
8
/* vietnamese */
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v13/7Auwp_0qiz-afT3GLRrX.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

这样的代码块,用Notepad++打开,把里边的链接https://fonts.gstatic.com批量替换为你的OSS域名,然后上传到OSS的根目录。在OSS里配置镜像回源,回源地址为https://fonts.gstatic.com,这样就会自动抓取所需的Google服务器上的字体到OSS里,然后再返回到客户端。

还需要修改主题目录下的文件external-fonts.swig-表示删除,+表示增加

1
2
- <link rel="stylesheet" href="{{ font_host }}/css?family={{ font_families }}"/>
+ <link rel="stylesheet" href="https://oss地址/font-face.css"/>

注意:最好有一个备案了的域名,用于开启CDN,否则影响自建字体CDN的效果。

特别感谢:http://www.mzyyun.com/study/google-fonts-cdn.html

自行托管Javascript文件

如果你的服务器访问速度快或者有上CDN,那么和上边的道理类似,但是可以简单地把js文件保存到../Hexo/themes/next/source/js/文件夹里,然后在Next主题_config.yml文件的Vendors选项卡里把相应的js的来源设置为https://www.yourdomain.com/js/xxx.js

有时候这样做的收益不是很明显,并且需要手动去更新js文件了。

侧栏加入站点运行时间

参考这个大佬的方案:

https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html

编辑../hexo/themes/next/layout/_custom/sidebar.swig,加入以下代码

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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/27/2017 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

上面Date的值改为你自己的

然后编辑../hexo/themes/next/layout/_macro/sidebar.swig,在+号位置增加一行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        {# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}&nbsp;
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
+ {% include '../_custom/sidebar.swig' %}
</div>
{% endif %}

注意Next主题的_config.yml文件里的Blog rolls选项卡下要有链接,才能保证收起侧栏时运行时间动画的正常展示。

设定首页和归档页分页

在站点配置文件_config.yml的相应位置编辑:(其中index_generator已存在)

1
2
3
4
5
6
7
8
9
10
#首页分页
index_generator:
path: ''
per_page: 5
order_by: -date
#归档页分页
archive_generator:
path: 'archives'
per_page: 10
order_by: -date

我尝试用以下代码把标签页和分类页也进行分页,但是不生效,不知为何

1
2
3
4
5
6
7
8
9
10
#标签页分页,不生效 
tag_generator:
path: 'tags'
per_page: 3
order_by: -date
#分类页分页,不生效
category_generator:
path: 'categories'
per_page: 3
order_by: -date

自定义鼠标指针

打开../hexo/themes/next/source/css/_custom/custom.styl,添加如下代码

1
2
3
4
5
6
7
// 鼠标样式
* {
cursor: url("指针的ico链接"),auto!important
}
:active {
cursor: url("指针的ico链接"),auto!important
}

其中 url 里面必须是 ico 图片。来源:https://www.jianshu.com/p/f054333ac9e6

普通修改

很多都可以在Hexo站点配置文件_config.yml,Next主题配置文件_config.yml,Next主题自定义css文件custom.styl里完成。

注:只需保持hexo s的本地预览状态,你自定义的css,文章和页面的增删改,大部分_config.yml配置的修改,都会在文件保存后实时生效,不需要重新生成。

其他的修改可能需要重新hexo clean, hexo g, hexo s

一键生成/预览/部署脚本

厌倦了在命令行里反复敲击单调乏味的hexo clean, hexo g, hexo s, hexo d等命令,想要一键完成?很简单。

假设你的Hexo安装目录为:C:\Hexo

在任何位置(我是放在了Hexo目录下方便查找)新建一个文本文档,名为all-in-one.txt

根据你的需求从下边的代码中选择一个复制进去

#本地预览
1
2
cd  C:\Hexo&&hexo clean&&hexo g&&hexo s
pause
#一键部署
1
2
cd  C:\Hexo&&hexo clean&&hexo g&&hexo d
pause

第一个代码实现的是本地预览

第二个代码是一键生成和部署

记得修改代码里的C:\Hexo为你的目录。

修改文件后缀为.bat,你就得到了一个可执行脚本all-in-one.bat,直接运行即可。

写在最后

Less is more,保留最核心的功能,在美观大方实用的基础上,把更多的精力放在内容和性能优化上。

0%