Template file being ignored by writeStats

Hello,

I have a partial (_brave-mobile.html) that is being ignored by writeStats. You can see most of the layouts folder below:

layouts
├── _default
│   ├── baseof.html
│   ├── latest.html
│   └── single.html
├── index.html
└── partials
    ├── _analytics.html
    ├── _brave-mobile.html
    ├── _build-channels.html
    ├── _footer.html
    ├── _hero.html
    └── _navigation.html

I’ve set the writeStats option to true in the config/_default/config.toml file:

[build]
  writeStats = true

The template being ignored looks like this:

<section id="brave-mobile" class="gradient--blurple-orange-with-overlay">
	<div class="text-center py-24 text-xl w-5/12 mx-auto">
		<img class="w-1/5 mx-auto" src="https://brave.com/wp-content/uploads/2018/10/mobile-1.svg" alt="brave mobile graphic" />
		<h2 class="text-5xl">Brave for Mobile</h2>
		<p>Brave is available as a fast, free, secure web browser for your mobile devices. Complete with a built-in ad blocker that prevents tracking and provides security protection with optimized data and battery performance.</p>
		<div class="flex justify-evenly mt-12 w-7/12 mx-auto">
			<a href="https://play.google.com/store/apps/details?id=com.brave.browser&amp;hl=en"><img class="w-40" src="https://brave.com/wp-content/uploads/2018/11/playstore.png" alt="Google Play Store button" /></a>
			<a href="https://apps.apple.com/us/app/brave-private-web-browser/id1052879175?mt=8&amp;ign-mpt=uo%3D4"><img class="w-40" src="https://brave.com/wp-content/uploads/2017/08/Download_on_the_App_Store_Badge_US-UK_200px.png" alt="Apple App Store button" /></a>
		</div>
	</div>
</section>

Any thoughts?

writeStats does not care about template files – only the HTML files that gets written to /public – which is the main point of the file (to catch dynamically created stuff).

So, if you’re template isn’t used, it’s classes etc. will not be written to the stats file.

Thanks, @bep! That partial is used by _default/latest.html:

{{ define "hero" }}
{{ partial "_hero" (dict "classes" "swoosh gradient--blurple-pink-with-overlay" "Page" . "heroContent" .Content ) }}
{{ end }}
{{ define "main" }}
    {{ partial "_build-channels" . }}
    {{ partial "_brave-mobile" . }}
{{ end }}

…which is in turn used for a content file called latest.md.

So the template file is being used (also evidenced by the contents being rendered), but the ids and classes are being ignored.

Curiously, I just discovered that if I switch the order of the two partials, writeStats picks everything up properly.

{{ define "main" }}
    {{ partial "_brave-mobile" . }}
    {{ partial "_build-channels" . }}
{{ end }}

Obviously doing this isn’t what I want to do given one section needs to come after the other, but I find that very interesting.

[UPDATE] digging into this further, I started messing with _build-channels.html to investigate whether it was blocking _brave-mobile.html from being analyzed. Here’s what _brave-channels.html looks like:

<section id="build-channels" class="py-24 bg-white">
    <div class="container">
        <div class="flex justify-between">
            <div class="w-23/50">
                <h2>Help improve Brave Beta</h2>
                <p>Brave Beta is a testing version but more stable platform of soon to be released features.&nbsp;We value your feedback and help in testing this early version of Brave.</p>
                <p>Brave is open source and always available to <a href="https://github.com/brave/brave-browser">review on GitHub.&nbsp;</a>For support, please visit <a href="https://community.brave.com/c/beta-builds" target="_blank" rel="noreferrer noopener">community.brave.com.</a></p>
                <a class="btn btn--medium btn--orange inline-block mt-4" href="https://community.brave.com/" target="_blank" rel="noreferrer noopener">Join the Brave Community</a>
            </div>
            <img class="w-23/50 pl-2" src="https://brave.com/wp-content/uploads/2018/10/contribute.svg" alt="" />
        </div>
    </div>
</section>
<section class="pb-24 gradient--white-lightgray">
    <div class="container">
        <div class="text-center w-5/6 mx-auto">
            <h2 class="text-4xl font-semibold">Brave Build Channels</h2>
            <p>Brave has a fast iterative development cycle that goes through stages. New features are typically introduced in the Nightly channel. After we’ve worked out the kinks we move them into the Beta build for a final check before merging them into the Release version of Brave that most use on a daily basis.</p>
        </div>
        <div class="flex justify-between text-center mt-8">
            <div class="w-15/50">
                <img class="mx-auto mb-3 w-1/6" src="https://brave.com/wp-content/uploads/2019/03/Beta-Copy-2.png" alt="Brave nightly channel logo">
                <h4 class="font-semibold text-3xl">Brave Nightly</h4>
                <p>Brave Nightly is our testing and development version of Brave. The releases are updated every night and may contain bugs that can result in data loss.</p>
                <a title="Learn more about Brave's nightly channel." href="/download-nightly/">Learn more about Brave Nightly</a>
            </div>
            <div class="w-15/50">
                <img class="mx-auto mb-3 w-1/6" src="https://brave.com/wp-content/uploads/2019/03/Beta-Copy.png" alt="Brave beta channel logo">
                <h4 class="font-semibold text-3xl">Brave Beta</h4>
                <p>Brave Beta is an early preview for new versions of Brave. This build showcases the newest advances that we’re bringing to our browser.</p>
                <a title="Learn more about Brave's beta channel." href="/download-beta/">Learn more about Brave Beta</a>
            </div>
            <div class="w-15/50">
                <img class="mx-auto mb-3 w-1/6" src="https://brave.com/wp-content/uploads/2019/03/Beta-Copy-3.png" alt="Brave release channel logo">
                <h4 class="font-semibold text-3xl">Brave Release</h4>
                <p>This is our&nbsp;<strong>official release version</strong>&nbsp;of Brave with new releases landing approximately every three weeks.&nbsp;</p>
                <a title="Learn more about Brave's release channel." href="/download/">Learn more about Brave Release</a>
            </div>
        </div>
    </div>
</section>

Upon removing things little by little, I determined that removing the title attribute from the last anchor tag fixes the problem. This is really perplexing, though, as none of the other title attributes seem to cause problems.

Mmmmm … just face the same situation (the missing class), and I’m puzzled.

  • Some simple classes are not taken in account when I use github.com/bep/hugo-starter-tailwind-basic. All works fine for all the other css. And all is OK without tailwind/purgecss.
  • The reason is : hugo_stats.json created is missing those classes.
  • My generated HTML is correctly having the classes (see one example below for the class crise) in the html.

Only pattern I see is that those missing classes belongs to the same .css.

<!-- Call To Action Section Start -->
<section id="call-to-action">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="block">
                    <h2 class="title wow fadeInDown" data-wow-delay=".2s" data-wow-duration="500ms">Besoin d&#39;un renseignement ? Prendre rendez-vous ?</h2>
                    <p class="wow fadeInDown" data-wow-delay=".4s" data-wow-duration="500ms">Appelez moi directement …</p>                                                            
                        <div class="phone-block click-to-tel ">
                            <a href="tel:&#43;33%209%2081%2045%2027%2039"
                                onclick="TelephoneFixeCta()"
                                class="btn btn-default btn-contact wow fadeInDown"
                                title="N° de téléphone">
                                <i class="ion-ios-telephone-outline"></i>&nbsp;&nbsp;&#43;33 9 81 45 27 39
                            </a>
                        </div>       
                    <a href="/informations/" class="btn btn-default btn-contact wow fadeInDown" data-wow-delay=".4s" data-wow-duration="500ms" title="Plus d'information">Comment venir au cabinet …</a>
        <div class="crise">
            <h3>Nouvelle adresse à Strasbourg pour le cabinet.</h3>
            <p>
                Afin de mieux vous accueillir, votre cabinet d&rsquo;ostéopathie est désormais installé au <strong>202 avenue de Colmar</strong>, au sein du cabinet <strong>pluri-santé 202</strong>, une structure pluridisciplinaire de plus de 400 m2.<br>En collaboration avec des <strong>sages-femmes</strong>, des <strong>kinésithérapeuthes</strong> et une <strong>naturopathe</strong>.<br>
                <br>Un accès facile au Neudorf/Meinau, au pied du <strong>tramway A ou E</strong> (arrêt Lycée Couffignal) ou en voiture avec un <strong>parking gratuit</strong> à 150m.<br>
            </p>
        </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Call To Action Section End -->
/* Communication de crise */
.crise {
  background: #e7d0e2;
  padding: 20px;
  margin: 10px;
  border: 2px solid #873c76;
  border-radius: 15px;
}
.crise h3{
  color: #873c76;
  text-align: center;
  font-size: 23px;
}
.crise p {
  color: #873c76;
  text-align: center;
}
{{ with site.Params.crise }}
    {{ if .enable }}
        <div class="crise">
            <h3 class="crise-titre">{{ .title }}</h3>
            <p class="crise-text">
                {{ .textcrise1 | markdownify }}<br>
                {{ .textcrise2 | markdownify }}<br>
            </p>
        </div>
    {{ end }}
{{ end }}

Not this cause.
If I add the class crise on an other part of my go-template code, it is recognised and add to the json. So should be the organisation of the HTML code/section/classes/ … Mmmm very strange.
I do not see any pattern.

OK. I could narrow the problem, and produce it at will.

Case 1 : Original code : The problem occurs in partial crise.html.

<a href="{{ site.Params.cta.btnURL | relURL }}" class="btn btn-default btn-contact wow fadeInDown" data-wow-delay=".4s" data-wow-duration="500ms" title="Plus d'information">{{ site.Params.cta.btnText }}</a>

{{ partial "crise.html" . }}

Case 2 : Not working either : If I add the class in a href => not added to json.

<a href="{{ site.Params.cta.btnURL | relURL }}" class="crise btn btn-default btn-contact wow fadeInDown" data-wow-delay=".4s" data-wow-duration="500ms" title="Plus d'information">{{ site.Params.cta.btnText }}</a>

Case 3 : And here we go ! : If I add the same line but with only the crise class it works !!

<a href="{{ site.Params.cta.btnURL | relURL }}" class="crise">{{ site.Params.cta.btnText }}</a>

And it also add some other missing classes I had in my partial: “crise”, “crise-text”,“crise-titre”,

So it seem that the parsing was interrupted or something.

[EDIT]

FOUND THE CAUSE

I could narrow the problem.
When I remove the title=“Plus d’information” (simplified case 2) it works too !

So the minimal code to have the problem is this line :

<a  href="{{ site.Params.cta.btnURL | relURL }}" class="crise" title="Plus d'information">{{ site.Params.cta.btnText }}</a>

So the culprit seems title=“Plus d’information” clashing with something.
Strange

Same problem than OP

Yes, this is the same pattern than OP. Problem occurs when there is a ' in title value.
Whoa ! Nasty one.

[EDIT] Filled a bug in GitHub : Class not writen in hugo_stats.json when there is an apostrophe (') in (a href) title value. · Issue #7746 · gohugoio/hugo · GitHub

It’s a bug. The HTML parser used is robust enough, but I vaguely remember having some “am I inside a quote”-logic when it comes to attributes, which obviously fails in this case … as a workaround you can … escape them.

1 Like

I confirm that your commit 1113441 fix this problem. many thanks Bep.