oTree学习教程(四)Templates

模板

您应用的templates/文件夹将包含显示给玩家的HTML模板。

 

模板语法

变量

您可以显示如下变量：

模板中提供以下变量：

• player：当前正在查看该页面的玩家
• group：当前玩家所属的组
• subsession：当前玩家所属的子游戏
• participant：当前玩家所属的参与者
• session：当前的会议
• Constants：在 models.py定义的常量
• 使用vars_for_template（）传递的任何变量。

条件（“if”）

使用'else'子句：

循环（“for”）

方法调用

要从您的某个模型调用方法，请确保省略括号（与常规Python代码不同）。

访问列表或字典中的项目

而在Python代码中，您执行my_list [0]和my_dict ['foo']，在模板中您可以执行{{my_list.0}}和{{my_dict.foo}}。

评论

模板过滤器

除了Django的模板语言提供的过滤器之外，oTree还有过滤器，它等同于函数。 例如，显示为。

此外，过滤器允许您获取绝对值。 所以，做会输出。

如果您收到“无效过滤器”错误，请确保模板顶部有。

你不能做的事

模板语言旨在简单地显示和循环值。大多数其他东西都不受支持; 例如，你不能做数学（+，*，/，-），或者如果你需要做的是，你应该这样做，否则修改的数字，列表，字符串等vars_for_template（） 。

 

模板如何工作：一个例子

 

oTree模板混合使用2种语言：

• HTML（使用<this>和括号一样的尖括号）</this>。
• Django模板标签 （使用大括号和{% this %}{{ this }}

以下是两种语言如何协同工作的示例。在这个例子中，假设您的模板如下所示：

第1步：oTree扫描Django标签，生成HTML（又名“服务器端”）

oTree使用变量的当前值（由vars_for_template（）提供）将上面的Django代码转换为纯HTML，如下所示：

第2步：浏览器扫描HTML标签，生成一个网页（又名“客户端”）

然后，oTree服务器将此HTML发送到用户的计算机，其中Web浏览器可以读取代码并将其显示为格式化的Web页面：

请注意，浏览器永远不会看到Django标记。

 

关键点

您可以从此示例中获得的主要见解是，如果您的某个页面看起来不像您想要的那样，则可以隔离上述哪些步骤出错。在浏览器中，右键单击并“查看源代码”。（注意：“查看源”可能无法在分屏模式下工作。）

然后，您可以看到生成的纯HTML（以及任何JavaScript或CSS）。

• 如果HTML代码看起来不像您期望的那样，那么服务器端就出现了问题。查找您vars_for_template 或您的Django模板标签中的错误。
• 如果生成HTML代码没有错误，那么可能是您使用HTML（或JavaScript）语法的问题。尝试将HTML中有问题的部分粘贴回模板，而不使用Django标记，并编辑它直到它产生正确的输出。然后重新放入Django标签，使其再次动态化。

 

模板块

而不是编写页面的完整HTML，例如：

您定义了2个块：

 

图像，视频，CSS，JavaScript等（静态文件）

以下是如何在页面中包含静态文件（.png，.jpg，.mp4，.css，.js等）。

_static/项目文件夹中有一个文件夹。创建一个包含所需名称的子文件夹（或使用现有的global/子文件夹），并将文件放在那里。

然后在模板中显示_static/my_app/my_image.png，使用：

如果文件在_static/global/my_image.png，你会这样做：

（如果您愿意，还可以将静态文件放在app文件夹中，在名为的子文件夹中static/your_app_name。）

如果静态文件在更改后仍未更新，则这是因为您的浏览器缓存了该文件。整页重新加载（通常是Ctrl + F5）

动态图像

如果图像/视频路径是可变的（如每轮显示不同的图像），您可以构建它pages.py并将其传递给模板，例如：

然后在模板中：

 

JavaScript和放置JavaScript / CSS代码的位置

 

这取决于您是希望将JS / CSS代码全局应用（a），（b）仅应用于一个应用程序，还是（c）仅应用于一个页面。

全局

要将样式或脚本应用于所有游戏中的所有页面，请修改模板_templates/global/Page.html。把任何脚本里面了，里面的任何样式。{% block global_scripts %}...{% endblock %}{% block global_styles %}...{% endblock %}

对于一个应用程序

要将样式或脚本应用于一个应用程序中的所有页面，请为应用程序中的所有模板创建基本模板，并将块调用app_styles或app_scripts放入此基本模板中。

例如，如果您的应用程序名称是public_goods，那么您将创建一个名为的文件public_goods/templates/public_goods/Page.html，并将其放入其中：

然后每个public_goods模板将从此模板继承：

只有一页

如果你有JavaScript和/或仅仅适用于单个页面的CSS代码，你可以把它直接在content块，或更好地组织，把它称为块scripts和styles。它们应该位于content块之外，如下所示：

这不是必须的，但是：

• 它使您的代码井井有条
• 它确保以正确的顺序加载内容（CSS，然后是页面内容，然后是JavaScript）。

自定义主题

如果要自定义oTree元素的外观，请参阅CSS选择器列表：

例如，要更改页面宽度，请将CSS放在基本模板中，如下所示：

要获取更多信息，请在浏览器中右键单击要修改的元素，然后选择“检查”。然后，您可以导航以查看不同的元素并尝试修改其样式：

如果可能，请使用上面的官方选择器之一。不要使用开头的任何选择_otree，并根据自举类，如不选择 btn-primary或card，因为这些都是不稳定的。

将数据从Python传递到JavaScript（json）

如果您需要将变量插入到JavaScript代码中，请将其写为而不仅仅是。{{ my_variable|json }}{{ my_variable }}

例如，如果您需要将播放器的支付传递给脚本，请按以下方式编写：

如果您不使用|json，则该变量可能不是有效的JavaScript。例子：

|json可用于简单的值，如1字典和列表等嵌套，等等。{'a': [1,2]}

|json 转换为JSON并将数据标记为安全（可信），以便Django不会自动转义它。

如上表所示，|json将自动在字符串周围加上引号，因此您无需手动添加它们：

如果您收到“无效过滤器”错误，请确保您 位于模板顶部。{% load otree %}

注意：|json模板过滤器替换旧safe_json 功能。但是，safe_json仍然有效。只使用一个或另一个，而不是两者。

 

关于PyCharm Professional的注意事项

 

如果您使用的是常规版PyCharm（Community Edition），请考虑升级到PyCharm Professional Edition，因为它提供了Django模板和JavaScript的语法高亮显示。

如果您是学生，教师或教授，PyCharm Professional是免费的。

安装专业版后，在设置中，导航到Languages＆Frameworks - > Django，选中“启用Django支持”并使用manage.py和settings.py将您的oTree文件夹设置为Django项目根目录。