美文网首页Hexo
hexo脚本编写指南(一)

hexo脚本编写指南(一)

作者: 这是我用来记录技术的一个博客 | 来源:发表于2019-01-12 01:41 被阅读2次

    说明

    • 脚本可以实现所有插件可以实现的功能
    • npm插件是分享给大家用的小脚本而已
    • 脚本需要掌握hexo api 地址在此

    调用

    脚本(Scripts)
    只需要把 JavaScript 文件放到 scripts 文件夹,在启动时就会自动载入。

    最简单用法

    比如我们写一个hello.js,放到scripts下,我们利用hexo.extend.helper辅助函数来写点儿东西

    hexo.extend.helper.register('js', function(path){
      return '<script type="text/javascript" src="' + path + '"></script>';
    });
    

    在index.html模板中调用

    <%- js('script-demo.js') %>
    // <script type="text/javascript" src="script-demo.js"></script>
    

    其实就是函数调用,很方便 很实用。

    生成器(Generator) 详解

    第一个小例子

    第一步

    让我们再创建一个js文件
    /scripts/hello2.js

    hexo.extend.generator.register('gen', function(locals){
        return {
          path: 'gen/index.html',
          data: locals.posts,
          layout: ['gen']
        }
      });
    

    第二步

    在主题模板里面创建一个名为gen的模板,里面随便写点儿什么

    说明

    以上的含义就是:

    • 当hexo g时,创建一个path为“gen/index.html”的静态文件,
    • 如果访问http://localhost:4000/gen/index.html,url就指向了这个文件
    • 这个文件的layout模板是gen
    • index.html里面的内容其实是content内容 直接引用到头尾中间

    这个功能就是利用代码创建了一个页面

    第二个小例子

    建立有分页的一个新页面

    第一步

    创建新的js
    /scripts/demo.js

    var pagination = require('hexo-pagination');
    
    hexo.extend.generator.register('demo', function(locals){
      return pagination('demo/index.html', locals.posts, {
        perPage: 3,
        layout: ['archive', 'index'],
        data: {__index:"demo"}
      });
    });
    

    第二步

    创建几篇文章 我利用hexo new post 创建了5篇 post01 post02 post03 post04 post05
    因为我设置了perPage为3,所以必然会分页

    第三步

    运行 hexo g
    可以看到 静态文件已经生成 并且自动创建了分页


    image.png

    需要注意的是 文件夹的名字叫index.html

    第四步

    手动敲入 http://localhost:4000/demo/index.html/
    得到的是以archive为模板的一个页面 而且分页已经生成好

    image.png

    需要注意的是 第二页的url为 http://localhost:4000/demo/index.html/page/2/
    完全符合分页的生成规则 [base(demo/index.html)+"/"+page/d%]

    第三个小例子

    自动生成指定路径的页面

    第一步

    scripts/demo.js 再添加新代码

    hexo.extend.generator.register('post', function(locals){
        return locals.posts.map(function(post){
          return {
            path: "book/"+post.path,
            data: post,
            layout: 'post'
          };
        });
      });
    

    第二步

    hexo g
    这样就出现了一个book文件夹 内部的文件夹结构与post的原生结构一模一样


    image.png

    其实也十分好理解 因为我本身用的就是post.path

    第三步

    输入 http://localhost:4000/book/2019/01/12/post03/
    其所有东西与 http://localhost:4000/2019/01/12/post03/一模一样
    因为我用的是同一个布局和同一个data,仅仅是更换了路径而已

    总结

    我们知道 生成一个页面只需要返回一个包含path layout data 三项的对象即可
    生成多个页面 可以返回一个包含多个页面对象的数组
    通过Generator的用法 我们可以得到任意我们想要的一系列页面

    更多generator说明请查看官方文档

    相关文章

      网友评论

        本文标题:hexo脚本编写指南(一)

        本文链接:https://www.haomeiwen.com/subject/yvixdqtx.html