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 %}
      
    {% endfor %}
  {% endif %}

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


自动给文章添加锚点

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


image.png
image.png

初始代码为

(在markdown中,标题的写法)
### 安装前提

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

安装前提

我们希望的是这样

安装前提

先写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('');
  });

  return $.html();
});

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

用法:
在页面中调用即可(swig语法)

 {{ page_anchor(page.content) }}

总结:

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

你可能感兴趣的:(hexo脚本编写指南(二))