hexo脚本编写指南（二）

有用脚本大全

---

查询版本

  hexo.extend.helper.register('hexo_version', function() {
    return this.env.version;
  });

调用

<%- hexo_version() %>   ///3.8.0

---

添加多语言url

一般来说 涉及多语言，我们是利用url中是否有en，zh-cn等关键词来看这个页面是否是某种语言
一种方法是修改config属性

permalink: :lang/:title，
new_post_name: :lang/:title

但是这样的弊端就是只对post有效而已，index页面url由于本身不带有标识符号，不太好判断是否是中文还是英文

其实可以利用函数来实现相关功能而不更改config

hexo.extend.helper.register('canonical_url', function(lang) {
  var path = this.page.canonical_path;
  if (lang && lang !== 'en') path = lang + '/' + path;

  return this.config.url + '/' + path;
});

• this.page.canonical_path url 完整路径 不包含域名
  -- 举例
  -- categories/cate1/index.html（cate页）
  -- index.html（首页）
  -- 2019/01/11/jjj/index.html（某post为jjj的页面）
• this.config.url 域名
  这段代码就是如果lang不是en，就添加成相关语言的 拼接好url后返回
  举例
  https//some.com/zh-cn/
  https//some.com/zh-cn/docs/

举例

  {% if page.layout == 'page' or page.layout == 'index' %}
    {% for lang in site.data.languages %}
      <link rel="alternative" hreflang="{{ loop.key }}" href="{{ canonical_url(loop.key) }}">
    {% endfor %}
  {% endif %}

如果page的layout是page或者是index，就开始循环

---

自动给文章添加锚点

原理：
一篇文章有h1 h2等等标题 我们希望
鼠标滑过时，为其添加动态锚点
即这样的状态

image.png image.png

初始代码为

（在markdown中，标题的写法）
### 安装前提

经过hexo render后，变成了下边的代码 这是初始代码

<h3 id="安装前提" >
    <a href="#安装前提" class="headerlink" title="安装前提"></a>
安装前提
</h3>

我们希望的是这样

<h3 id="安装前提" class="article-heading">
    <a href="#安装前提" class="headerlink" title="安装前提"></a>
安装前提
    <a class="article-anchor" href="#安装前提" aria-hidden="true"></a>
</h3>

先写css

.article-anchor
  margin-left: 10px
  display: none   //初始状态隐藏
  &:before
    content: "#"   //上层元素拼接 内容就是一个“#”
  @media print   //打印时不打印
    display: none !important
  .article-heading:hover &    //悬停时出现
    display: inline-block

希望的结构有了，css也有了，开始利用helper插入html

hexo.extend.helper.register('page_anchor', function(str) {
  var $ = cheerio.load(str, {decodeEntities: false});
  var headings = $('h1, h2, h3, h4, h5, h6');

  if (!headings.length) return str;

  headings.each(function() {
    var id = $(this).attr('id');

    $(this)
      .addClass('article-heading')
      .append('<a class="article-anchor" href="#' + id + '" aria-hidden="true"></a>');
  });

  return $.html();
});

利用cheerio操纵文章整体元素，用法跟jquery一样

用法：
在页面中调用即可（swig语法）

 {{ page_anchor(page.content) }}

总结：

以后再介绍更多的有用函数