Question

使用Hexo和Pug作为模板引擎，我有一个主要布局，我所有页面的默认值（layout.pug）：

doctype html
html
    header
    body
        block nav
            p hello
        // logic of page decision goes here
        div This is the footer of the page

我想将nav部分放在一个单独的文件中（p hello只是一个调试占位符）所以我创建了nav.pug：

extends layout

block nav
    div
        p --- navigation common to all pages ---

在构建网站时，我系统地将其作为HTML输出

<!DOCTYPE 5>
<html>
<header></header>

<body>
    <p>hello</p>
    <!-- logic of page decision goes here-->
    <div>This is the footer of the page</div>
</body>

</html>

nav区块未被替换，为什么？

使用--debug的构建显示已处理nav.pug：

PS D:\MegaSync\dev-perso\blog-vuetify\blog> hexo clean ; hexo g --debug
INFO  Deleted database.
INFO  Deleted public folder.
13:20:07.849 DEBUG Hexo version: 3.5.0
13:20:07.853 DEBUG Working directory: D:\MegaSync\dev-perso\blog-vuetify\blog\
13:20:07.975 DEBUG Config loaded: D:\MegaSync\dev-perso\blog-vuetify\blog\_config.yml
13:20:07.988 DEBUG Plugin loaded: hexo-generator-archive
(...)
13:20:08.367 DEBUG Plugin loaded: hexo-server
13:20:08.394 DEBUG Loading database.
13:20:08.401 INFO  Start processing
13:20:08.425 DEBUG Processed: _posts/second.md
13:20:08.427 DEBUG Processed: layout/index.pug
13:20:08.429 DEBUG Processed: layout/nav.pug      <--- HERE
13:20:08.431 DEBUG Processed: _posts/first.md
13:20:08.432 DEBUG Processed: layout/layout.pug
13:20:08.432 DEBUG Processed: layout/post.pug
13:20:08.503 DEBUG Generator: page
13:20:08.504 DEBUG Generator: post
13:20:08.505 DEBUG Generator: archive
13:20:08.505 DEBUG Generator: index
13:20:08.506 DEBUG Generator: category
13:20:08.506 DEBUG Generator: tag
13:20:08.507 DEBUG Generator: asset
13:20:08.510 INFO  Files loaded in 116 ms
13:20:08.514 DEBUG Rendering post: posts/second/index.html
13:20:08.521 DEBUG Rendering post: posts/first/index.html
13:20:08.523 DEBUG Rendering index: archives/index.html
13:20:08.525 DEBUG Rendering index: archives/2018/index.html
13:20:08.526 DEBUG Rendering index: archives/2018/02/index.html
13:20:08.528 DEBUG Rendering index: index.html
13:20:08.530 DEBUG Rendering index: tags/tech/index.html
13:20:08.699 INFO  Generated: index.html
13:20:08.702 INFO  Generated: archives/index.html
13:20:08.704 INFO  Generated: posts/second/index.html
13:20:08.705 INFO  Generated: posts/first/index.html
13:20:08.706 INFO  Generated: archives/2018/02/index.html
13:20:08.708 INFO  Generated: archives/2018/index.html
13:20:08.709 INFO  Generated: tags/tech/index.html
13:20:08.711 INFO  7 files generated in 201 ms
13:20:10.562 DEBUG Database saved

Answer 1

默认情况下，Hexo使用layout.[pug|ejs|etc]作为父模板来定义网站的结构，如果您尝试使用其他任何内容，它将被忽略。 Hexo处理资产或模板文件夹中的所有内容，包括实际上与页面不对应的模板。

如果您真的想以这种方式使用extends，则必须创建另一个您将在layout.pug内扩展的Pug模板，因此您目前在{{1}中拥有的代码必须进入nav.pug。

你可能会更好，但是，将导航变为部分，你也可以添加一些条件逻辑（例如：访问Hexo的全局layout变量以查看给定的链接是否与路径匹配并相应地应用样式）。然后，您可以使用path代替。

例如，你可以这样做。

<强> layout.pug

include nav.pug

<强> nav.pug

doctype html
html
    header
    body
        block nav
            p hello
        include nav.pug
        // logic of page decision goes here
        div This is the footer of the page

不处理继承的块

1 个答案: