Hexo icarus主题小功能设置

Catalogue
  1. 1. 添加站长统计
  2. 2. 百度/谷歌验证站点
  3. 3. 百度分享按钮https站点不显示问题
    1. 3.1. 解决方案
  4. 4. hexo添加公益404
    1. 4.1. 创建404页面
  5. 5. 添加音乐播放器
    1. 5.1. 添加网易云音乐播放器
    2. 5.2. 支持https的音乐播放器
  6. 6. hexo同时部署多个repository
  7. 7. hexo添加代码一键复制功能
    1. 7.1. 参考

添加站长统计

我们通过站长统计来及时查看我们个人网站的浏览情况。首先,我们需要进行注册:站长统计
以下参考:添加cnzz站长统计

在theme的_config.yml中的末尾添加以下:(这部很重要,不添加web_id将无法显示出来)

1
2
# CNZZ id
cnzz: 这里填入你在站长统计注册后的web_id

在目录:主题的layout/_partial/添加文件为cnzz.ejs,内容如下:

1
2
3
<% if (theme.cnzz){ %>
Analyse with <script src="https://s4.cnzz.com/z_stat.php?id=<%= theme.cnzz %>&web_id=<%= theme.cnzz %>" language="JavaScript"></script>
<% } %>

注意:一定要采用https方式引入,否则chrome浏览器考虑安全性问题不会加载

最后进行显示,在路径layout/_partial/footer.ejs里面添加:

1
...PPOffice</a>.<%- partial('cnzz') %>

再次提醒注意在_config.xml中添加web_id,否则无法显示。当显示出来了,又有一个问题,那就是要填写查看密码了。
查看以下即可:【设置】如何设置查看密码?(此功能只限站长用户)

百度/谷歌验证站点

为什么要验证站点了,因为要搜索引擎进行收录,说白了就是让别人更容易搜索到你的网站,仅此而已。
首先需要到百度/谷歌站长统计中注册,以及验证:
Google网站管理员工具地址
百度站长工具
注册完后,进行输入相应的网站地址,然后选择html验证,将代码加入以下路径layout/_partial/head.ejs:(截取部分)

1
2
3
4
5
<head>
<meta name="baidu-site-verification" content="tqvy7RDErf" />
<meta name="google-site-verification" content="hjN29-PO_KfE-dgow-7hcz75xJj0qzZ6G2OkXZ3FVd8" />
<meta charset="utf-8">
....

然后发布到github中,再进行验证即可。

百度分享按钮https站点不显示问题

在主题中设置百度分享按钮之后发现一个问题,就是部署到github page之后不显示,但本地测试可以。之后F12调试,发现百度分享采用的是http,而github page则是https,chrome浏览器考虑安全问题,不允许加载导致线上百度分享按钮脚本未能加载。

解决方案

要让https站点加载,很简单,将百度分享脚本存放到可支持https的站点即可。这里我直接将百度分享脚本放到hexo的source目录下(hexo根目录的source下或者主题的source下都可以)

百度分享脚本可在一下地址下载:
百度分享脚本
下载之后解压,将static文件夹复制到source目录下即可。

然后找到主题中引用百度分享脚本的地方,我用的是icarus主题,则在themes\icarus\layout\share目录下的bdshare.ejs文件。修改改文件:

1
2
3
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
改为
.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

以上步骤完成,搞定。

hexo添加公益404

创建404页面

首先在博客根目录的source目录下创建404.md文件
然后你可以将页面设计成自己喜欢的样式与主题搭配或直接使用公益404页面。
公益404一般有以下两个选择:

这里我直接采用腾讯公益404,使用方式可参考腾讯404说明。
在404.md中添加一下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 404
layout: false
permalink: /404.html
---
<html>
<head>
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://minibox.coding.me" homePageName="回到我的主页"></script>
</body>
</html>

注意:一定记得在Front-matter添加layout: false,否则会使用默认layout进行页面渲染。
homePageUrl改成你blog地址即可。

测试是否正常需部署到github或你服务器之后才能,本地部署不行。

添加音乐播放器

想像一下,一边欣赏博客一边欣赏音乐是不是一件很美好的事情。

添加网易云音乐播放器

给hexo博客添加音乐播放器最简单最优雅的方式就是通过网易云音乐生成外链,引入自己博客即可,具体步骤如下:

  1. 在网易云音乐pc端找到你喜欢的单曲或歌单,点击生成外链:

  1. 进入生成外链页


可自定义播放器尺寸,选择是否自动播放,然后复制红框中外链代码放入hexo博客即可。是不是很简单呢,但是有个问题,网易云外链播放器暂时不支持https,所以如果你的博客是https站点,引入网易云音乐播放器后,你那可爱的小绿锁就没了,所以,是否引入自己考量。

