当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(05)Hexo定制与插件

Hexo博客(05)Hexo定制与插件


写作

乱码问题

如果用notepad++编辑md文件,记得保证格式为utf-8,最好无BOM,经测试有BOM也没问题。

中文标题

永久链接中的:title变量是md文件名,在文章Front-matter的title变量才是显示在文章顶部的标题,所以可以实现文章的链接是英文而标题是中文

文章预览

在文章合适位置加上<!-- more -->,则首页会显示之前的内容为预览,这个是hexo提供的方式,任何主题都适用。
注意,<!-- more -->不能出现在文章开头,否则就会被视为无效。

代码高亮

freemind主题中使用Highlight.js实现代码高亮,但我博客上只是有黑色代码框,并没有根据语法注释而高亮。
研究后改为使用google-code-prettify代码高亮,参见:
Hexo博客(12)使用google-code-prettify代码高亮
http://masikkk.com/article/hexo-12-google-code-prettify/

公式支持

参见Hexo博客(13)添加MathJax数学公式渲染
http://masikkk.com/article/hexo-13-MathJax/

遇到的问题

(1)配置项冒号后要加一个空格,否则generate时会出错:

$ hexo g
FATAL end of the stream or a document separator is expected at line 11, column 9:
    timezone:
            ^
YAMLException: end of the stream or a document separator is expected at line 11, column 9:
    timezone:

(2)错误:TypeError: Cannot set property ‘lastIndex’ of undefined
hexo g生成博客时遇到错误:

TypeError: Cannot set property 'lastIndex' of undefined

刚开始上百度查,总是查不到点上,后来用了新出的搜狗英文搜索,一击命中。
解决方法是在配置文件_config.yml中将highlight选项的auto_detect设为false,完美解决。参考Hexo 3.2.0-beta.2 test result report #1627

(3)文章中的特殊字符导致生成失败
hexo g生成博客时遇到错误:

$ hexo g
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
  Error: expected end of comment, got end of file

原因:文章中有

