带有 PUG 和 FLASK 的动态内容的条件答案

【问题标题】：Conditionals of dynamic content with PUG and FLASK带有 PUG 和 FLASK 的动态内容的条件
【发布时间】：2017-03-02 20:40:12
【问题描述】：

这是烧瓶文件。

from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': 'Miguel'}  # fake user
    return render_template('index.html',title='Home',user=user)

这是哈巴狗文件：

doctype html
html(lang="en")
    head
        title pageTitle

        if title
            title {{ title }} - microblog
        else if !title
            title Welcome to microblog1
        else
            title Welcome to microblog2

    body
    h1 Hello,  {{ user.nickname }}!
    if {{ user.nickname }} == "Miguel"
        h1 Miguel

这是 index.html 使用 Prepros 转换后的样子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>pageTitle</title>
        <title>Welcome to microblog1</title>
    </head>
    <body>
        <h1>Hello,  {{ user.nickname }}!</h1>
        <h1>{{ user.nickname }}</h1>
        <h1># user.nickname</h1>
    </body>
</html>

我可以使用我的 PUG 文件从 FLASK 获取动态内容。所以脚本中的以下内容有效：

h1 Hello,  {{ user.nickname }}!

输出是“你好，米格尔！”

但这部分不起作用。

if {{ user.nickname }} == "Miguel"
        h1 Miguel

我收到一个语法错误：意外的令牌。所以我可以从 Flask 中获取名称，但我不能在 if 语句中使用它？我不确定我做错了什么，或者它是否不受支持。顺便说一句，我正在使用 Prepros（它给出错误）将我的 PUG 文件转换为 HTML。

可能相关的是，当我通过 Prepros 转换我的文件时，我并没有真正得到我期望的结果。

这是来自 PUG 文件：

title pageTitle
if title
    h1 {{ title }}
else if !title
    title Welcome to microblog1

在我期望的 html 中：

<title>pageTitle</title>
{% if title %}
    <title>{{ title }}</title>
{% else if !title %}
    <title> Welcome to microblog1

但我最终得到：

<title>pageTitle</title>
<title>Welcome to microblog1</title>

就好像 Prepros 在转换为 HTML 之前回答了 IF 语句。这意味着代码不是动态的。我是 PUG 和 FLASK 的新手，所以我不确定在哪里可以找到解决方案。

【问题讨论】：

标签： flask pug prepros

【解决方案1】：

谢谢各位。找到了解决方案。

| {% if user.nickname == 'Miguels'%}
|   h1 Miguel
| {% endif %}

然后在 HTML 中显示为：

{% if user.nickname == 'Miguels'%}
    h1 Miguel
{% endif %}

这也解决了转换中回答IF语句的问题。

@cs01 谢谢，那篇文章是我找到解决方案的地方。 “-”不起作用。

@Shea Belsky 谢谢。我知道它存在，因为它“打印”了它：

h1 user.nickname

【讨论】：

【解决方案2】：

双花括号{{ }} 不是有效的 Pug 语法。（我认为它是另一个 HTML 预处理器的一部分，我不记得我的头上是什么）。在 Pug 中，两个以井号为前缀的花括号 #{} 表示您可以运行以返回某些内容的代码。您的源 pug 文件将如下所示：

doctype html
html(lang="en")
    head
        title pageTitle

        if title
            title #{ title } - microblog
        else if !title
            title Welcome to microblog1
        else
            title Welcome to microblog2

    body
    h1 Hello,  #{ user.nickname }!
    if #{ user.nickname } == "Miguel"
        h1 Miguel

在循环或条件内指示变量时，您不需要使用该语法。您可以只使用if variable === "something"，这样应该就可以了。

在您的示例中，您将 if 语句更改为没有任何花括号。

if user.nickname == "Miguel"
    h1 Miguel

如果您总是使用h1 作为用户昵称，您可以直接使用花括号将其嵌入。

h1 #{user.nickname}

最后，您的代码中有两个 title 元素，这就是它出现两次的原因。您可以取出最上面的一个 (title pageTitle) 以便只显示一个，其中内容取决于传递给处理器的有效 title 变量。

【讨论】：

Blesky 感谢您的回复！我尝试了这些建议。 if user.nickname == "Miguel" 这给了我一个“错误：无法读取未定义的属性 'nickname'。如果 #{ user.nickname } == "Miguel" 这给了我“错误：语法错误：意外字符 '# '"。我只是想知道它是否是 Prepros 努力转换的东西？
你应该首先检查user是否存在。试试这个：-console.log(user); 换行：if user && user.nickname == "Miguel"。 console.log 将位于您的服务器控制台（IDE、终端、CMD 等）中，而不是您的客户端控制台（浏览器）中。

【解决方案3】：

我认为您正在寻找- 字符。

if {{ user.nickname }} == "Miguel"
        h1 Miguel

应该是

- if user.nickname == 'Miguel'
    h1 Miguel

来源：https://github.com/matannoam/pypugjs#using-templatetags-and-any-feature-of-the-compiled-to-language

Using templatetags (and any feature of the compiled-to language)

Using Django and crispy-forms as an illustrative example but the information can be generalized.

If you need to use templatetags, you can use PugJS's syntax for rendering code:

- load crispy_forms_tags
- crispy form
This will compile into

{% load crispy_forms_tags %}
{% crispy form %}
If you have any trouble with this feature, or there's some feature of your template language that is being misinterpreted when using this syntax, you can also do something like this:

| {% load crispy_forms_tags %}
| {% crispy form %}
This will compile into the same Django template snippet.

【讨论】：