用于元和标题标签的 Jinja 模板？答案

【问题标题】：Jinja templates for meta and title tags?用于元和标题标签的 Jinja 模板？
【发布时间】：2016-09-20 20:18:51
【问题描述】：

我是 Jinja 模板的新手。在我下面的 HTML 中，两个元标记和标题标记的内容带有字母“A”。我需要创建另外三个 html 文件，这些标签中的“A”替换为一个文件中的“B”，另一个文件中的“C”和最后一个文件中的“D”。我如何在 Jinja 中做到这一点？有没有办法创建包含这些元标记和标题标记的代码块以插入下面的主 HTML？如何使用 Javascript 在每个页面的顶部指定需要使用的字母？

<!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>

【问题讨论】：

你的 jinja 模板代码在哪里？

标签： javascript html jinja2

【解决方案1】：

您还可以将元部分定义为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>

您可以在任何其他文件中导入宏（如果需要）：

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

【讨论】：

【解决方案2】：

您可以{% include %} 带有您需要的标签的文件。下面是一个例子：

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>

然后你可以有文件meta_B.html 等等。如果您有一个变量可以指示您需要哪个文件、A、B 等，那么您可以使用 jinja 向main.html 添加一些逻辑，如下所示：

{% 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 %}

您只需在include 语句在我的第一个main.html 示例中的那个位置替换。

【讨论】：