Path: BlogHexo Next 使用配置

Hexo Next 使用配置

Github Pages 启用 HTTPS

GitHub Pages 现在已经免费提供数字证书，在 Github Pages 上创建的个人站点可以免费支持 HTTPS，操作流程如下：

  • 到 DNS 服务商网站，修改域名解析，删除原来的 A 记录，按照下面格式增加 4 条 A 记录，例如你的域名是 example.com ，效果如下表所示：
类型 名称 值
A example.com 185.199.108.153
A example.com 185.199.109.153
A example.com 185.199.110.153
A example.com 185.199.111.153

IP地址固定统一都是上面所列的4个，具体内容，参见 Setting up an apex domain

  • 然后打开 Github ，依次打开个人站点资料库->’Setting’->’GitHub Pages’->’Enforce HTTPS ‘
  • 如果 Enforce HTTPS 不能点选，等待，正常情况大约24小时不到，Enforce HTTPS 就可以启用了

启用 HTTPS 后，如果之前页面中有引用非 https 协议的资源(包括图片、脚本等各种链接资源)，比如 src=”http://code.jquery.com/jquery-3.2.1.min.js" 这样 http 协议的资源，需要修改为 https 协议 src=”https://code.jquery.com/jquery-3.2.1.min.js" 就可以正常运行，不会提示不安全。

npm 安装 hexo 卡住问题解决

用 npm 安装话经常出现卡住而导致无法正常安装，解决办法就是修改 npm 的安装源，这里选择淘宝 NPM 镜像，这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。。

npm config set registry https://registry.npm.taobao.org

一次解决所有卡顿问题！

Next 5.x 升级 6.x

  • 下载 Next 6 主题，解压缩并重命名为next6，放置于 \themes\ 目录下，这样保留旧版本的 next 主题，可以随时切换回去。
  • 修改站点配置文件 _config.yml，指定使用新主题
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next6
  • 修改主题语言设置
1
2
#language: zh-Hans  # next 5.x
language: zh-CN     # next 6

  • 修改主题配置文件\themes\next6\_config.yml，比较旧版本主题配置文件_config.yml中改动的地方，一一修改到新版本中。

  • 旧版本主题个性化定制的文件复制到新版本主题对应目录下:

    • next/source/css/_custom/*
    • next/source/css/_variables/*
    • next/layout/_custom/*

  • 执行命令:

      hexo clean  # 清理旧文件
  hexo d -g   # 重新编译/发布

博客文章评论之 Valine

  • 注册Leancloud，Valine评论系统其实是放在Leancloud上的，因此首先需要去注册一个账号，Leancloud官网，点我注册。
  • 注册完以后需要创建一个应用，名字可以随便起，然后 进入应用->设置->应用key
  • 拿到你的appid和appkey之后，打开主题配置文件 搜索 valine，填入appid 和 appkey
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid: xxxxx-xxxx # your leancloud application appid
  appkey: xxxxxxx # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  visitor: false # leancloud-counter-security is not supported for now.
  • 最后！记得在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去，带 http 或者 https 前缀。

5.x版本 Pisces 主题页面留白太多问题

修改 \themes\next\source\css\_schemes\Pisces\_layout.styl 文件中下面的字段内容：

1
2
3
.header{ width: 80%; } /* 80% */
.container .main-inner { width: 80%; } /* 80% */
.content-wrap { width: calc(100% - 260px); }

完整文件参见 这个地址。

首页文章增加阴影分割效果

1.修改文件 \themes\next\source\css\_custom\custom.styl，增加以下内容：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

2.修改文件 \themes\next\source\css\_common\components\post\post-eof.styl，注释掉以下内容

1
2
3
4
5
6
7
8
9
10
11
12
.posts-expand {
  .post-eof {
/*
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 8%;
    height: 1px;
    background: $grey-light;
    text-align: center;
*/
  }
}

首页文章阅读全文按钮样式修改

修改文件 \themes\next\source\css\_custom\custom.styl，增加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//首页文章阅读全文按钮样式
.post-button {
    margin-top: 30px;
    text-align: center;
}

.post-button .btn {
    color: #fff;
    font-size: 15px;
    background: #686868;
    border-radius: 16px;
    line-height: 2;
    margin: 0 4px 8px 4px;
    padding: 0 20px;
    border:none;
    -webkit-box-shadow: 0px 5px 30px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 30px -3px rgba(0,0,0,0.75);
}

.post-button .btn:hover {
    color: #000000;
    background: #ffffff;
}

文章中嵌入html页面

在文章中插入 iframe。

  • 直接使用 Hexo 标签插件

在 Markdown 文件中，可以直接使用 Hexo 标签插件来实现，在文章中插入 iframe。

{% iframe url [width] [height] %}
  • 直接使用 HTML 语句
1
<iframe src="http://example.com" width="700px" height="500px" frameborder="0" scrolling="no"></iframe>

指定在新窗口打开文章中的链接

  • 使用 Hexo 标签插件

在 Markdown 文件中，可以直接使用 Hexo 标签插件来实现，在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。方法如下：

{% link text url [external] [title] %}
  • 使用 HTML 语句

可以在 Markdown 文件或者 HTML 文件中采用下面的写法：

1
<a href="http://example.com/" target="_blank">Hello, world!</a>

让 Hexo 忽略编译指定文件或目录

写在前面

编辑保存后，一定要执行 Hexo clean 命令，然后再执行 hexo g -d 命令，否则不生效，这个有点坑。😥

Hexo 编译 站点目录 下的 source 目录下的文件。skip_render 参数设置的路径是相对于 source 目录的路径。

编辑 站点配置文件 \blog\_config.yml 的 skip_render: 位置，比如 GitHub 的 reaadme.md、404文件、搜索引擎验证文件等，都不需要 Hexo 进行编译，示例如下：

1
2
3
4
5
skip_render:
- readme.md     //排除 readme.md
- 404.html      //排除 404.html
- demo/**       //排除 /source/demo目录中所有文件
- demo/*.html   //排除 /source/demo目录中所有后缀为 html 的文件

修改文章内链接文本样式

将链接文本设置为 蓝色，鼠标划过时文字 颜色加亮，并显示下划线。

修改文件 themes\next\source\css\_common\components\post\post.styl，添加如下 css 样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

.post-body li a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

修改字体

编辑主题文件 themes\next\source\css\_variables\custom.styl，增加以下内容：

// 标题，修改成你期望的字体族
$font-family-headings = Georgia, sans

// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Georgia, Monaco, Menlo, monospace

// 正文字体的大小
$font-size-base = 16px

// 代码字体的大小
$code-font-size = 14px

修改代码块自定义样式

修改 CSS 样式文件后，基本都要执行 hexo clean 再编译/发布，才能生效。

打开自定义CSS： \themes\next\source\css\_custom\custom.styl 加入以下内容，可根据自己的情况进行调整：

1
2
3
4
5
6
7
8
9
10
11
12
// 代码块自定义样式``内的
code {
    color: #fc6423;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 2px 0;
    padding: 2px;
    border-radius: 3px;
}

侧边栏嵌入网易云音乐

修改 \themes\next\layout_custom\sidebar.swig，加入下面代码：

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=网易云音乐歌单ID&auto=0&height=90"></iframe>

上面的网易云音乐歌单ID改成网易云音乐某个歌单的ID，不是用户ID，参考链接。另外，专辑中一定不要有存在版权问题的歌曲，否则不能播放，也即是说，允许用户无条件下载的歌曲才可以。

部分内容参考以下博客：