【反馈】：为什么配置文件中 injects.first注入的样式无效

lovelyJason commented 1 year ago

检查清单

[X] 已经搜索过，没有发现类似 issue。
[X] 已经将主题升级到最新版本。
[ ] 主题官网也存在这个问题。

复现地址

No response

复现步骤

我想引入一个css文件，比如文件的路径为：主题theme/source/css/iconfont.css, 就是一些字体图标，内容为

我想在first.styl中注入，因此配置文件_config.volantis.yml里配置了

injects:
  first:  # first注入无效？
    - iconfont.css

first.styl的源码：

按道理来说，自定义的样式上应该是会被追加到尾部的吧

然后我重启后看到的页面上是没有这个css的，我去主题源码中的FirstCSS这个help函数中查看，看看first.styl编译后的代码是什么

然后我尝试将配置项中的first改为style

injects:
  style: 
    - iconfont.css

这个时候样式是生效的，查看网站上的/css/style.css样式表是有追加内容进去的

我看volantis文档上的注入点是这样的

唯一不同是first样式是内嵌样式，为什么会有这种情况出现

配置文件

_config.volantis.yml

############################### injects ############################### > start
injects:
  first:  # first注入无效？
    - iconfont.css
############################### injects ############################### > end

环境信息

node.js & npm

``` v18.12.0 8.19.2 ```

package.json

``` ├── hexo-deployer-git@2.1.0 ├── hexo-generator-archive@1.0.0 ├── hexo-generator-category@1.0.0 ├── hexo-generator-feed@2.2.0 ├── hexo-generator-index@1.0.0 ├── hexo-generator-json-content@4.2.3 ├── hexo-generator-search@2.4.0 ├── hexo-generator-tag@1.0.0 ├── hexo-renderer-ejs@1.0.0 ├── hexo-renderer-marked@2.0.0 ├── hexo-renderer-stylus@1.1.0 ├── hexo-server@1.0.0 └── hexo@5.4.0 ```

lovelyJason commented 1 year ago

并且，我通过api的形式注入样式，他是生效的

hexo.extend.filter.register('theme_inject', function(injects) {
  console.log(injects)
  injects.first.push('source/_data/xxx.styl');
});

Tikas commented 1 year ago

怎么关闭了，是什么原因导致的呢，分享一下解决办法

lovelyJason commented 1 year ago

怎么关闭了，是什么原因导致的呢，分享一下解决办法

目前也没发现是什么原因导致的。关闭是因为我觉得在主题资源目录下新建css或者styl文件这种做法不太规范，应该在外部新建样式文件比较好维护

lovelyJason commented 1 year ago

怎么关闭了，是什么原因导致的呢，分享一下解决办法

而且怎么说呢。我觉得在配置文件中injects[point]这种做法它不太好以及木有应用场景啊，这种设计是不是有点缺陷？首先来说，这个路径就是个问题，在主题资源文件夹下的自定义样式，在injects[point]中是以主题资源文件夹的css作为参照目录的，比如我写的iconfont.css，就会去theme/volantis/source/css中去寻找。

那么如果说我的自定义样式文件在blog/source/_css/a.css或者blog/source/css/css，下划线开头的会被忽略掉，这个路径怎么写？写不了的。这两种路径下的injects[point]都无法定义，因为找不到路径，因为比如源码中的theme/volantis/css/style.style这个里面就定义了这个，不能从外层导入,这是个相对路径吧（其实也是可以的，需要逐步往上找父目录，后文有介绍）。

#safearea{
  display: block
}

@import '_defines/*'

// Project
@import '_style'

// Custom Files
for $injects_style in hexo-config('injects.style')
  @import $injects_style;

通过api注入injects.first.push('source/_data/xxx.styl')就没这个问题了，因为插件是写在blog/scripts下，那么我就能基于这个博客路径去寻找样式文件路径，而配置项的injects[point]问题就在这里，它只能定义相对路径？

假设blog/source/css/a.styl或者blog/source/css/a.css，设置一些简单的样式`body { color: red; }`我尝试去修改theme/source/css/style.styl

#safearea{
  display: block
}

@import '_defines/*'

// Project
@import '_style'
// my code ,this is effect. css or styl
@import '../../../../source/css/a.styl' 
// Custom Files
for $injects_style in hexo-config('injects.style')
  @import $injects_style;

神奇的事情发生了，这个样式是生效的。

