I'd like to display my header and my footer inside the batch default page.html.twig, but the there's not displayed.
I tried to override the page--batch.html.twig file, but still, no result.
This is what I get for the user cancelation account process :
So I'd like to have all my menus (header + footer) around this progress bar, in order to keep my website design.
Unfortunately, you were so close to finding the answer :)
You can then use twig_tweak to load your regions into the page, with your theme on page--batch.html.twig (header + footer):
https://www.drupal.org/docs/contributed-modules/twig-tweak-2x/cheat-sheet
{{ drupal_region('header', 'your_theme') }}
{{ drupal_region('footer', 'your_theme') }}
Related
I'm using MkDocs with the Material theme. I'd like to build a site that looks a little like the Stripe API docs.
By default, the Material theme puts .md documents in the sidebar on the left, and the headings withing those documents in a Table of Contents sidebar on the right. I'd like to put it all on the left:
Introduction
A ## heading here
Another heading
Getting Started
Subsection
etc.
I could do this by making every entry its own document, but I'd prefer to have only one document per major heading, with the table of contents consisting of subheadings underneath. Possible?
Update:
I have made some progress.
First, extend the theme by by following these instructions: https://squidfunk.github.io/mkdocs-material/customization/
Second, get rid of the TOC on the right by overriding the "site_nav" template block. In main.html, just copy the existing site_nav block from base.html, then comment out the "Table of contents" section.
Third, copy the nav-item.html partial into the /partials directory and make modifications.
Now I'm stuck. It looks like nav-item.html does have code to render the TOC under each item, and it does get rendered with a display:none. When I turn that off, though, the TOC does not appear properly.
I've done an hour of fiddling with CSS to get it to work with no success. Any ideas?
In your custom css file, write:
.md-sidebar--secondary {
order: 0;
}
And in your mkdocs.yml, write:
extra_css:
- assets/<custom_css_filename>.css
Your update to the question is exactly what I did so I'm unsure if this will be useful.
In mkdocs.yml add custom_dir to the theme:
theme:
name: material
custom_dir: overrides
Create a file overrides/main.html and observe the file you are replacing https://github.com/squidfunk/mkdocs-material/blob/master/material/base.html. Use the nav code but include the toc partial to get the following:
{% extends "base.html" %}
{% block site_nav %}
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
</div>
</div>
</div>
{% endblock %}
Here is the result:
If you are looking at changing the table of contents to also include pages look into the partials in the git repo.
The easiest hack I've come up with is the following:
In your mkdocs.yml, write:
extra_javascript:
- 'javascripts/extra.js'
In your docs/javascripts/extra.js, write:
document.addEventListener("DOMContentLoaded", function() {
show_toc_left();
});
function show_toc_left(){
document.querySelectorAll('.md-nav .md-nav--secondary')[0].setAttribute("style", "display: block; overflow: visible; color: #7d7f8e9c")
document.querySelectorAll('.md-nav .md-nav--secondary label')[0].remove()
}
This will show the TOC within your left side navigation menu of the currently active page.
You can also add this to the top of the individual page:
---
hide:
- toc
---
I'm using Masonry theme and trying to show all posts in a collection. Masonry does this normally and I had it working previously, but now page.collection is empty despite having pages. I've made sure that the children are routable and visible. I even reinstalled the theme, to no avail. Any ideas? At this point I haven't actually modified any code that would affect that page logic relating to the collections.
At the top of the file is:
{% set collection = page.collection() %}
I used
{{dump(collection)}}
But nothing shows up. What gives?
I changed page.collection to page.children instead. It accomplishes the same thing without having to add extra header content on my page. Thanks to HungTran for pointing out the correct way though.
If collection() is indeed a method, then you would use this in Twig instead:
{% set collection = page.collection %}
Can you try that. I'm not certain it will work, but let us know the result.
I used {% CurrentDocument.DocumentName %} in the Metadata > page title field. The Title tag displays ok when viewing the article itself on the browser; however, when searching through Smart Search, the results output something like below in place of the Title. I'm not sure why, is there a way to fix this? Thanks!
{% CurrentDocument.DocumentName |(user)myLogin|(hash)9f2b69705f777e8a884a107dfb72f681d8eb99867b6967514dbdca851b7f4309%}
Note: This is for hundreds of article pages, and inheriting Page Title from Parent by using the macro work best for me.
What is your transformation for search results? How do you retrieve that value?
I can see two possible approaches to solve your issue:
go to page type -> search fields and select DocumentName as a value for Title field
adjust search results transformation and use <%# GetSearchValue("DocumentName") %> instead of <%# Eval("Title") %>
This is most likely because the user who signed the macro is not in the system any longer. I'd change the macro to simply read:
{%CurrentDocument.DocumentName#%}
Having the # at the end will say the macro does not need to be signed.
I'm using the Grav CMS and would like to have a block of global content present on each page. In other words, every page on the site will have this same block of content (near the footer). I'd like the content of this block to be editable similar to other pages, through a .md file. Instead of hardcoding the content of this block into the base.html.twig (or another) template the content should be editable through a .md file similar to other pages.
One option, use find() to pull the content of the page I want into each page. The downside to this is that I don't want this page to appear in the navigation. If there is a way to hide a page from the navigation this might work however.
What is the recommended way to accomplish this?
I solved this by creating a variable containing the page object from the page I wanted. Within the base.html.twig template I did the following:
{% set secondpage = page.find('/_page_url') %}
{{secondpage.content}
The _page_url is hidden due to the _, but still editable as a normal page.
I'm building a static site with Jekyll (no blog), just with pages.
I want to find a way to generate (automatically or with a menu.yml file) a menu (like this website, on the footer).
I define title and chapter properties in the pages' YAML:
---
layout: page
title: Title of the page
chapter: Title of the chapter
permalink: /title-of-the-chapter/title-of-the-chapter/
order: 3250
published: true
---
I want to get a menu like that:
<ul>
<li>Title of the chapter</li>
<ul>
<li>Title of the page</li>
</ul>
</ul>
By the way my files are organised in folders like that :
01-chapter-one
01-subchapter-one
index.md
02-subchapter-two
index.md
02-chapter-one
01-subchapter-one
index.md
Is there a solution (perhaps with no plugin) to do this automatically (I have a lot of pages) ?
Full automation is possible only with a plugin, i.e. vanilla Jekyll is not able to automatically loop your folder and generate a hierarchical list of your files.
So if you want a solution without plugins, you need to maintain data file with your menu hierarchy: each time you add a page, you need to modify the data file as well.
There are different approaches how to generate the menu out of the data file, depending on the complexity you want:
Simple: Accessing _data in Jekyll (loop in loop)
Complex (with "dynamic" menu): Excluding page from Jekyll navigation bar
That should be enough to get you started. If you run into problems, please ask a more specific question.
Grouping data is the trick here, to do this you will need a secondary processor. The most convenient place to put this post processing is in javascript, but that means you need to leave yourself some data.
The following code embeds an array of all the pages in your as an array. That can then be post processed by in page javascript.
<script>
let menu = [
{% for p in site.pages %}
{
'chapter':'{{ p.chapter }}',
'title':'{{ p.title }}',
'url':'{{ p.url }}',
}
{% endfor %}
].filter(function(d){
return d.title != '';
})
.reduce(function(a,d){
a[d.chapter] = a[d.chapter] || [];
a[d.chapter].push(d);
},{});
menu = Object
.keys(menu)
.map(function(key){
let html = menu[key].map(function(d){
return "<li>"+d.title+"</li>";
})
.join('');
html = '<li>' + key + '<ol>'+html+'</ol></li>';
return html.join('');
})
;
menu.push('</ol>');
menu.unshift('<ol>');
document.write(menu.join(''));
</script>
I'm fairly certain that sorting is not enforced correctly, but that seems roughly correct.
A nice thing about this solution would be that you could actually embed the "chapters" as folders. You could generate nesting based on common folder structure, and use 'index' pages as markers for the 'chapter' titles.