I am using Markdown files to create a series of webpages (calling that mess a website would probably be frowned upon). I use a general template to display each page with a similar look: they all have the same header, footer, etc.
I would like to add a navigation menu, in order to have links to the other pages. I can easily generate the menu itself, what I don't know is how to insert it in the page.
What I tried is the following:
options.yml (generated by a Python script):
metadata:
title: My very excellent title
navigation: HomeOther page
standalone: true
template: template.html
template.html:
<!doctype HTML>
<title>$title$</title>
<header>Yeepee, header!</header>
<nav>$navigation$</nav>
<main>$body$</main>
<footer>Best footah evah</footer>
I then run the script: pandoc -d options.yml index.md -o index.html (and same for the other files, in a loop in a Python script)
The result is that the content of my metadata.navigation is escaped before insertion, resulting in something like <a href="index.html">Home</a><a href="other.html">Other page</a>, which is really safe in practice, but doesn't help me there.
What I would like is to have another template, say navigation.html, that contains the navigation menu to be included in my main template when using pandoc.
If this is not possible, I would like to use the same technique as above, but with an "unescaped" navigation parameter (I'm not fond of it, as it would bring a major security issue into the project).
How can I achieve this?
There are two solutions to this:
Use variables instead of metadata in your defaults file. Variables are inserted verbatim, while metadata will be escaped.
To insert the file navigation.html in a template, use ${navigation.html()}. Pandoc uses the doctemplates package for templates, see the docs on "partials" for more details.
Related
I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.
I am trying to create a custom gitbook theme and in that I also want to change the layout so that the book I create using the theme have the layout that I want. I copied the default templates dir in my assests dir of the custom theme and then modified the layout.html and header.html files as I wanted. Then to include the modified template files, I added the following attribute to the index.js file
module.exports = {
book: {
assets: "./assests",
templates: {
"layout":"templates/layout.html",
"header":"templates/includes/book/header.html",
},
......
......
However with this configuration, the generated book is not picking the template file changes. However I do see the css/js changes that I had done.
For the record, layout and header template files do exist if you're going the "unadvised" (emphasizing the unadvised nature of this) route of:
Add "theme": "./customtheme" to your book.json file.
Create your customtheme folder in the root with the files from the Gitbook repo
Edit from there
This is so far the only way I've found edit your favicon, sidebar, header, and layout files. It's not recommended because you're no longer using the files in the repo, so updates could break it, but some things either aren't easy or possible to make changes without doing something messy and hacky like this. Hopefully simple things like updating a favicon, header, or sidebar could be made to be easier in the future. I've only found this solution after many, many google searches and plugin comparisons, so maybe some one has a better solution that I haven't found yet.
Templates "layout" and "header" don't exist. You can only change:
site: template for the website
glossary: template for the glossary
langs: template for the choice of languages
page: template for the ebook
Changing templates is really not advised, you should use plugins to only extend html,css,js using: https://github.com/GitbookIO/plugin/blob/master/index.js#L2
I have a fairly big webapp with lot of templates. I am looking to save time by precompilation of these files.
Currently, I use a script wrapper so that I can load it dynamically and package them in html
<script id="all-domain-users-model-template" type="text/html">
<td></td>
<td>{{domain}}</td>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{is_account_owner}}</td>
<td>{{#if is_account_owner}}Delete{{/if}}</td>
</script>
There are many many such files. One file can have more than one definition..
I am looking for ideas for a script to read the name in id, parse html, compile and put it back using id.templates in a js file.
I have seen Using pre-compiled templates with Handlebars.js (jQuery Mobile environment) - the accepted answers mentions that the script tag was removed before copying.. But in reality, its almost impossible..
I use grunt-ember-templates to precommpile my ember handlebars templates.
For a good example of this grunt plugin in use check out this example todos application.
It gives a good example of using grunt for your build process, testing, etc, and includes template precompilation.
i´m developing a theme and for some reason i need to move the default position for breadcrubms (also for many other things) over woocommerce themes. Then i realised to do something like this on my functions.php:
function woocommerce_remove_breadcrumb(){
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);
}
add_action('woocommerce_before_main_content', 'woocommerce_remove_breadcrumb');
function woocommerce_custom_breadcrumb(){
woocommerce_breadcrumb();
}
add_action( 'woo_custom_breadcrumb', 'woocommerce_custom_breadcrumb' );
And then on any template file, output the breadcrumb just with:
<? do_action('woo_custom_breadcrumb'); ?>
And works. My question is more than that. Is this the correct approach for something like this? I mean for anything over woocommerce, not just breadcrumb, for any pice, ratings, titles, buttons, sidebar, and so on.
What i´m thinking on is why woocommerce templates don´t come with more deep code. I mean, why there´s no such a single-content-loop.php template where you can just change the order of things, title, category, content, images, etc. in an easy way rather that hooking into functions?
I think that is an acceptable way to call the breadcrumbs explicitly. Sometimes it is easier to call a specific function than remove everything around it!
As for changing the order of things and getting into advanced customization; there isn't a single file, but a number of files working together. Create a folder in your themes root called 'woocommerce' and copy the following files for a safe override:
woocommerce/woocommerce-hooks.php:
Here are your hooks, including the ones you are overriding in your themes functions.php. Here is where you can experiment with removing and repositioning certain elements on your product page. Search for 'Sidebar' and you will see where the 'woocommerce_sidebar' action is added with the function it references in...
woocommerce/woocommerce-template.php:
Here are the functions used in template files to output content based on conditional statements. For instance, search for the 'Single Product' series and you can see which template files are used for which functions. For instance 'woocommerce_template_single_title' uses 'single-product/title.php' - if you copy over this folder and file you can make very specific edits to just the title section
Between these two files and their accompanying references (like title.php) I believe you can do the things you described. Let me know how it works out! I'm new to woocommerce too!
I have installed ModX and Downloaded the "Basic" Template in the Extensionmanager! I chose the Basic Template at my first Page for the Resource! I cant find a Globalsetting to choose an Template? My problem is that if iam going to the site i only get the pure html code shown, no website! Why is this?
AFAIK there is no "Globalsetting" to choose a template. One of the nice things with MODX is that each resource can specify which template to use. So you can mix and match as required.
You could check if you have set the base href tag in head like this:
<base href="http://www.yoursite.com"/>
It will tell the site where to start looking for the other files that you have included in your markup.