How do I reuse HTML snippets in a django view - html

I am working on a django project (my first), and in one of my views, I have a sophisticated html snippet with JS weaved within it. I would like to reuse this "component" somewhere else in the same view. Is there a way of achieving this? Please let me know if this design is faulty to begin with?

Use the {% include '/my/common/template.html' %} templatetag.
Loads a template and renders it with
the current context. This is a way of
"including" other templates within a
template.
The template name can either be a
variable or a hard-coded (quoted)
string, in either single or double
quotes.

I know it's an old one but maybe someone is gonna have use of this answer.
There's also the inclusion tag. It's like the include tag, only you can pass it arguments and process it as a seperate template.
Put this in my_app/templatetags/my_templatetags.py:
#register.inclusion_tag('my_snippet.html')
def my_snippet(url, title):
return {'url': url, 'title': title}
and then my_snippet.html can be:
{{ title }}
then, to use this snippet in your templates:
{% load my_templatetags %}
{% my_snippet "/homepage/" "Homepage" %}
More info:
https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#howto-custom-template-tags-inclusion-tags

Not sure, if you like to reuse your HTML in different templates (rendered by different views). If so, look into Django's template inheritance mechanism:
The most powerful -- and thus the most complex -- part of Django's template engine is template inheritance. Template inheritance allows you to build a base "skeleton" template that contains all the common elements of your site and defines blocks that child templates can override.

You should try Django custom template tags. This way you will keep your snippets in an external file and then call them easily by something like {{ your_custom_tag }}. It's a very convenient method for working with reusable chunks of xhtml markup. You can even use arguments with these custom tags, something like {{ your_custom_tag|image:"logo.png" }}.
You can learn more about custom tags here.

Related

Markdown/html not parsing correctly in eleventy from frontmatter generated by Netlify CMS

I've been stuck on this for an embarrassingly long time. I have two inputs that aren't displaying correctly, a markdown widget and the list widget. They both appear as one long string. I thought I needed to add a markdown parser for the former at least so I'm using markdown-it in a manner similar to this:
https://github.com/11ty/eleventy/issues/236
It is adding paragraph breaks where they should be but they show up on the page as p tags. I thought this was because I already had the parsed text nested between p tags but if I delete those nothing shows up at all. When I look at the html file created by eleventy, the tags show up as "&lt ;p&gt ;" (without the spaces) which it seems the browser isn't reading correctly when trying to interpret the html. I'm using nunjucks for templating if that matters. My .eleventy.js file looks like this currently. What am I missing? Also the markdown filter seems to only want to take a string so I'm not sure where to even begin with the list.
By default, Nunjucks HTML-escapes all variables when outputting templates. This is what you want most of the time, unless you're trying to render HTML input.
You might want to try using the safe filter after your markdownify filter.
{{ markdownContent | markdownify | safe }}

get_absolute_url and reverse outside of templates

