gpt4 book ai didi

node.js - Jade : modify from any place other than the main page

转载 作者:太空宇宙 更新时间:2023-11-04 00:55:40 24 4
gpt4 key购买 nike

更新:

我还将这个问题发布到 Jade GitHub 存储库。我也将其放在这里,以供将来(循环)引用: https://github.com/jadejs/jade/issues/1943

原帖:

在默认的 Node +express+jade应用程序中,我试图构建一些常见的可重用组件(菜单、页脚...),我可以将它们包含在某些页面中。我在尝试从 block 或包含的文件添加对 .css 或 .js 文件的引用时陷入困境。我想这样做是因为我不想包含所有不需要的样式和脚本。

文件夹结构是这样的:

<小时/>
    • 公开
      • javascript
        • main.js
        • 菜单.js
      • 样式表
        • main.css
        • 菜单.css
    • 观看次数
      • 已共享
        • 布局.jade
        • 菜单.jade
        • 页脚.jade
      • index.jade
<小时/>

layout.jade 文件:

doctype html
html
head
title= title
link(rel="stylesheet", href="stylesheets/main.css")
script(src="javascripts/main.js")
body
block content

index.jade 文件:

extends shared/layout

block content
h1= title
p Welcome to #{title}

在menu.jade中有一些代码需要menu.css和menu.js文件。

现在我需要一种方法将这些文件添加到 <head>仅当我使用 menu.jade 文件时才显示该页面。

我几个小时前开始使用 Jade,所以我很可能错过了文档中的某些内容。

谢谢!

最佳答案

您可以在 menu.js 中使用 jQuery 来完成此操作,如下所示:

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");

不过,我会提醒您注意这种做法。一种替代方法是使用构建步骤将所有 CSS 文件连接在一起,并在单个 css 文件中提供所有样式。 LESScssmin这里是不错的选择,并且它们有很好的模块,可以在 grunt 或 gulp 中为您自动执行此操作,无论您使用哪种。

您确实提到,如果您不需要它们,则不想包含所有样式,但我建议让网络浏览器下载许多小 css 文件会比下载一个大文件慢,特别是如果您通过像 nginx 这样使用 gzip 的网络服务器提供这些文件,或者如果您通过像 CloudFront 这样的 CDN 提供静态文件。 .

关于node.js - Jade : modify <head> from any place other than the main page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29972583/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com