CODEWITHSUNDEEP
javascripthtmljinja2
sk_225
sk_225

Reputation: 425

Jinja templates for meta and title tags?

I'm new to Jinja templates. In my HTML below, two meta tags and the title tag have content with the letter "A". I need to create Three more html files with the "A" in these tags replaces with "B" in one files, "C" in another, and "D" in the last one. How do I do this in Jinja? Is there a way to create a block of code containing these meta tags and title tag to plug into the main HTML below? How do I use Javascript to specify at the top of each page what letter needs to be used? 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="robots" content="noindex, nofollow">
        <meta name="description" content="Let us help you with your "A" needs. Get "A" today.">
        <meta name="keywords" content="A">
        <title>"A" Quote</title>
        <script src="raven.min.js"></script>
        <script>Raven.config('https://getsentry.com/90500').install();</script>
        <link rel="stylesheet" type="text/css" href="/css/vendor.css">
        <link rel="stylesheet" type="text/css" href="/css/main.css">
    </head>
    <body itemscope itemtype="">
        <div id="navigation"></div>
        <div id="my_page"></div>
        <div id="footer"></div>
        <!-- Our scripts -->
        <script type="text/javascript" src="/js/vendor.js"></script>
        <script type="text/javascript" src="/js/sem.js"></script>
    </body>
</html>

Upvotes: 2

Views: 2821

Answers (2)

Oliver Fawcett
Oliver Fawcett

Reputation: 581

You could also define the meta section as a macro.

{% macro meta_header(value='A') -%}
<meta name="description" content="Let us help you with your {{value}} needs. Get {{value}} today.">
<meta name="keywords" content={{value}}>
<title>{{value}} Quote</title>
{%- endmacro %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {% meta_header('B') %}
        <script src="raven.min.js"></script>
        <script>Raven.config('https://getsentry.com/90500').install();</script>
        <link rel="stylesheet" type="text/css" href="/css/vendor.css">
        <link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
    <body itemscope itemtype="">
        <div id="navigation"></div>
        <div id="my_page"></div>
        <div id="footer"></div>
    </body>
</html>

In any other files you can import the macro (if needed):

{% from 'main.html' import meta_header %}

Upvotes: 1

coralvanda
coralvanda

Reputation: 6596

You can {% include %} files with the tags you need. Here is an example for you:

Main.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        {% include "meta_A.html" %}
        <script src="raven.min.js"></script>
        <script>Raven.config('https://getsentry.com/90500').install();</script>
        <link rel="stylesheet" type="text/css" href="/css/vendor.css">
        <link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
    <body itemscope itemtype="">
        <div id="navigation"></div>
        <div id="my_page"></div>
        <div id="footer"></div>
        <!-- Our scripts -->
        <script type="text/javascript" src="/js/vendor.js"></script>
        <script type="text/javascript" src="/js/sem.js"></script>
    </body>
</html>

meta_A.html

<meta name="robots" content="noindex, nofollow">
<meta name="description" content="Let us help you with your "A" needs. Get "A" today.">
<meta name="keywords" content="A">
<title>"A" Quote</title>

Then you could have files meta_B.html and so on. If you have a variable that will indicate to you which file you need, A, B, etc., then you could add a bit of logic to main.html with jinja like this:

{% if my_variable == 'A' %}
    {% include "meta_A.html" %}
{% elif my_varaible == 'B' %}
    {% include "meta_B.html" %}        
{% elif my_varaible == 'C' %}
    {% include "meta_C.html" %}            
{% elif my_varaible == 'D' %}
    {% include "meta_D.html" %}        
{% endif %}

And you would just substitute in that bit right where the include statement is in my first example of main.html.

Upvotes: 0

Related Questions