We Keep Coding

Set HTML page title with js and pug

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'

Stuck with hexo variables scope

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.

Jade Includes conditionals to check the actual page

Is there a way to check which page are you in Jade and include something (a partial page or a specific CSS Style) based in that page? For example:
If I am in homepage, then include just the HOMEPAGE-head.jade
Else - include the NORMAL-head.jade
Here is an in context example:
doctype html
html
body
if HOMEPAGE
include ./includes/HOMEPAGE-head.jade
else
include ./includes/NORMAL-head.jade
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
Thank you!

Alternatively you can structure your Jade to use inheritance to achieve what you want.
E.g.,
layout.jade:
doctype html
html
body
block header
block content
h1 My Site
p Welcome to my super lame site.
block footer
include ./includes/foot.jade
homepage.jade:
extends ./layout.jade
block header
include ./includes/HOMEPAGE-head.jade
normal.jade:
extends ./layout.jade
block header
include ./includes/NORMAL-head.jade
And then have all your normal pages use normal.jade and your homepage to use homepage.jade.

There are two approaches I know of.
Option A: 2 layouts and extends
Make two layouts: layout.jade and layout-homepage.jade, changing the include line accordingly. Most of your pages will extends layout, but index.jade will extends layout-homepage.
Option B: variables block
in layout.jade:
- var HOMEPAGE = false;
block variables
doctype html
html
body
if HOMEPAGE
include ./includes/HOMEPAGE-head.jade
else
include ./includes/NORMAL-head.jade
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
Then in index.jade:
block variables
- HOMEPAGE = true;
h1 This is your home page template...
All the rest of your pages will default to HOMEPAGE = false so they don't need any changes to make this approach work.

An option that I'd suggest is using separate layouts. It takes advantage of the system that Harp already has in place, and helps maintain the concept of "different content, different file." Using Harp, you can specify an explicit layout for any given page in the _data.json or _harp.json files.
From http://harpjs.com/docs/development/layout
Layouts other than _layout can be specified in a _data.json. This is
useful if you need even finer control of Layouts, or if you want to
name your Layout something other than _layout.
myapp.harp.io/
|- _layout.ejs
|- index.ejs
|- about.md
+- articles/
|- _data.json
|- _an-example-layout.ejs
|- _another-one.jade
|- article-one.md
+- article-two.md
Here, it’s possible to make article-one.md use _an-example-layout.ejs by specifying layout in the _data.json file in that folder:
{
"article-one": {
"layout": "_an-example-layout",
"title": "Example Title"
},
"article-two": {
"layout": "_another-one",
"title": "Another Example Title"
}
}
Now, each article will use the specified Layout.
If it's a minor difference you want to make and you can't justify having a completely separate template, you can also pass data through to the include if you use Harp's partial() function instead of Jade's include keyword. Then the logic for handling the different variable value would be in a single head.jade file. Your example might look like this.
foo.jade:
doctype html
html
body
!= partial("./includes/head.jade", { page: bar })
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
head.jade should now have access to the page variable.
A third option can take advantage of the current object that Harp injects into the templates. If you're accessing //site.com/foo/bar, current.source === "bar" and current.path === ["foo", "bar"]. You can use this object to dynamically set class names, etc. You can read more about it here: http://harpjs.com/docs/development/current

Assign a class on body conditionally in Jade

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.

How to add dynamic information in the header script?

I have a Django website that retrieves scores of various items. I would like to make the score appear when a user clicks on a link. The problem is, how do I create this functionality when all of my Jquery code is located in the head?
For example, I have the following code in my head:
$(document).ready(function() {
var $addedElem = $('<p>New Element</p>');
$('.display').one('click', function() {
$addedElem.hide().appendTo("#container").fadeIn("slow");
});
});
Where it defines addedElem, I would like it to add the "score" that the view gives to me. So, I would normally be doing this:
{{ score }}, but how would I add this to addedElem if I do not have access to it? I am using Django's templating system, so I only have access in the innermost body elements and not the head.

Base template have access to context of its inherited templates, {{ score }} will work. You should of course handle the situation when there is no score provided.
If you want this code only for a particular page, you can define {% block head_ext %}{% endblock %} in base template and override it in child template. It's ok to call $(document).ready() more than once.