How to include javascript script links to pyrocms page? - templates

I'm using pyrocms to develop a system.
I know that, to include style links in header tag ''
in a page is by using $this->template->set_metadata().
But how can I include javascript links like that?
Any answer is appreciated.

Alternatively, if this is for a theme and the script is housed within your actual theme/js folder, it becomes:
{{ theme:js file="file.js" }}
Using just the {js} function would send it to the actual system's embedded js files.

$this->template->append_metadata(js('foo.js)) will work, or you can dump it into the view as others have suggested.

If you are creating a template you can do it like this:
{js('file.js', 'modulename')}
See the Pyro documentation.
If this is not the answer you are looking for, please explain more clearly what you want. E.g. in which file exactly do you want to include your javascript?

Related

How can I include a template in another with pandoc?

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.

How can I configure VS Code to work with Prettier HTML formatter?

I am trying to have VS Code format my Django HTML files but I am getting:
There is no document formatter for 'django-html'-files installed.
The solution I found on the web works with Beautify, not Prettier.
How can I make it work with Prettier?
#Tedkovsky's answer might technically address the error you're getting, but once you're past that, you'll see that Prettier will mangle your templates since it tries to break long lines containing template tags like {{ }} and {% %}.
This is because Prettier currently (as of 2021-01-09) doesn't support Jinja or Django templates, and for the time being, it looks like the developers aren't interested in adding this functionality. There are 2 (closed) tickets about it here:
https://github.com/prettier/prettier/issues/5581
https://github.com/prettier/prettier/issues/5754
I wasn't able to find a plugin for it either, so it doesn't look like there's a solution for using Prettier with Django templates.
edit: I've been following this thread in the Django forum about autoformatters for Django templates. Perhaps something might materialize there.
later edit: Looks like djhtml can handle indentation, although it's separate from Prettier. It doesn't do full autoformatting, though.
even later edit: djlint can also be used for formatting templates
In settings.json, try
"[django-html]": {
"editor.defaultFormatter": "prettier"
},

Simple template system for static web development

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.

Taking all javascript from html to page-specific js file

What bit bothers me about django, is that I see in many examples that raw javascript is included in html with <script> tag. I would like to have it in independent files which are included in every page in <head> tag so that html stays clean. So that I will call something like {% add_jscript %}some js code{% endaddjsscript %} anywhere in the template to add js code. After all processing when the page is generated and it will dynamically collects all portions of added js code from processed templates and serve it as one js file.
Some app already does this or am I forced to do this on my own ?
I use django-sekizai (https://github.com/ojii/django-sekizai/) for this kind of thing. If I understand you correctly, I believe that is what you are looking for.
I know I'm a bit late to the party, but another option you could try (shameless plug) is a django app i've been working on which will allow you to inject django variables directly into external javascript files, a la Require.js
django-js-variable-injector

modx is only showing html code, not the template

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.