docs: correct the PurgeCSS template example

razonyang · Aug 21, 2022 · cb59826 · cb59826
1 parent c3c7028
commit cb59826
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 8 deletions.
diff --git a/exampleSite/content/docs/advanced/purgecss/index.md b/exampleSite/content/docs/advanced/purgecss/index.md
@@ -59,7 +59,13 @@ A common scenario is rendering HTML blocks using JavaScript, if you're using Jav
 
 {{% code/purgecss-template-partial %}}
 
-Hugo will calculate used CSS into `hugo_stats.json`, such as the `search-results` class.
+Hugo will calculate used CSS into `hugo_stats.json`.
+
+{{% code/purgecss-template-stat %}}
+
+As you can see, the CSS(`custom-widget-bar`) used inside `<script>` tag won't be included into `hugo_stats.json`, so we should use other HTML tags with the `d-none` class to wrap your template.
+
+> `d-none` is a Bootstrap CSS utility, equals to `display: none`.
 
 1. And then render the template via any template engines.
 

diff --git a/exampleSite/content/docs/advanced/purgecss/index.zh-hans.md b/exampleSite/content/docs/advanced/purgecss/index.zh-hans.md
@@ -58,7 +58,13 @@ PurgeCSS 需要设置以下配置。
 
 {{% code/purgecss-template-partial %}}
 
-Hugo 会将使用过的 CSS 计算到 `hugo_stats.json` 中，例如 `search-results`。
+Hugo 会将使用过的 CSS 计算到 `hugo_stats.json` 中。
+
+{{% code/purgecss-template-stat %}}
+
+正如你所看到的，在 `<script>` 标签中使用的 CSS（`custom-widget-bar`）不会被包含在 `hugo_stats.json` 中，所以我们应该使用其他带有 `d-none` 类的 HTML 标签来包装你的模板。
+
+> `d-none` 是 Bootstrap 中的一个 CSS 类，等同于 `display: none`。
 
 1. 然后通过任意的模板引擎渲染模板。
 

diff --git a/exampleSite/content/docs/advanced/purgecss/index.zh-hant.md b/exampleSite/content/docs/advanced/purgecss/index.zh-hant.md
@@ -58,7 +58,13 @@ PurgeCSS 需要設置以下配置。
 
 {{% code/purgecss-template-partial %}}
 
-Hugo 會將使用過的 CSS 計算到 `hugo_stats.json` 中，例如 `search-results`。
+Hugo 會將使用過的 CSS 計算到 `hugo_stats.json` 中。
+
+{{% code/purgecss-template-stat %}}
+
+正如你所看到的，在 `<script>` 標籤中使用的 CSS（`custom-widget-bar`）不會被包含在 `hugo_stats.json` 中，所以我們應該使用其他帶有 `d-none` 類的 HTML 標籤來包裝你的模板。
+
+> `d-none` 是 Bootstrap 中的一個 CSS 類，等同於 `display: none`。
 
 1. 然後通過任意的模板引擎渲染模板。
 

diff --git a/exampleSite/layouts/partials/hooks/footer-end.html b/exampleSite/layouts/partials/hooks/footer-end.html
@@ -7,3 +7,14 @@
         <img class="bg-light p-2" src="https://docsearch.algolia.com/img/docsearch-logo.svg" alt="Search powered by DocSearch" width="114" height="51" loading="lazy" />
     </a>
 </div>
+
+<div class="d-none" id="template-custom-widget-foo">
+    <div class="custom-widget-foo"></div>
+  </div>
+
+  <script type="text/html" id="template-custom-widget-bar">
+    <div class="custom-widget-bar">
+      NOTE THAT: ANY CSS INSIDE THE SCRIPT TAG WONT BE INCLUDED INTO THE STATS FILE.
+    </div>
+  </script>
+
diff --git a/exampleSite/layouts/shortcodes/code/purgecss-template-js.html b/exampleSite/layouts/shortcodes/code/purgecss-template-js.html
@@ -1,4 +1,4 @@
 ```js
-const tmplSearchResults = document.getElementById('template-search-results').innerHTML;
-render(tmplSearchResults, data);
+const tmpl = document.getElementById('template-custom-widget-bar').innerHTML;
+render(tmpl, data);
 ```
diff --git a/exampleSite/layouts/shortcodes/code/purgecss-template-partial.html b/exampleSite/layouts/shortcodes/code/purgecss-template-partial.html
@@ -1,7 +1,11 @@
 ```html
-<script type="text/html" id="template-search-results">
-  <div class="search-results">
-    ...
+<div class="d-none" id="template-custom-widget-foo">
+  <div class="custom-widget-foo"></div>
+</div>
+
+<script type="text/html" id="template-custom-widget-bar">
+  <div class="custom-widget-bar">
+    NOTE THAT: ANY CSS INSIDE THE SCRIPT TAG WONT BE INCLUDED INTO THE STATS FILE.
   </div>
 </script>
 ```
diff --git a/exampleSite/layouts/shortcodes/code/purgecss-template-stat.html b/exampleSite/layouts/shortcodes/code/purgecss-template-stat.html
@@ -0,0 +1,6 @@
+```bash
+$ cat hugo_stats.json | grep custom-widget-
+  "custom-widget-foo",
+  "template-custom-widget-foo",
+  "template-custom-widget-bar",
+```