如何在翡翠中包含一个css文件(无需链接)
我有这个玉文件:
!!! 5 html head title test include style(type='text/css') //- DOES NOT WORK! include test.css body //- works include test.css div //- works include test.css
输出:
$ jade -P test.jade rendered test.html $ cat test.html <!DOCTYPE html> <html> <head> <title>test include</title> <style type="text/css"> //- DOES NOT WORK! include test.css </style> </head> <body>body { color: peachpuff; } <div> body { color: peachpuff; } </div> </body> </html>
当然,我可以简单地链接的CSS文件,但我不想。
我没有testing它(不是在我的开发计算机ATM),但有一个机会做这样的事情可以工作:
!!! head title test include | <style type='text/css'> include test.css | </style>
顺便说一下,我find了HTML2Jade在线转换器,但不是Jade2HTML。 任何想法在哪里可以find它?
从玉文件 :
doctype html html head style include style.css body h1 My Site p Welcome to my super lame site.
它工作完美。
Arnaud的回答对我很有帮助,但是我发现这有点清洁:
doctype head title test include style(type="text/css"): include test.css
(type="text/css")
也是可选的,这取决于你的情况。
通过fs
作为数据,你可以
style !{fs.readFileSync("index.css").toString()}
在当前版本的Jade(0.35.0)中,只需要 include style.css
就足够了 。
完整的例子(考虑你正在编写index.jade,它位于views
文件夹中,而你的样式在assets
文件夹中):
!!! html head include ../assets/bootstrap3/css/bootstrap-theme.css include ../assets/bootstrap3/css/bootstrap.css body h1 Hi!
请注意模板中没有style
标签 ,它会自动插入玉(这是一个很好的function!)。
一个可能的解决scheme是:
style(type="text/css") #{css}
然后在res.render(...)
调用中传递css文本。