模板
您应用的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项目根目录。