但是如果把这个固化在主题配置中，分成两种情况，是styl还是css

如果是styl

injects:
  style: [../../../../source/css/a.styl]

重启数次都看不到追加的样式

但是换成css

injects:
  style: [../../../../source/css/a.css]

神奇的事情发生了，嘿，您猜怎么着，它生效啊！！！

但是不知道为什么，要yarn clean然后再yarn server重启好几次才能生效

接下来，我们再把以上的style换成first

injects:
  first: [../../../../source/css/a.css]

clean, 重启n次都木有效果，页面上没有追加的样式，但是，如果css换成styl

injects:
  first: [../../../../source/css/a.styl]

这个时候有效果

这时候，我们再回到本标题讨论的问题，把以上的css或者styl挪到主题的资源目录source/css下，为相对路径的css追加first

injects:
  first: [a.css]

这个时候，样式按照本issue预期的结果，没有生效

把css换成styl试试

injects:
  first: [a.styl]

我重启了服务好多次，发现样式追加成功

总结

还是有点麻烦的，我发现自己都被绕进去了出不来通过配置主题配置文件的injcts[point]，这里暂时讨论的是不带下划线_的样式表所在目录

在主题资源的css目录下的自定义css, 追加到first失败，追加到style成功
在主题资源的css目录下的自定义styl，追加到first成功
在博客资源目录下的自定义css，追加到first失败，追加到style成功
在博客资源目录下的自定义styl，追加到first成功，追加到style成功

而且要重启好几次服务才行不知道为什么

而且，有一点我不明白的是，styl中引入css按道理也是可以的，styl也支持css的语法，只是如果styl中引入css这么写，显得有点不伦不类罢了

Tikas commented 1 year ago

哈哈，感谢您的解答，之前我也是在想，这应该是路径导致的，然而，由于手上电脑没有配置环境，加上您又关闭了此问题，我想应该是有相关解决方法。

是的，非常不错的想法。

styl 里渲染 css 时，会自动忽略 "_style" 的 style 文件夹，需要使用 @import '_style' 进行引入才能渲染，而 config 配置文件直接引入 '_style/style.css' 竟然也是会忽略，这一点提醒了我，后续处理相关 css ，需要特别注意，感谢提醒！

哈哈，竟然能看到实时修改，总结的很棒！

MHuiG commented 1 year ago

不要使用 injects 这个配置使用 blog/source/_volantis/ 文件夹来自定义修改

https://volantis.js.org/v5/development-api/?keyword=blog/source/_volantis/%20%E6%96%87%E4%BB%B6%E5%A4%B9

https://github.com/volantis-x/community/tree/main/source/_volantis

Volantis
开发文档
Volantis5 Development API for Volantis 样式文件说明/source/css/Readme.md 全局变量volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。源码参考：layout/_partial/scripts/global.ejs VolantisApp我们提供了全局变量 VolantisApp 和

GitHub
community/source/_volantis at main · volantis-x/community
Volantis Community 社区主页 https://volantis.js.org. Contribute to volantis-x/community development by creating an account on GitHub.

lovelyJason commented 1 year ago

不要使用 injects 这个配置使用 blog/source/_volantis/ 文件夹来自定义修改

https://volantis.js.org/v5/development-api/?keyword=blog/source/_volantis/%20%E6%96%87%E4%BB%B6%E5%A4%B9

https://github.com/volantis-x/community/tree/main/source/_volantis

Volantis开发文档 Volantis5 Development API for Volantis 样式文件说明/source/css/Readme.md 全局变量volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。源码参考：layout/_partial/scripts/global.ejs VolantisApp我们提供了全局变量 VolantisApp 和

GitHubcommunity/source/_volantis at main · volantis-x/communityVolantis Community 社区主页 https://volantis.js.org. Contribute to volantis-x/community development by creating an account on GitHub.

没错，我现在是这么干的

Volantis
开发文档
Volantis5 Development API for Volantis 样式文件说明/source/css/Readme.md 全局变量volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。源码参考：layout/_partial/scripts/global.ejs VolantisApp我们提供了全局变量 VolantisApp 和

GitHub
community/source/_volantis at main · volantis-x/community
Volantis Community 社区主页 https://volantis.js.org. Contribute to volantis-x/community development by creating an account on GitHub.

Volantis
Volantis
Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。

volantis-x / hexo-theme-volantis