支持https的音乐播放器

目前支持https的音乐播放器太少,找了好久才找到以下方式:
通过该项目插件可在博客引入支持https的音乐播放器。其内部也是基于网易云音乐实现。
简单做法就是在iframe标签中引入该插件提供的http连接即可,如下示例:

1
2
<iframe src="https://music.daoapp.io/iframe?song=287749&qssl=1&qlrc=1&qnarrow=0&max_width=50%&autoplay=1">
</iframe>

即将iframe标签的src属性值设置为插件提供的https连接即可。

该插件支持配置多个参数如,自动播放,大小尺寸,播放模式等,支持参数如下:

  • album=album_id
  • playlist=playlist_id
  • song=song_id
  • program=program_id
  • radio=radio_id
  • mv=mv_id
  • qssl=[0|1] default:0
  • qlrc=[0|1] default:0
  • qnarrow=[0|1] default:0
  • max_width=[100%|32rem|400px|something else] default:100%
  • max_height=[300px|something else] default:100%
  • autoplay=[0|1] default:1
  • mode=[random|single|circulation|order] default:circulation

只需将参数加入url后面即可,具体做法参考该项目文档实现。

hexo同时部署多个repository

同时部署多个repository:

  1. 备份作用
  2. 国内国外双部署,优化访问网络

部署一个repository时配置如下:

1
2
3
4
deploy:
type: git
repository: git@github.com:mickolechou/xxx.github.io.git
branch: master

通过如下方式同时部署多个repository,默认部署到所有repository的master分支。

1
2
3
4
5
6
7
deploy:
type: git
repo:
github: git@github.com:mickolechou/xxx.github.io.git
coding: git@git.coding.net:minibox/xxx.git
oschina: git@git.oschina.net:minichou/xxx.git
branch: master

也是在每个repository后单独指定部署分支,如下:

1
2
3
4
5
6
deploy:
type: git
repo:
github: git@github.com:mickolechou/xxx.github.io.git,master
coding: git@git.coding.net:minibox/xxx.git,master
oschina: git@git.oschina.net:minichou/xxx.git,master

hexo添加代码一键复制功能

最近使用hexo写博客时发现,有个功能很常用单hexo没提供,那就是代码一键复制功能。想着没有就自己简单实现一个呗,然后就开始各种查资料,果然让我找到了:clipboard.js

clipboard.js:复制文本到剪切板不再那么复杂,也不需要繁琐的配置或者加载臃肿的插件;最重要的,不再依赖Flash或者庞大的组件。

使用也很简单,首先js引入:

1
<script src="dist/clipboard.min.js"></script>

简单示例:

1
2
3
4
5
6
7
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="images/clippy.svg" alt="Copy to clipboard">
</button>

以上示例可实现点击button达到一键复制input中的内容。

  • Trigger :触发器即点击该button
  • Target :目标即所需复制的内容所在元素

接下来我将演示下我是如何通过clipboard.js在我的hexo中添加一键复制功能的。
基本思路:

  1. 首先在每个代码块中动态增加一个触发器button用于实现点击复制按钮
  2. 使用clipboard.js高级用法绑定触发器对应的目标元素
  3. 添加事件完成(成功或失败之后的操作)

主要代码:
在主题的source\js\目录下创建:copycode.js文件

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
27
28
29
30
31
32
33
34
35
36
(function ($) {
$('.highlight').each(function (i, entry) {
$(entry).prepend('<button class="copy-button invisible" data-clipboard-snippet><i class="fa fa-copy"></i></button>');
});
var clipboardSnippets = new Clipboard('[data-clipboard-snippet]', {
target: function (trigger) { return trigger.nextElementSibling.querySelector('.code'); }
});
clipboardSnippets.on('success', function (e) {
e.clearSelection();
showTooltip(e.trigger, 'check');
});
clipboardSnippets.on('error', function (e) {
showTooltip(e.trigger, 'close');
});
$(document).on('mouseleave', '.highlight', function (e) {
$(this).find('button').addClass('invisible');
}).on('mouseenter', '.highlight', function (e) {
$(this).find('button').removeClass('invisible');
});
function showTooltip(elem, msg) {
elem.firstChild.setAttribute('class', 'fa fa-' + msg);
window.setTimeout(function () {
elem.firstChild.setAttribute('class', 'fa fa-copy');
}, 2000);
}
})(jQuery);

然后引入在脚本即可,具体使用参考clipboard.js文档。

参考

  1. 百度分享集成
  2. 百度分享不支持Https的解决方案
  3. 163music-APlayer-you-get
  4. clipboardjs
Comments