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:
配置文件中 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 文件下载并放在指定路径下。