"...If you need to use something similar to the url template tag in your code, Django provides the following function: reverse()...."
I looked at the docs for get_absolute_url() and reverse, as well as the example given:
a href="{{ object.get_absolute_url }}">{{ object.name }} /a>
What I am not seeing, or understanding, is how are we passing the kwargs (name, self, ID, whatever) to the model method so it knows which one of 100 instances to return the url for, particularly where I need to use it in text, outside the template system?
a href="name_of_object.get_absolute_url ">text name of object
Do I have to put the full name of the object in the href?
How would I use a variable like self or object or modelname instead?
Can I rewrite gau to take kwargs as well as self?
If I do that, can I put the () on the end of gau to take in the kwargs? We can’t do that in the template.
Can I use:
a href="self.get_absolute_url(**kwargs) ">text name of object ?
or
a href="object.get_absolute_url(self, **kwargs) ">text name of
object ?
And if so, do I need to add anything to the definition of gau on my model to make sure those kwargs are passed to return?
Or do I just treat it like a regular outside link, and thus have to hard code it?
Thanks.
--update--
#ChidG: Thanks for such a complete answer, and my apologies for taking so long to get back to you. I'd like to clarify my use case a little, and see if that changes your answer any. If I have ten articles using the same template, each article is still unique, and their links to different urls are not going to be in the same place on each article. So there is no way for me to put a single (or multiple) url tag in the template that will be useful to all ten articles. That's what I meant by using gau / the url tag outside the template. I want to do a simple search and replace that will turn the affected text into links. Otherwise, I'd have to do them one at a time by hand, which I assumed couldn't be the way this has to be done. What am I missing?
When Django's docs say 'outside of the template system', they mean in Python code, in a views.py or models.py (or whatever.py) file. The examples you have given all appear to be HTML (they feature a tags, so it looks like you are talking about HTML).
If it's HTML, then it's not outside the template system, so the Python functions you've mentioned won't work. You need to use the Django template tags.
Regarding this question:
What I am not seeing, or understanding, is how are we passing the kwargs (name, self, ID, whatever) to the model method so it knows which one of 100 instances to return the url for, particularly where I need to use it in text, outside the template system?
{{object.get_absolute_url}} (or object.get_absolute_url() in pure Python) does not require a kwarg, because the get_absolute_url method on the model already knows how to generate the correct URL with whatever kwargs are needed. If it doesn't already know how to do that (because of your specific URL configuration), you can write a custom get_absolute_url method which will enable that.
Whenever you return an HTML file from a Django view (unless you're doing something unconventional), you are using the template system. When you're using the template system, you reference Django context variables using {{ }} and custom tags using {% %}. So to insert a URL into a template, whether it's into an a tag or just into the text, you will use curly brackets and it will be {{ object.get_absolute_url }} or using the url tag itself, {% url 'whatever_url_name' kwarg=value %}
Do I have to put the full name of the object in the href?
You have to put whatever the context variable is that refers to the object in the template context.
How would I use a variable like self or object or modelname instead?
You can use whatever name you like for the context variable. If you're using Django's class based views it will be object by default for a single object view, but you can change it to whatever you like using the context_object_name attribute on the view.
Can I rewrite gau to take kwargs as well as self?
That is unnecessary. get_absolute_url returns a full URL, and all it needs is the model instance. The model instance must be able to find its own url using its own get_absolute_url method without any further kwargs.
Can I use:
The correct syntax is clearly demonstrated in the Django docs for get_absolute_url that you've linked to:
{{ object.name }}

How can I use macros/variables/scripts in articles with Pelican?

I have just started with Pelican. It's awesome, I just can't figure out how to use macros in my articles (and pages). I know I can use Jinja when making my own theme, but I can't seem to be able to use it in articles. I'd like to be able to define a macro/function/template/whatever that I'd put directly in the markdown of the article, possibly with parameters, and it would get expanded when the pages are generated. For example a function to generate an image with a caption of given size and css class that would also be a link directly to the image. I'd like to be able to access these macros from all articles, to be able to reuse them everywhere. Something I'd normally do with PhP.
I could probably use JS to do this, but if I'd like to avoid it and keep everything static if possible. Can this be done?
UPDATE:
I found a pelican plugin that solves this - jinja2content.
OLD SOLUTION:
I found a solution here. You can implement a filter in Python to process all texts in articles/pages like this:
Create a python file filters.py in which you write the filter function process_text to expand my macros (or generally do anything with the article/page text), for example to test the function write something like:
def process_text(input_text):
return "TEST " + input_text
In the Pelican config file (pelicanconfig.py) register this function as a possible filter to be used with Jinja:
import sys
sys.path.append('.')
import filters
JINJA_FILTERS = {'process_text':filters.process_text}
Now you have to edit the templates to apply this filter to article/page texts before adding them to output. In my case I edited two files: themes/themename/templates/article.html and themes/themename/templates/post.html and changed {{ article.content }} to {{ article.content|process_text }} and {{ page.content }} to {{ page.content|process_text }} in them to apply the filter.
Now all texts in articles and pages should be prefixed with "TEST".
The not so convenient thing about this is I have to write my own macro expander, which shouldn't be extremely hard with regular expression in Python, but if there is a nicer way to do this, feel free to post here.

Including HTML inside Jekyll tag

Instead of writing out {% include link_to.html i=5 text="hello world" %} all the time, I've written a custom tag that allows me to do {% link_to 5 hello world %}. It finds the page with data i equal to 5 and creates a link to it.
But it feels clunky to generate HTML strings from inside the tag code, and it is awkward to write complicated code logic inside the HTML include code. So is there a way to have the tag definition do the heavy lifting of finding the relevant page to link to, and have it pass on what it found to link_to.html to render? Sort of like the controller passing information on to the view in Rails.
javascript.accessObject(ObjectName, Location).reason(NumberOfColumns);
API.Go.javascript.Obj = new Runtime(4); // how many seconds we want the page to take when loading.

How to tune layout for a particular page/post in Jekyll?

I would like to make some changes in Jekyll's layout. Changes are small and different. For example, linking an additional CSS or JavaScript file. Or adding some info in header. Or tuning page title.
Important that these changes depend on a page/post.
Since changes are small and diverse, creating a special layout for each of them seems to be too expensive.
I tried to create my own solution but run into impossibility to use variables in including instructions.
Has anyone solved something similar? For example, linking a special CSS to a particular post?
You can use YAML front matter to tune anything you want for any post/page. Any info you provide there would be accessible through in layouts and includes under page variable or under specific post in any list of them.
This sounds like a solution for your case: you could use YAML front matter like this:
---
extra_css:
- foo.css
- dir/bar.css
- /s/baz.css
---
And then use this in your layout's header like this:
{% for css_name in page.extra_css %}
<link rel="stylesheet" href="{{ css_name }}">
{% endfor %}
In such way you could add any logic based on what data you provide with a post in YAML front matter.
If you'd like to abstract some of those logic to modules, you can use a hack around the includes, assigning a variable before that include and then using it inside. Here is a link with a description how it's made in Jekyll Bootstrap project (btw, the site for it have a lot of nice info on Jekyll).
And, yes, Jekyll don't allow the use of variables in includes, so if you'd like to include something conditionally, you would need a list of all available includes somewhere and then create all the conditions for inserting one or another when you'll need them.
Another solution is to divide everything in layout to includes, and make layouts with different levels of complexity — this way you could set any of those basic layouts for post and then write any extra code with includes of any blocks you'll need from the basic layouts, so you post could look like this:
---
layout: custom
---
<aside class="sidebar">
{% include comments.html %}
{% include sidebar.html %}
</aside>
<div class="content" role="main">
Foo bar baz
</div>
There you could use a custom layout that don't include a basic layout for page and don't include the sidebar and comments, so you could per-post decide what level of layout you want and then redefine anything that needed to be redefined.
Also, if you'll need to tweak different places but with an unknown content, you could use YAML front matter with blocks, like
extra_head: |
<style>
* {background: red}
</style>
then you could call such variable from head: {{ page.extra_head }} and get any content you placed there. However, you can't use any liquid tags inside YAML, but you could then use any YAML tags on such variables, so you could markdownify them or replace any strings inside with anything else by simple replace filter.
And if nothing of those fit you, then Jekyll won't fit you — as I wrote in a comment, Jekyll is just a blog engine and you shouldn't wait it to be complex as XSLT.
I have ever tried to create an independent page in the jekyll-bootstrap static site. For example my_cv.html which needs independent css style. Instead of create a new github repository with gh-pages (sorry GitHub), I just simply fill all the final html contents into the a post my_cv.md since markdown format is actually compatible with html I think, and luckily it works.