Is there a way to add to the page title with js and pug, if I for example have a layout file with pug, which sets the page title to, say Aero -
And in the pug file extending the layout file, I want to append a string to that page title with something else, so it would display Aero - The added string.
Is this possible with some sort of interpolation?
Thanks :)
You can do something like that:
title Aero #{addedString}
meta(name='description', content="Aero" + addedStringDescription)
meta(property='og:title', content= "Aero" + addedString)
You can try using the block append functionality of pug.
In the layout.pug:
html
head
block head
title= 'Aero'
body
block content
In the template.pug:
extends layout.pug
block append head
title= title + 'The added string'
Related
I have multilingual single page html application where I set html of tags by calling function on document.ready. However I am not getting html of any tag in page source when I view page on View Page Source. How can I get the tags in page source? document.ready is in the last script tag of the page.
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
Below function is in js file. This file is added above the last script tag (i.e. document.ready script).
function translateFunction(lang) {
$("[tkey]").each(function (index)
{
var strTr = lang_resource[lang][$(this).attr('tkey')];
$(this).html(strTr);
});
}
<h1 tkey="firstH1"></h1>
Language wise data is in json format in the same js file with translate function.
When I view the page source, I see only
<h1 tkey="firstH1"></h1>
Where it needs to be like below,
<h1 tkey="firstH1">Anything from the translate function.</h1>
On the page, you can see the desired output, but in the page source, I am not getting html set. What I want to do is, I want set html of the tags in javascript on document.ready. How to do it?
EDIT
We want to add meta tags. And set keywords and description language wise. This is the main concern. The keywords and description are set in translate function. Will the crawler take the keywords and description?
We have two links language wise in site map. So when user select say french language, it will redirect to www.mysite.com?lang=fr and all the tags are set in french language. So the meta keywords and description.
Firstly if this is the exact code,
$(document).ready(function() {
var lang = // get the language.
translateFunction(lang);
});
there is error in itself...
there should be some value for var lang
I have been code a Hexo theme recently, now I stuck with the variables. I read the doc, but could not get much info.
For example:
On the last paragraph of the variables of the doc:
Tag (tag): Same as index layout but add the following variables.
Variable Description
page.tag Tag name
Is this means I could use 'page.tag' in tag layout? But what made a tag layout?
I have created a tag.jade, and a page named tags using tag.jade, and I also add some test tags in other articles,
In my tag.jade, I have
p= page.tag
But there is nothing output.
Also, the doc says
Same as index layout
But try to use page.posts ( I can use it in index.jade) in tag.jade, but undefined,
So What does it mean Tag (tag) in the doc, is it the scope of the variables? what makes these scope?
Sorry for my writings, I am really comfused about these variables.
You may have misunderstood the tag layout.
A tag layout is used for generate a tag cloud page, like my blog: http://blog.xcatliu.com/tags/
You don't need to write a page which layout is tag, instead, you can use https://github.com/hexojs/hexo-generator-tag to generate the tag page.
Assume I have main template file named layout.jade and a bunch of files that extend this template - home, about, products and so on.
In main template I put structure like this:
body
section.main-content
block content
Then pages:
extends ../layouts/default
block content
include partials/banner
include partials/why
So different pages put different content into content block accordingly. I render pages with gulp-jade and in the end I have all the pages as HTML.
My question is - can I put some variable inside child page, like about, so that it to go as a class to body tag of its parent template, like <body class="about">?
Here's a pattern I use for this type of situation. In your main template, set up some variables:
//layouts/default.jade
- var bodyClass;
block variables
html
head
body(class=bodyClass)
section.main-content
block content
Then establish the bodyClass in your page templates.
//about.jade
extends ../layouts/default
block variables
- bodyClass = "about"
block content
h1 This is the About Page
This is how I do my page titles for the <head><title> tag, for example. I can also have logic in the layout.jade file to provide default values, etc.
So for my Express site, I'm using jade. So I decided to try modifying my layout file so I can start designing my site. I modified the original layout code (which worked), but I started getting indentation errors in any file that extends layout like this:
500 Error: /home/kevin/Blue/views/layout.jade:6 4| p Hello World Invalid indentation, you can use tabs or spaces but not both
4| p Hello World
Invalid indentation, you can use tabs or spaces but not both
at Object.Lexer.indent (/home/kevin/Blue/node_modules/jade/lib/lexer.js:679:15)
at Object.Lexer.next (/home/kevin/Blue/node_modules/jade/lib/lexer.js:777:15)
at Object.Lexer.lookahead (/home/kevin/Blue/node_modules/jade/lib/lexer.js:107:46)
at Object.Parser.lookahead (/home/kevin/Blue/node_modules/jade/lib/parser.js:115:23)
at Object.Parser.peek (/home/kevin/Blue/node_modules/jade/lib/parser.js:92:17)
at Object.Parser.tag (/home/kevin/Blue/node_modules/jade/lib/parser.js:640:22)
at Object.Parser.parseTag (/home/kevin/Blue/node_modules/jade/lib/parser.js:624:17)
at Object.Parser.parseExpr (/home/kevin/Blue/node_modules/jade/lib/parser.js:198:21)
at Object.Parser.block (/home/kevin/Blue/node_modules/jade/lib/parser.js:592:25)
at Object.Parser.tag (/home/kevin/Blue/node_modules/jade/lib/parser.js:721:26)
So the code that I have is this:
index.jade
extends layout
block content
p Hello World
and
doctype 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
div#header
p This is the header
block content
Keep in mind that I didn't spell anything incorrectly, and I do know how to link together files using the extends option just fine. In fact, the code worked perfectly fine until I started messing with the layout file. All of this is mostly an indention issue. I tried figuring out if it is my text editor causing the problem, and I have been unsuccessful figuring out if it is, as I can't get the code working again.
I am using the sublime text 2 editor to write this jade code. If it is the text editor not indenting correctly, could somebody help me learn how to fix it?
In the lower right-hand corner of Sublime Text, there should be a label that says Spaces: N or Tab Size: N where N is a number. Select this and you'll see options to convert the entire document's indentation to use either tabs or spaces:
Convert Indentation to Spaces
Convert Indentation to Tabs
for edit form on server.js file set variable like this
var applications = row;
res.render("edit", { applications : applications[0] });
for edit.jade file :
block content
table
thead
tr
th First Name
th Last Name
tbody
- each item in applications
tr
td= item.username
td= item.email
This answer is an extension to the answer of André Dion (I don't have enough reputation to comment on his post). One can also do the same procedure he described in Visual Studio Code Directly. If you use Pug in Visual Studio Code it will be very nice.
I've been searching for an answer to this and can't seem to find out how to do it...or if it is possible.
I have a JavaScript Program that displays an .HTML page. I have an API from another company that sends us information as well. I would like to be able to change the contents of the .HTML page before the user sees it. Is this possible?
For example, suppose page.html is:
<HTML>
<HEADER>
<TITLE>
The Company Name
</TITLE>
</HEADER>
<BODY>
Some stuff
</BODY>
</<HTML>
page.html is housed on our server and using JavaScript/HTML I would like to change the value of "The Company Name" with the value from the API before the page is rendered to the user. Is this possible?
window.onload would not do the trick if you want to be sure that your users don't see the page before edition, as onload waits for everything to be loaded, including images.
What I recommend is :
to change the title in a block in the head : <script>document.title="test"</script>
to hide initially the page, by enclosing it in a <div id=wholepage style="display:none;">
to change the page content in a standard <script> block included at the end of your body
to render your big div visible at end, using document.getElementById('wholepage').style.display='block';
A simple Javascript function will do the trick:
window.onload = function() { document.getElementByTagNames("title")[0].value = "Yourvalue"; }
You could load the HTML from the page into a string variable. Then you'd use regex on the string and search for the starting expression and ending expression , and do a replace on that content. Javascript has a replace method.
var str="<HTML><HEADER><TITLE>The Company Name</TITLE></HEADER><BODY>Some stuff</BODY></<HTML>";
str=str.replace("<TITLE>","<DUMMY>");
str=str.replace("</TITLE>","</DUMMY><TITLE>your real title</TITLE>");
Essentially you would rename the title tag into a non existent tag like dummy, then append the real title tag to the end of it.
Then you can display the HTML content in the string/variable in a page at runtime.