Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
May 6, 2023

Conversation

lovelyJason
Copy link
Collaborator

PR Type

  • Bugfix.
  • 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中的这段位置
image

这样就能做到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>

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

image

Others

  • Issue resolved:

  • Screenshots with this changes:

  • Link to demo site with this changes:

lovelyJason and others added 6 commits April 26, 2023 18:08
<滚动条样式从配置文件传入> [source/css/_first/base_first.styl, _config.yml]
<手机菜单单下拉菜单再次点击收缩失败><source/js/app.js>
- 当前hexo + volantis都支持以api和配置文件的形式在head头尾,body头尾中插入内容,其中本主题还支持插入ejs,但是少了一项需求,当url变化时,需要动态加载css或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或者js的动态加载,不需要将所有样式包全部怼进style.css里面;并且能在指定的页面插入js

用户使用需要注意,当你在某个页面中引入某些依赖于其他库比如jquery的的js,要确保你引入的js在jquery之后,可以通过浏览器调试查看;jquery在配置文件中plugin.globalJquery开启
- 当前hexo + volantis都支持以api和配置文件的形式在head头尾,body头尾中插入内容,其中本主题还支持插入ejs,但是少了一项需求,当url变化时,需要动态加载css或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或者js的动态加载,不需要将所有样式包全部怼进style.css里面;并且能在指定的页面插入js

用户使用需要注意,当你在某个页面中引入某些依赖于其他库比如jquery的的js,要确保你引入的js在jquery之后,可以通过浏览器调试查看;jquery在配置文件中plugin.globalJquery开启
@lovelyJason lovelyJason requested review from inkss and MHuiG May 1, 2023 12:21
@github-actions github-actions bot added JS Pull requests that update Javascript code Layout Pull requests that update a layout file labels May 1, 2023
@lovelyJason lovelyJason changed the title Dev feat(head and body template): 支持在front-matter中动态插入css和js,支持引入多个 May 1, 2023
@Tikas
Copy link
Member

Tikas commented May 2, 2023

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

@lovelyJason lovelyJason requested review from xaoxuu and removed request for inkss May 2, 2023 02:44
@Lete114
Copy link
Contributor

Lete114 commented May 5, 2023

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

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

@MHuiG MHuiG changed the base branch from dev to 6.0 May 6, 2023 09:32
@MHuiG MHuiG changed the base branch from 6.0 to dev May 6, 2023 09:32
@MHuiG MHuiG merged commit 3146360 into volantis-x:dev May 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
JS Pull requests that update Javascript code Layout Pull requests that update a layout file
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants