feat(head and body template): 支持在front-matter中动态插入css和js，支持引入多个

lovelyJason commented 1 year ago

PR Type

[ ] Bugfix.
[x] Feature.
[ ] Code style update (formatting, local variables).
[ ] Refactoring (no functional changes, no api changes).
[ ] Build & CI related changes.
[ ] Documentation.
[ ] Translation.
[ ] Other... Please describe:

Description

当前hexo + volantis都支持以api和配置文件的形式在head头尾，body头尾中插入内容，其中本主题还支持插入ejs，但是少了一项需求，当url变化时，需要动态加载css或js，目前好像无法做到;以往我的操作是在模板中根据is_current函数去判定加载不同的js，但是太操蛋了。
在用markdown书写文章时，在front-matter中定义属性import.head_begin、import.head_end,、import.body_begin、import.body_end，如以下的front-matter

---
import
  head_begin: <link rel="stylesheet" href="xxx/xx.css" >
---

上述中的css代码会被插入到head.ejs中的这段位置

这样就能做到css或者js的动态加载，不需要将所有样式包全部怼进style.css里面；并且能在指定的页面插入js

用户使用需要注意，当你在某个页面中引入某些依赖于其他库比如jquery的的js，要确保你引入的js在jquery之后，可以通过浏览器调试查看；jquery在配置文件中plugins.globalJquery开启

传入单个文件，或者数组形式，以上示例是单个字符串，看一下数组的普遍使用场景，比如现在我们要生成一个二维码，利用jquery-qrcode插件

首先要导入这个插件的js，还要写我们的业务代码。业务代码比较少，如果再另起一份js文件，显得有点大炮打蚊子，所以直接在script标签对中写代码即可。注意yml格式的多行，换行用法，这里自行百度

新建一个md页面，front-matter配置

---
title: 测试文章
import:
  body_end: 
    - <script src="https://cdn.bootcdn.net/ajax/libs/lrsjng.jquery-qrcode/0.18.0/jquery-qrcode.js"></script>
    - >-
      <script>
        $('#qrcode').qrcode({width: 64, height: 64, text: '二维码内容'})
      </script>
---

<div id="qrcode"></div>

打开这个页面，看到二维码渲染成功

Others

Issue resolved:
Screenshots with this changes:
Link to demo site with this changes:

Tikas commented 1 year ago

这个 Pr 将会给自定义页面带来新的方式，非常不错的主意，可惜目前时间有限，css 运用方面还在学习，js 只能玩不明白了，后续再回来看看如何实现，以方便我在 pug 里进一步改进

Lete114 commented 1 year ago

嗯，我觉得这个提议很好，很有创意

不过我不建议写到主题里，而是把它做成一个 hexo 插件，这样所有的主题都可以使用该功能，非常棒

volantis-x / hexo-theme-volantis