echo ${#string}

导致hexo g失败,解决方法是将其放入3个反引号中成为代码块。

(4)使用<img>标签插入图片后必须加一空行,否则会导致后面的markdown解析错乱。markdown语法写的表格前后必须加空行,否则markdown解析错乱。


个性化定制

定制默认布局post中的Front-matter项

打开默认布局postscaffolds/post.md,可以看到其中有三个Front-matter项,我们可以添加想要的Front-matter项,以后使用此布局新建文章时会自动生成这些Front-matter项。

---
title: {{ title }}
date: {{ date }}
tags:
---

设置默认类别

修改hexo项目的_config.yml配置文件里的default_category配置项:
default_category: 开发

多标签tags

多标签格式[tag1,tag2,tag3]

标签和类别映射

如果想在博客中显示中文类别和标签,同时链接中的类别和标签想显示为英文,可以做如下映射:

category_map:
开发: dev
生活: life
科研: research
tag_map:
健身: fitness

以后文章的Front-matter中使用前面的中文进行分类和标签,链接中会自动显示映射的英文。
如果映射后发现之前的英文标签还在博客中,可以执行hexo clean清除生成的静态文件(public目录中)

设置网站根目录

如果想将hexo博客网站的根目录设置为yoursite.com/blog,可以在_config.yml配置文件里修改root配置项为
root: /blog/
此后主页变为yoursite.com/blog,比如hexo s预览时主页为localhost:4000/blog/

定制文章永久链接

修改hexo项目的_config.yml配置文件里的permalink配置项,hexo默认值为
:year/:month/:day/:title/,在url中加入了日期,由于我的md文件名都是见名知意的,没必要在url中加入日期,反而很乱,所以改为:
permalink: article/:title/
此后所有文章的链接变为yoursite.com/article/:title/,这里的:title指的是md文件的文件名,建议md文件名为英文,这样链文章链接也是英文,至于文章的中文标题,在每篇文章的Front-matter中的title: 中设置中文标题。
permalink:配置项中可用的变量参见:https://hexo.io/zh-cn/docs/permalinks.html

网站根目录与永久链接对url影响的区别

网站根目录针对整个网站的url,例如根目录设为/blog/,则所有页面的链接都会有前缀/blog/,包括归档、类别、标签这些非文章(非post)页面的链接。
永久链接只针对文章的url,不包括非post页面的url
假如根目录设为/blog/,permalink也设置为blog/:title,则所有文章的url会有两个blog前缀,即yoursite.com/blog/blog/:title
配置建议:
如果你的域名除了博客还有其他用处,比如域名主页是各功能索引,子目录/blog/是博客,/bbs/是自建的论坛,/private/是只能自己看的私有内容,则可以将网站根目录配置为/blog/,这样hexo博客只使用子目录/blog/
如果域名只做博客用,个人感觉没必要设置网站根目录,也不必考虑以后的功能扩展,待要扩展时再配置网站根目录重新生成一下即可。

设置归档页无需分页

hexo安装后自带一个叫hexo-generator-archive的插件,负责生成按年份、月份等归档的页面,即public/archives/中的2017,2016,…等目录中的页面,这些页面中只是文字标题列表,如果还分页会很麻烦,在根目录_config.yml中将per_page设为0即可,如下:

archive_generator:
  per_page: 0  # 将每页文章数设为0,表示不需分页
  yearly: true
  monthly: true
  daily: false

自定义网站页脚footer

一般主体的页脚都由themes/你的主题/layout/_partial/footer.ejs定义,编辑footer.ejs文件,改为自己想要的显示方式。

<p><% if (config.author){ %>
  &copy; <%= new Date().getFullYear() %> <%= config.author %>
  <% } else { %>
  &copy; <%= new Date().getFullYear() %> <%= config.title %>
  <% } %>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a> and <a href="http://getbootstrap.com/" target="_blank">Twitter Bootstrap</a>. Theme by <a href="http://github.com/wzpan/hexo-theme-freemind/">Freemind</a>.
</p>

Hexo博客添加归档侧边栏插件

Hexo提供了一个list_archives辅助函数,可以利用他生成按年份或月份归档的侧边栏插件。
list_archives辅助函数用法见 https://hexo.io/zh-cn/docs/helpers.html#list-archives

新建一个Widget插件,代码贴在里面,然后加载此插件即可。
在themes\free2mind\layout_widget目录下新建archive.ejs,将下面代码复制进去,与主题自带的其他Widget保持样式一致,然后在主题的_config.yml配置文件中的widgets:项添加archive插件即可启用。
我的代码如下,按年份归档:

<% if (site.posts.length){ %>
  <div class="widget">
    <h4><%= __('归档') %></h4>
    <%- list_archives({type: "yearly", format: " YYYY年 "}) %>
  </div>
<% } %>

Hexo博客添加豆瓣侧边栏

登录豆瓣账号后,可以在豆瓣收藏秀 中看到自己豆瓣的一个脚本,还能定制显示内容和显示格式,把这段脚本添加到想要显示的地方即可。

比如我们想添加到博客首页的侧边栏,在我使用的freemind主题中,侧边栏都是Widget,所以我们新建一个Widget。在/themes/freemind/layout/_widget目录下新建douban.ejs,把豆瓣收藏秀的代码复制进去,然后在主题的_config.yml配置文件中的widgets:项添加douban插件即可启用。

如果想要豆瓣侧边栏和主页上主题自带的侧边栏的样式一样,可以查看_widget文件夹下的其他插件脚本,参考其样式来美化一下豆瓣侧边栏,比如我最终的douban.ejs是这样的:

<div class="widget">
    <h4><%= __('我的豆瓣') %></h4>
    <ul class="blogroll list-unstyled">
    <script type="text/javascript" src="http://www.douban.com/service/badge/masikkk/?selection=latest&amp;picsize=small&amp;show=collection&amp;n=6&amp;hidelogo=on&amp;cat=drama%7Cmovie%7Cbook%7Cmusic&amp;columns=3"></script>
    </ul>
</div>

Hexo博客添加Flag Counter插件

Flag Counter插件可以统计各个国家访问你网站的IP计数,并以国旗的形式展示。
http://s09.flagcounter.com/index.html 网站上自定义展示方式,不用注册即可免费获取代码。

新建一个Widget插件,代码贴在里面,然后加载此插件即可。在themes\free2mind\layout\_widget目录下新建flag_counter.ejs,将Flag Counter官方给出的代码复制进去,与主题自带的其他Widget保持样式一致,然后在主题的_config.yml配置文件中的widgets:项添加flag_counter插件即可启用。

最终我的flag_counter.ejs内容如下:

<div class="widget">
    <h4><%= __('Flag Counter') %></h4>
    <ul class="blogroll list-unstyled">
    <a href="http://info.flagcounter.com/gJyR"><img src="http://s10.flagcounter.com/count2/gJyR/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_12/viewers_0/labels_0/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
    </ul>
</div>

参考


上一篇 Java-RMI

下一篇 Git基本操作

域名迁移公告
2017年12月20日起,本博客迁移到新域名madaimeng.com,旧域名masikkk.com不再更新内容,但将永久保持可访问!
阅读
2,365
阅读预计10分钟
创建日期 2016-04-07
修改日期 2017-12-03
类别
百度推荐