Pugjs(Jade) Template Engine Loading CSS File

pugjs(jade) template engine loading css file

try: link(rel='stylesheet', href='/stylesheets/style.css')


How to add css file link in pug

This might simply take a little messing around with finding the right location to use. I would imagine you need

link(rel='stylesheet', type='text/css', href='/feed.css')

Note the forward slash in front of feed.css. On the server side, you need something like the below if you are using express.

var express = require('express');
app.use(express.static('css'));

How to use the style tag with jade templates?

There are three ways of putting text inside your tags in Jade

1. Put text just after the tag e.g.

h1 Some header text

And the output will be:

<h1>Some header text</h1>

2. Put indented text below the tag with | e.g.

p
    | Some text goes 
    | here

And the output will be:

<p>Some text goes here</p>

3. Suffix the tag with a dot and indent your text below (with no |) e.g.

p.
    This way 3rd way of putting 
    text inside

And the output will be:

<p>This way 3rd way of putting text inside</p>

---

So based on the above, the approach you chose (as in your comment) is correct (option 3).

doctype 5
html(lang="en")
    head
        style(type='text/css').
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

I hope that will help.

How to use script. in JADE templates

Any inline scripts can be run like so

script.
  if (usingJade)
   console.log('you are awesome')
 else
   console.log('use jade')

from Docs.

Any external JS file can be loaded like so:

script(src="/path/to/script.js")

Also, you may want to be sure that you're actually using your layout file. Jade recommends doing something like this:

extends ./layout.jade

Where you have a path to the file and have the extension attached. Though the extension may be optional because you specify the jade engine in app.js.

Let me know this helps!

Pug file not loading CSS

Typo in your link to bootstrap, you have boostrap:

link(rel='stylesheet', href='/stylesheets/boostrap.min.css', type='text/css')

Partial template in Jade/Pug with dynamic data

You can achieve this with mixins.

layout.pug

doctype html
html
  head
    ...
  body
    block content

pets-partial.pug

mixin petslist(pets)
  ul
    each pet in pets
      li #{pet}

pets.pug

extends layout

include pets-partial

block content
  h1 Dogs
  +petslist(dogs)

  h1 Cats
  +petslist(cats)

https://pugjs.org/language/mixins.html

In jade the syntax is slightly different then in pug 2.

Jade template engine / How to set a background image

The background image is set in the CSS of the page. And that has almost nothing to do with Jade.

So, in your page CSS:

body {
    background-image: url(/images/img1.jpg);
}

Or using a class that you then assign to one of the elements in your jade template:

.bkimg {
    background-image: url(/images/img1.jpg);
}

and the jade:

body.bkimg
    p this is a fine body

The same applies for any element type.

Dynamic url for a tag in Pug (Jade) template

Check out this section in the documentation.

https://pugjs.org/language/interpolation.html

html
  head
    title=title
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  body(style={'background-color': color })
    #content 
      .bigquestion=message
      | <div class='questionnumber'>
      a(href=`/question/`+ questionnumber) #{questionnumber}
      | / 
      =totalnumberofquestions
      | </div>

---

Related Topics