Template names in HTML output
Viewing a page of XenForo HTML output and trying to work out how it was built, when it may contain snippets of many different templates can be challenging.
Or at least, it was.
While we have previously output a
data-template
attribute in the
<body>
tag to help developers and designers identify the main content template in use, we have now expanded the system considerably.
Now, by enabling the
Embed template names in HTML option from the
Appearance options section, your HTML output will include
data-template-name
attributes that make it easy to identify the template responsible for the particular part of the page you are inspecting.
View attachment 294097
These attributes are shown
only to authenticated administrators.
HTML:
<html data-template-name="PAGE_CONTAINER" id="XF" lang="en-US" dir="LTR" data-xf="2.3" data-app="public" ...>
HTML:
<div data-template-name="thread_view" class="block block--messages" ...>
These
data-template-name
attributes are
not part of the templates themselves, but rather they are added by the final output renderer, so you don't need to worry about keeping them updated, or cluttering up your template editing experience.
In practice,
data-template-name
attributes are added to the outermost rendered HTML tag in each template. There are a handful of instances where there is content in a template
prior to an HTML tag, in which case the renderer will output that content prior to the labelled tag, but it will still be far easier to identify the responsible template than before.
The
value of the
data-template-name
attribute is not limited to template names alone. In cases where the output comes from a template
macro, the value of the attribute will include both the name of the template
and the name of the macro.
HTML:
<article data-template-name="post_macros::post" class="message message--post" ...>
View attachment 294096
Note that when enabled, these
data-template-name
tags are
only output to authenticated administrators, so you should not rely on them as CSS selectors, unlike the original
body[data-template]
selector that is safe to use.
We have used
data-template-name
rather than reusing
data-template
as used in the
<body>
tag to avoid any potential CSS collisions where on-page styling has been attached to the
data-template
attribute, although we will
probably use
data-template
for this feature in XenForo 3, and move the
data-template
attribute from the
<body>
tag to the
<html>
tag with a more descriptive name like
data-content-template
or something like that...