Hexo Material 主题设置

Author Avatar
dev.liang 3月 20, 2017
  • 在其它设备中阅读本文章

Material

最近搭建了用 Hexo 搭建了博客,使用的 Material 主题,效果还是挺不错的,搭建的过程中遇到不少问题,一开始搭建 博客的操作,大家参考 Hexo 官网的文档基本就可搞定,在这里主要记录添加多说评论以及其他 Hexo 主题样式上遇到的问题。

多说评论

为 landsape 添加评论

最初搭建好博客的时候,使用的是系统默认主题 landsape ,添加多说步骤比较简单,如下:

创建多说站点后,在 Hexo 根目录下的 _config.yml 文件里添加如下配置:

1
duoshuo_shortname: 你站点的 short_name

在 themes\landscape\layout_partial\article.ejs 里把

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.disqus_shortname %>'};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>

PS:

image

配置文件中 duoshuo_shortname 中的 shortname 是你创建站点后的域名的名字,eg: liang.duoshuo.com,则 shortname 就是 liang。

执行 hexo s 在本地即可查看修改效果;

为 Material 主题添加评论

现在 Hexo 用的是 Material 主题,主要配置有以下两个地方:

在目录 Material 下 _config.yml 中按如下进行修改

1
2
3
4
5
comment:
use: duoshuo
shortname: liang
duoshuo_thread_key_type: 7e70fd*********e7b6c6351 (个人基本-->基本设置-->密钥)
duoshuo_embed_js_url: "https://static.duoshuo.com/embed.js"

当配置了这些后,运行本地查看多说还是没有添加上或者报关于多说的未定义 duoshuoQuery 这样的错误时,打开 layout/_partial/footer-option.ejs,把19行

1
2
3
var duoshuoQuery = {
short_name: '<%= theme.comment.shortname %>'
};

修改为

1
2
3
window.duoshuoQuery = {
short_name: '<%= theme.comment.shortname %>'
};

就可以了。

代码高亮

为 Material 主题设置代码高亮

目前使用的是 highlight.js 具体可点开查看多种使用方法介绍,或去简单说下我目前配置的方法,大家可作为参考。

找到 hexo 下 Material 主题的网站 HTML 入口,在 head 标签里配置你所要设置的样式文件的引用

eg:

1
<link rel="stylesheet" href="/css/highlight/solarized-white.css" type="text/css">

在 body 标签里 配置 js 文件

1
2
3
4
5
6
7
8
9
10
<!-- Code hight light-->
<script src="/js/highlight.min.js" type="text/javascript"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
$(document).ready(function() {
$('.code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>

配置完成即可使用,想尝试其他方式的可查看 github 上提供的其他方式,css 样或 js 文件可在 highlight.js 查找下载使用。
PS: 需要提前把 css 和 js 文件下载并放在指定路径下。