使用 theme_inject 在指定目录下的所有子目录 html 中嵌入 css

[aoemon]

Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate.
请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。

Issue Checklist

• I am using the latest version of NexT.
• I have already read the relevant documents of Hexo and NexT.
• I have already searched for current issues, which does not help me.

---

Steps to reproduce the behavior

目前，我有一个需求：在指定目录下的所有子目录 html 中嵌入 css。

例如：在一级菜单 /a/ 下面定义有子菜单。进入 a 页面，我发现当页面存在子菜单时，内容与菜单边距稍大（默认为：.content {padding-top: 70px;} ）。我尝试在 source/_data/head.njk head 注入点通过 Nunjucks 模板引擎添加如下内容以覆盖默认样式：

{% if url.search("/a/") != -1 %}
  <style>
    .content {
      padding-top: 40px;
    }
    @media (max-width: 767px) {
      .content {
        padding-top: 20px;
      }
    }
  </style>
{% endif %}

这可以正常工作。即在 a 页面及其所有子页面中正确嵌入以上 css。

但同时会报以下错误：

$ hexo s 
INFO  Start processing
ERROR Process failed: _data/head.njk
Template render error: (/Users/shishuai/pages/hexo-blog/source/_data/head.njk) [Line 10, Column 16]
  Error: Unable to call `url["search"]`, which is undefined or falsey
    at Object._prettifyError (/Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/lib.js:36:11)
    at /Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/environment.js:567:19
    at Template.root [as rootRenderFunc] (eval at _compile (/Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/environment.js:637:18), <anonymous>:31:3)
    at Template.render (/Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/environment.js:556:10)
    at Hexo.njkRenderer (/Users/shishuai/pages/hexo-blog/themes/next-v8/scripts/renderer.js:27:27)
    at Promise.then.text (/Users/shishuai/pages/hexo-blog/node_modules/hexo/lib/hexo/render.js:60:20)
    at tryCatcher (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:729:18)
    at _drainQueueStep (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:93:12)
    at _drainQueue (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:15:14)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)

抱歉我对 Nunjuck 模板语法不太熟悉，我是否写的不太规范或哪里出错了？

Environment Information

Node.js and NPM Information

v10.16.3
6.10.3

[issue-label-bot[bot]]

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

[stevenjoezhang]

把

{% if url.search("/a/") != -1 %}

改成这样

{% if page.path.includes("/a/") %}

试试

[aoemon]

@stevenjoezhang 我试了下，报错如下（而且这样写无法在页面插入 css）：

INFO  Start processing
ERROR Process failed: _data/head.njk
Template render error: (/Users/shishuai/pages/hexo-blog/source/_data/head.njk) [Line 10, Column 24]
  Error: Unable to call `page["path"]["includes"]`, which is undefined or falsey
    at Object._prettifyError (/Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/lib.js:36:11)
    at /Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/environment.js:567:19
    at Template.root [as rootRenderFunc] (eval at _compile (/Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/environment.js:637:18), <anonymous>:31:3)
    at Template.render (/Users/shishuai/pages/hexo-blog/node_modules/nunjucks/src/environment.js:556:10)
    at Hexo.njkRenderer (/Users/shishuai/pages/hexo-blog/themes/next-v8/scripts/renderer.js:27:27)
    at Promise.then.text (/Users/shishuai/pages/hexo-blog/node_modules/hexo/lib/hexo/render.js:60:20)
    at tryCatcher (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/promise.js:729:18)
    at _drainQueueStep (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:93:12)
    at _drainQueue (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/shishuai/pages/hexo-blog/node_modules/bluebird/js/release/async.js:15:14)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

[stevenjoezhang]

好的，我知道原因了。head 注入点在 page 变量被赋值前，被 Nunjucks 预处理了，因此导致 page.path 为 undefined；如果直接修改 layout 目录下的模版就不会有这个问题。
这个改起来需要一些时间，不过你的需求其实可以绕开这个问题，那就是用 CSS 的相邻元素选择器

.sub-menu + .content {
  padding-top: 40px;
}

这样就不需要对路径进行判断。

[aoemon]

@stevenjoezhang 感谢！😀