I have a layout.pug file that setup a layout for all page in my project.
doctype html
html(lang='en')
include head.pug
body(class='')
include header.pug
block content
include footer.pug
And home.pug file like this
extends layout.pug
block content
p some content in here
The problem is I want to set a separate class name in <body> tag for every page in my project.
Eg: home.pug have <body class="page-home">. And keyword.pug have <body class="page-keyword">
I've tried to use interpolation by put body(class='#{bodyClass}') in layout.pug
doctype html
html(lang='en')
include head.pug
body(class='#{bodyClass}')
include header.pug
block content
include footer.pug
and declare a variable - let bodyClass = 'page-home' in home.pug but it not work
extends layout.pug
- let bodyClass = 'page-home';
block content
p some content in here
Anyone know how to fix please help me. Thanks !!!
In the layout.pug file at top add the block variables and in the home.pug file, after extends layout.pug add the block variables with your variable.
The block variables in layout will be replaced wich your block variables in the home.pug.
If you want add some variables to the block, you should use append variables in the home.pug.
layout.pug
block variables
doctype html
html(lang='en')
include head.pug
body(class=bodyClass)
include header.pug
block content
include footer.pug
home.pug
extends layout.pug
block variables
- let bodyClass = 'page-home';
block content
p some content in here
Related
I'm having some issues adding a custom footer to my Sphinx .html files. I'm using the sphinx_rtd_theme. I've checked this post and tried it (and some of the suggestions in the comments) but to no avail. I'm not sure what I'm missing. Apologies if I haven't posted enough here to actually indicate what is causing the problem. Any help or suggestions is appreciated!
My css theme file has been (poorly) modified by myself (I'm not an HTML/CSS person!) but I don't think that should matter? The only other thing I can think of is maybe I have to do something special when I re-compile the output files. I just use:
make clean html && make html
My conf.py is located at: root/source/conf.py. Here's some excerpts from my conf.py file:
import sphinx_rtd_theme
project = 'Project Name'
copyright = '2021, My Company'
author = 'My Name, Coworker Name'
master_doc = 'Home'
extensions = ["sphinx_rtd_theme", "sphinx.ext.todo"]
todo_include_todos = True
templates_path = ['_templates']
source_suffix = ['.rst']
html4_writer = True
html_theme = 'sphinx_rtd_theme'
# html_theme_path = ['_static']
html_static_path = ['_static']
# html_extra_path = []
html_show_sphinx = True
html_show_copyright = True
html_style = 'css/my_theme.css'
Here's my layout.html file that I have overridden. It's located in the path shown in the comment.
<!-- layout.html
* Place this file in root/source/_templates
* -->
{% extends "!layout.html" %}
{% block extrahead %}
{{super}}
<link href="{{ pathto("_static/my_theme.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}
{% block extrafooter %}
{{super}}
<div class="footer">
My custom footer just needs to add a single sentance to the existing footer.
</div>
{% endblock %}
Do you want to add a custom footer or replace the default one? in my case, I only need to override the footer.html file instead of layout.html.
Here's what I do that 100% worked for my Sphinx documentation:
create a footer.html in the _template folder of your Sphinx project.
then add this:
{% extends "!footer.html" %}
{%- block contentinfo %}
{{ super }}
<!-- your custom footer here-->
{% endblock %}
be mindful in which block your footer is actually contained within. In my case it's inside contentinfo
So I found a workaround.
1. Copy existing RTD html files
I copied the existing RTD .html files from my virtual environment folder. On my system it was located at the usual place:
.../Miniconda3/envs/my_env_name/Lib/site-packages/sphinx_rtd_theme/
I found the following files:
breadcrumbs.html
footer.html
Layout.html
search.html
searchbox.html
theme.conf
versions.html
I copied those to my working directory for my project:
.../Documentation-repo/Sphinx/root/source/_templates/
2. Edit conf.py file in working directory
I opened my conf.py file and changed the following:
# Add any paths that contain templates here, relative to this directory.
# Uncomment the line below to enable customized template #
#
# templates_path = ['_templates']
to this:
# Add any paths that contain templates here, relative to this directory.
# Uncomment the line below to enable customized template #
#
templates_path = ['_templates']
3. Add new content to footer.html file
I opened footer.html and edited it to add the content I wanted at the bottom. In my case it was as simple as adding my single sentence of changes below the {%- block extrafooter %} {% endblock %} line. Easy. Might not be the perfect solution but it works for what I need.
I have a layout used for the home page for different sections on my Jekyll site. On each of these pages I would like to have links to each item in the section, the details of which are stored in a YAML file in the site _data directory. My aim is to have the name of the site data variable in the section page front matter and pass this into the layout for rendering. For example:
Page Front Matter
---
sectionItems: site.data.sectionItems.awesomeSectionItems
---
...which is passed to the section home layout...
Section Home Layout
{% for item in page.sectionItems %}
// Work with section item...
{% endfor %}
Unfortunately, when I run the site nothing appears. How would I go about doing this? I have also tried an include but this also does not work. I would like to avoid adding the for loop to each page, plus I would like the links to appear beneath the main content section.
You cannot use variables in front matter. You will have to use a content variable like {% assign sectionItems = site.data.sectionItems.awesomeSectionItems %} and then loop with {% for item in sectionItems %}.
In my CSS, I have examples like this:
#defaultCountdown span.countdown_section {
color:#fff;
padding:7px 15px!important;
margin-bottom:2px;
font-weight:300;
background:url(../img/bg-white.png);
text-align:center
}
If you see the background tag, there's a url.
How do I serve this via staticfiles?
Thanks.
To answer your comment about using static in css or js files.... It could be done. Basically you would define a route and view just like for html pages.
But, this is strongly discouraged for a production level site. You will have a significant increase in page response time if you do this rather than serving these as static files.
To accomplish this, you simply pass content_type into your HttpResponse for your related view:
return HttpReaponse(my_dynamic_css, content_type="text/css")
css is a static file, as is your images and .js. So you use relative paths to reference them, unless you've got a specific need to use static tags for backgrounds, then you can move the style tag for background outside your css and into into your html:
<div class="generic" id="#defaultCountdown span.countdown_section" style="background: url('{% static 'img/bg-white.png' %}');></div>
If you need to use {% static 'url' %} in your CSS or JS, the easiest would be to define the CSS in a <style> block in your HTML template's <head> and the JS in a <script> block at the bottom of your template. Any CSS or JS that doesn't require the use of {% static 'url' %} can still go in separate .css and .js files.
Is there an equivalent to laravel's #section('') blocks in jekyll? What I am trying to do is create a template that can condense the html shared between multiple jekyll pages. For example:
default_layout
<html>
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
</html>
page_1
---
layout: default
permalink: xxx
---
<head>
<title>My title</title>
{% include header.html %}
...
<div> <!-- A shared block between pages with different content --> </div>
....
<div> <!-- Another shared block between pages with different content --> </div>
{% include footer.html %}
</html>
It looks like the current offering of jekyll allows you to use sub-templates, but limits the {{content}} block to be a separate file that also inherits the child template. I would need to create a bunch of files that inherent one another to create the final html page (or so I think).
What worked for me in Laravel was using multiple #yield and #section statements to easily insert dynamic data into a shared template. I don't think Jekyll can do this without creating a bunch of nested sub templates, but I hope I am wrong.
Solution 1:
You could use Jekyll's include files for that.
You probably already know about includes, because you're using them in the layout file in your question.
If your shared blocks are just HTML, using an include is all you need.
But maybe (I'm not sure) the shared blocks are text, meaning you'd like to use Markdown for formatting?
By default, Jekyll doesn't render Markdown in include files, but with a little trick it's still possible to include Markdown files.
I have a site where I needed the same block of text (with formatting and links) on multiple pages, so I did this:
Put the text in a Markdown file into the _includes folder, e.g. _includes/info.md
Include that file and render the Markdown by capturing it and then using the markdownify Liquid filter:
{% capture tmp %}{% include info.md %}{% endcapture %}
{{ tmp | markdownify }}
Solution 2:
If the shared blocks are the same for certain groups of pages, maybe you want to use multiple layout files.
The best example of this would be a blog built with Jekyll:
You have a "basic" layout (navigation, sidebar, footer...) that all pages share, and which is directly used by "regular" pages.
Then, you have a second layout "inheriting" from the main one, which adds stuff like post date, tags and so on - this is used by all blog posts.
Here's a simple Jekyll example for this.
What I have now in my index.jade file:
html
include head
body
include header
include main
include aside
// a bunch of other includes
include footer
What I prefer to receive
html
include head.jade
body
+multiinclude('header','main','aside','footer')
But when I'm trying to pass an argument in mixin to include directive it doesn't work:
mixin multiinclude(...includes)
each i in includes
include= i
It just add <include>header</include> tags
You are passing strings into you multiinclude mixin.
You are also trying to loop over your inputs, but they are not in an array format.
Maybe you should include a body.jade file, and in the the body.jade include the different pieces to the body?