This section of the tutorial walks through the HTML file, thumbs.html, that is part of the Thumbs XBlock in the XBlock SDK.
If you completed the steps in Build an XBlock: Quick Start, you can find
this file locally at xblock_development/xblock-sdk/sample_xblocks/thumbs/static/html/thumbs.html
.
In the XBlock HTML file, you define the HTML content that is added to a fragment. The HTML content can reference the XBlock fields. The fragment is returned by the view method, to be displayed by the runtime application.
<p>
<span class='upvote'><span class='count'>{self.upvotes}</span>↑</span>
<span class='downvote'><span class='count'>{self.downvotes}</span>↓</span>
</p>
Note the following details about the HTML file.
class
values reference styles in the thumbs.css
file. For more
information, see The XBlock Stylesheets.self.upvotes
and self.downvotes
reference the fields in
the XBlock Python class.