I'm currently following this Jade tutorial https://www.youtube.com/watch?v=l5AXcXAP4r8 (I know Jade is Pug now but I'm watching jade tutorials to get familiar with it since many don't exist for pug) and at 24:25 the instructor places an 'extends filename' in the middle of his index.jade file. This works fine for him but this does not work for me when executing with pug. I get an error in my terminal saying "Declaration of template inheritance ("extends") should be the first thing in the file." Is it not possible in pug to put an extends in the middle of a file and it used to be possible with jade? Is there any way to make it possible? Thank you in advance for your help!
This is not possible with pug. The error message is fairly clear, extendsmust be the first thing in the file, it cannot be placed in the middle. Without any code (or idea of what you're trying to achieve), it is difficult to tell if you could find a workaround for this (using mixins perhaps?).
Related
I have a webpage that I have the JavaScript in a separate file from my HTML file. I have imported
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in my HTML file but when I attempt to work in my js file to make some updates after a while away I get the following error
ERROR: '$' is not defined.[no-undef]
ERROR: 'document' is not defined. [no-undef]
Example where the above errors are references in my js code:
$(document).ready(function () {
$("#screenNum").hide();
...
}
The document Renders in the browser with no issues and the JS functions as designed and when I look at the developer tools in the browser there are no errors. I would like to get rid of these errors so that I can focus on actual errors.
It has been a couple years since I have worked on this document and I wanted to make some enhancements to it and am just now getting back to it. I do not recall this error when I last worked in it in Dreamweaver and do not know what I am missing.
All the similar questions I have looked at similar to this seem to deal with when the JavaScript is in the HTML document and not in a separate file.
Thank you, Tim Hunter, adding the below code worked perfectly.
/* global $, document*/
I am running into the problem that I have a 'main layout' which gets extended by other pug files, defining the layout for specific sites.
Example:
main.pug
Path: /we [we.pug extends main.pug]
However, when I start to have routes like /we/are/nice/because which are just specifications of /we and I would like to use the same main.pug, I run into the problem that by the way NodeJS renders the pug files, the src/href paths of JS and CSS includes are off (eg: https://localhost:3001/we/are/nice/script.js won't be found because it is supposed to be at localhost:3001/script.js)
Is there a simple way to fix this issue, or do I need specific main.pug files for all path-depths ?
Have you tried pointing to absolute paths? So /script.js, instead of script.js, in an link/href attribute. This assumes, of course, that the files are served from a server like NodeJS (not by the filesystem).
I am in a situation where I have one anchor tag in pug template: The href tag is getting its value at runtime. This code was working with Jade but as soon as I take it to pug, It stops working
a.more(href='/posts/show/#{post._id}') Read more
in the above syntax #{post._id} is suppose the bring the data at runtime but it is not working as expected.
Please help me on this.
Just got it resolved by using the following line
href="/posts/show/" + post._id
Its kind of weird that they stopped support for jade syntax in pug.
Hello,
I have been trying to learn Node with Express for about a week now. So far I got the basics of how to build MVC on top of it, and using JavaScript proved easier and cleaner than I would have ever gotten with another server language (except Python, maybe). But let's get into one of my first problems and one of a few I couldn't solve myself.
I'm using the Jade templating engine and I love it. I love how simple it is to input Markdown into the template. You just say :markdown and it's there!
But then I got into a problem. It's all easy to parse and print Markdown, however how am I supposed to display a blog post, for example, that's been stored as Markdown text in the database, on screen? I tried:
each entry in posts
h1 #{entry.title}
:markdown
#{entry.text}
div#post-footer
#{entry.date}
But the # gets parsed as a Markdown header, not a Jade directive. How do I make it so I can display Markdown properly?
var md = require('marked');
res.render('template', {md: md, markdownContent: markdownContent};
then inside the template use
div!= md(markdownContent);
I've been trying to make blueimp-image-gallery work with Jade on my Node.js server.
I've followed the instructions and came up with this .jade page:
extends layout
block content
h1 Test
div(id='blueimp-gallery-dialog', data-show='fade', data-hide='fade')
div(class='blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls')
div(class='slides')
a(class='prev') ‹
a(class='next') ›
a(class='play-pause')
div(id='links')
a(href='http://mypage.com/1.jpg' title='Frente' data-dialog)
img(src='http://mypage.com/2.jpg' alt='Frente')
a(href='http://mypage.com/6.jpg' title='Piscina' data-dialog)
img(src='http://mypage.com/6.jpg' alt='Piscina')
a(href='http://mypage.com/0.jpg' title='Garagem' data-dialog)
img(src='http://mypage.com/0.jpg' alt='Garagem')
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
script(src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')
script(src='http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js')
script(src='js/blueimp-gallery.min.js')
For some reason all I see are static links to the pictures referenced above. When I click them, instead of see the galery as the example show I get redirected to the image link itself.
Blueimp-image-gallery pages states a few requirements, but I'm not sure if I need them or how to install them.
Can you help me to make it work?
Check your javascript console to see if there are any javascript errors on the page. If there are, they should give you a place to start when looking for a fix!