I installed the pug-bootstrap module in a nodejs project. I am trying to create a menu from a navbar.
I have done those files:
layout.pug:
include /node_modules/pug-bootstrap/_bootstrap.pug
index.pug:
extends layout
block head
+navbar("menu")
+nav_item("#", undefined, true)
string test
block body
h1= title
p Welcome to #{title}
the _bootstrap.pug contains the bootstrap css file : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css. But it is not loaded on the webpage.
Someone know why? And how to fix that?
Any help would be appreciate.
When you extend a part of a template with block, you're replacing any code that was already in that block, before. In this case, I assume that the head included a reference to that CSS file, which you're overwriting.
Generally speaking, use append instead of block for the head section (see this page from their docs). That way, previous content of parent templates is not overwritten.
In your usecase, I am doubtful whether you should be placing anything at all in that head block, since it is reserved for meta-tags, not for actual visible content. In other words: You'll need to move the code you have there to the body anyway, since visible document objects belong in the body, not in the head.
Related
I am making a static website using Wintersmith alongside the wintersmith-stylus and wintersmith-jade plugins.
I want to add a specific CSS file in a help page. The help page is based off the "layout" template. When I try to use a block to insert the stylesheet into the html head, I receive the following error:
Line ##: Unexpected identifier
layout.jade
doctype html
html
head
block head
link(rel="stylesheet" href="/styles/layout.css")
body
...
help.jade
---
template: layout.jade
---
//- Error inducing code
extends ./layout.jade
block head
link(rel="stylesheet" type="text/css" href="../styles/help.css")
//- end of error inducing code
...
Even if I move the extends and block head lines on top of the metadata block containing template: layout.jade, I still receive the same error. Removing extends ./layout.jade results in the error lines position moving from 40 to 5 in my case.
My guess is the error is caused by the wintersmith-jade plugin, but even if that's the case I'm lost for how I would go about fixing it.
Since I wanted to use both Stylus and Jade (with Jade for both content and templates), I ended up moving over to Harp. Harp not only has Stylus and Jade "built-in", but it's also slightly simpler than Wintersmith.
It's quite a workaround, but I'd say it's actually an upgrade at the same time.
I'm not using wintersmith-jade, but it looks like that plugin shouldn't affect the regular templates in /templates (which is what I think you're referring to).
Looking at templates/article.jade, it looks like you should use just extends layout instead of extends ./layout.jade.
The default templates also do not have the metadata block, but maybe that's necessary for the plugin you're using.
I am starting developing with Sailsjs and I would like to know how to divide a webpage into differents blocks.
for example :
in layout.jade i have
doctype html
html(lang="fr")
head
body
div(class='container')
div(class='row')
div(class='col-md-12')
block header
h1 header
div(class='row')
div(class='col-md-8')
block content
div(class='col-md-4')
block right
block footer
then in my controller1/index.jade i have
extends layout
append content
p
some content
So when I type http://myserver.com/controller1/index in the browser, it works.
How to append some code in the block right form the result of another controller ? (I don't want to append some code to the block right directly in the controller1/index.jade file, to make the file as shorter as possible).
So I guess we can call another method of the controller inside the jade file ?
For example i would like to put a code like :
append right
=call('controller2/action1')
at the end of the controller1/index.jade file.
The purpose of my question is to figure out how divide the html parts of a webpage like we can do it with php using include method (for example).
Thank you
Benjamin
First off, a caveat ... I am brand new to Stash. I've heard a lot about it but this is my first time actually playing with it. I get the concept, but am having a hard time figuring this one thing out.
I have a main "wrapper" file and everything within that wrapper stays the same. I would like the option however, to be able to toggle the sidebar on and off if I need to.
I wouldn't think I would need a totally separate layout wrapper would I?
Is there a way to use a boolean variable within stash? (e.g. 2col=TRUE) or am I thinking about it wrong?
Thanks in advance for your help!
Generally what I'd do here is setup multiple Stash gets within the wrapper. Then in your individual templates you can set both the sidebar and the main content area. For parts where you might be repeating content, like the opening and closing divs of a sidebar, you can always drop some snippets inside the stash.
You can also use exp:stash:not_empty [docs] to wrap around the div or container for your sidebar within the wrapper.
I usually use one wrapper for every template. It'll contain an {exp:stash:get name="content"} tag, like yours, which contains the only variable content within.
In my individual templates, I embed the wrapper at the beginning using a regular EE embed ie. {embed="includes/wrapper"}.
Then I stash the content to be inserted into the wrapper using the {exp:stash:set name="content"} tag.
This seems like what you're doing anyway.
If I want to conditionally show a sidebar, I might just pass a variable into the embed.
eg. {embed="includes/wrapper" show_sidebar="yes"}
In my wrapper I would do this:
{if embed:show_sidebar}
Sidebar stuff.
{/if}
Jade template inheritance in Jade is driving me mad...
The problem is that I would like to exclude a large bit of code to external template and then include it. When I do so everything gets f** up :/
Sample code:
!!!5
html(lang="en")
head
title sample title
body
header
div#someDiv
div#someContent
section#main
Let's say I want to exclude everything from top to div#someContent. Then I would have
include inc/header
section#main
This way code indentation goes wrong and everything is messed up :/ Can you point me to the right direction in including templates?
Thanks in advance!
This is not template inheritance, but includes (template inheritance is with block and extends keywords). I did try your code, and what it does with the include is insert "section#main" into "div#someDiv" instead of "div#someContent". Not sure if this should be considered a bug or what (how can the parser know if the added content should be inside the last item in the include file, or at the same level?). It doesn't seem to care about the level of indentation under the "include" statement.
However, if you DO use template inheritance, you can put an empty block at the end of your include:
!!!5
html(lang="en")
head
title sample title
body
header
div#someDiv
div#someContent
block content
Then you can append the block in your actual content file:
include inc/header
block append content
section#main
And this renders OK in the DOM (section#main is inside div#someContent). Depending on the structure of your views, you may be better off with "extends" instead of "include + block append". You can check Jade's GitHub doc for the details.
If I load a string containing HTML into a UIWebView, and that string contains objects (hyperlinks) that are relative to that string, i.e. , where there is some object with id "something," then the link works - click on it and the web view jumps to the referenced object.
What I want is to get navigation to a different file in my project, in other words as though the path to the different file were a URL.
I have found that if the href IS a URL, such as href="http://www.amazon.com", then the link works.
If I put the name of a file, OR the [NSBundle mainBundle] pathForResource: ] of that name, in the href, then the link does not work.
Is there some way I can generate the equivalent of a URL pointing to an HTML file that is in the project, so that an can link to that HTML file?
I found a solution at this link:
How to use Javascript to communicate with Objective-c code?
Essentially, the solution is to implement the UIWebViewDelegate protocol's shouldStartLoadWithRequest method, and "trap" a particular value of scheme. So my links, instead of saying something like:
<a href="http://someplace.location">
are like:
<a href="mylink://#filename.ext">
By catching attempts to load anything with scheme "mylink," I can use:
[[request URL] fragment]
within shouldStartLoadWithRequest, and get the filename.ext. I then release my previous UIWebView, load in the contents of the specified file, and make that the contents of a new UIWebView. The effect is that the links work with normal appearance, even though they are being implemented with my code. I return NO because I don't want the usual loading to take place. If the scheme is NOT mylink, I can return YES to allow normal operation.
Regrettably, I still have no way to jump TO a fragment within a web view. In linking to a real URL, you can say something like "www.foo.org#page50" and jump straight to wherever an object on the new page has an id of "page50." With my method, I can only go to the top of the page.
This is also not going to give me a "go-back" function unless I record the filenames and implement it myself.