首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Pug中嵌套的includes drop块内容位于错误的位置

Pug是一种高性能的模板引擎,用于生成HTML。它具有简洁的语法和强大的功能,可以帮助开发人员更高效地构建网页。

在Pug中,可以使用include指令来引入其他Pug文件的内容。而include指令中的drop块用于指定引入的文件中的内容应该插入到何处。

然而,当在Pug中嵌套的includes中使用drop块时,如果内容位于错误的位置,可能会导致渲染结果不符合预期。

为了解决这个问题,可以按照以下步骤进行调整:

  1. 确保include指令正确引入了目标文件。可以使用相对路径或绝对路径来指定文件位置。
  2. 确认目标文件中的drop块是否位于正确的位置。drop块应该在目标文件中的合适位置,以确保被正确插入到当前文件中。
  3. 检查目标文件中是否存在其他可能导致错误位置的代码。有时,其他代码可能会干扰drop块的正确插入位置,需要进行适当的调整。

总结起来,要解决Pug中嵌套的includesdrop块内容位于错误位置的问题,需要确保正确引入目标文件,并确认drop块位于目标文件中的正确位置。如果问题仍然存在,需要仔细检查其他可能导致错误位置的代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Butterfly布局调整———相关推荐版块侧栏卡片化

更新记录 2021-12-15:正式版v1.0 重写related_posts.js文件,沿用最新文章布局 调整与相关教程联动内容 思路解析 之前一直没有留意到,butterfly原生相关推荐版块和其他布局比起来实在是太突兀了...说干就干,首先,要定位这个侧栏卡片源码位置,用F12确定了它class为relatedPosts,然后在主题源码里全局搜索,发现这个居然不是在pug中生成,而是通过一个hexohelper函数来处理...然后就是找到related_posts.js关于html代码构建部分,按照上面分析出骨架和现有的变量进行拼装就OK了。...diff 代码 改动完成代码 2.因为原本版块是在文章下方,而现在我们需要把它改到侧栏。...所以需要修改[Blogroot]\themes\butterfly\layout\post.pug大约 26 行位置先移除在文章底部推荐版块。

1K50
  • 魔改笔记七:分类条及外链卡片

    碎碎念 最近广泛交友,在和朋友klcdm聊天,了解到了他按照洪哥教程添加了一个分类条,于是我想要,在和星港聊天,了解到他又有改了加载动画,而我加载动画还是可怜原版动画,于是心动我又想要了...然后将其添加到不同位置,比如我这里实现了添加到分类页面等位置,配合上pjax可以做到无刷更新,效果很好,打开文件[BlogRoot]\themes\butterfly\layout\category.pug.../pagination.pug 注意上方修改,需要将配置文件,分类页面的主题改成index,否则不会显示。...includes/categoryBar.pug +postUI include includes/pagination.pug 然后就是实现点击切换后,高亮部分跟随分类页面走部分,...如: 这是这篇文章参考文章对应标签,由于直接添加文字会被错误识别,这里仅放图片,可以对照着查看,这里不再多做解释。

    12110

    Hexo-Butterfly主题魔改

    \head.pug内容 在 //- font 配置下 //- global config 配置上空白部分写入以下代码(请直接复制粘贴,避免出现缩进错误 ❌) //- animate_css if...\additional-js.pug文件内部内容 在 if theme.pjax.enable 配置大项 baidu-push 小项下写入一下代码(请直接复制粘贴,避免出现缩进错误 ❌) V3.4.0.../bilibili-banner.pug 6.修改%brt\%config%\_config.butterfly.yml(请将%config%替换为你主题配置文件位置,如果在根目录请无视) 找到 CDN...1.前往%brt\themes\butterfly\layout\includes\新建一个名为gitcalendar.pug文件 在其内部添加以下代码(请直接复制粘贴,避免缩进错误 ❌): #gitcalendar.gitcalendar...\butterfly\layout\includes\additional-js.pug文件 在 script(src=url_for(theme.CDN.utils))上面加入以下内容 script

    2.5K20

    Botui Talk Robot

    botui.js 是一个简单聊天机器人框架,使用它可以完成简易脚本对话式交流。缺点是只能在自己设定逻辑内进行有限问答,而不是像真正 AI 那样智能会话。 ?...botui.js简介 静态资源下载 **由于本教程涉及所有修改对缩进格式等有严格要求,担心自己控制不好可以直接下载静态资源,将压缩包内butterfly文件夹复制到[Blogroot]\theme...\目录下覆盖现有主题文件夹即可跳过以下教程前4步,直接到主题配置文件_config.butterfly.yml参照第5、6两步修改配置项。...可以自定义修改按钮显示内容。 修改~\[blogroot]\themes\butterfly\layout\includes\widget\index.pug,注意对齐格式。...在~\[blogroot]\themes\butterfly\languages\zh-CN.yml添加相应译名 可能遇到bug 无法显示 切换页面侧栏就变成空白

    47110

    Hexo站点加载动画修改(齿轮效果)

    效果展示如下: (注意:该篇魔改教程会改动一些源文件,建议没把握小盆友先自行做好备份,避免造成不可逆错误) 教程链接:https://www.paddylin.top/post/4f69.html...操作 在themes\butterfly\layout\includes\loading目录下创建一个名为loaded.ejs文件,并将如下内容写入该文件: <% if (theme.preloader.enable...目录下,找到layout.pug文件。...结尾 慢慢改动源码时候也在不断探索,学习其中内容。...之前看到过一篇文章提到,自己没事查看源码,有一些文件语法根本没有学过,可以通过其中一些常见标记大概猜测每个代码是什么作用,进而逐渐掌握其中规律。确实是一种很好自我探索方法。

    1.3K10

    Hexo站点加载动画修改

    (注意:该篇魔改教程会改动一些源文件,建议没把握小盆友先自行做好备份,避免造成不可逆错误) 教程链接:https://www.paddylin.top/post/4f69.html 操作 在themes...\butterfly\layout\includes\loading目录下创建一个名为loaded.ejs文件,并将如下内容写入该文件: <% if (theme.preloader.enable)...目录下,找到layout.pug文件。...结尾 慢慢改动源码时候也在不断探索,学习其中内容。...之前看到过一篇文章提到,自己没事查看源码,有一些文件语法根本没有学过,可以通过其中一些常见标记大概猜测每个代码是什么作用,进而逐渐掌握其中规律。确实是一种很好自我探索方法。

    1.5K20

    Hexo + Butterfly 侧边栏公众号

    本人用是npm方式安装 hexo-theme-butterfly,后续魔改时更改文件都是【BlogRoot/node_modules/hexo-theme-butterfly】文件夹文件。...步骤 在BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget文件夹下新建card_wx.pug文件, 具体位置如下图:.../widget/index.pug引入上一步创建card_wx.pug文件。...具体位置如下图: 将以下代码复制到自定义custom.css,不会自定义css请阅读 Hexo + Butterfly 一些常见问题 一文关于【关于自定义 js 和 css 文件】部分。...important#49b1f5换成你自己主题色,另外还需要将 https://bu.dusays.com/2022/10/30/635e9c6a228a3.png 这个图片中二维码部分换成你自己公众号二维码

    58200
    领券