My configuration of Hugo

I didn't do enough registraition when I construct the website, it was a pity, but now I will try to register every change that I have made in the website.

Fonctions

Hugo has many implemented functions:

• eq
• findRE
• replaceRE
• reverse, which I used to enable the descending order of the list of articles.
• partial

equal

In Hugo, there exist 3 type of so-called equal, they are:

• :=: to equal the variable to a value
• =: to equal the variable to another variable
• eq

wiki.en CNN

{/{if eq $display_text ``}}
{/{display_text := $text}}
{/{- end -}}
here is the text: {$text}<br>
here is the displayed text:{$display_text}<br>
Is displayed text empty? :{/{eq $display_text ``}}<br>

here is the text: CNN
here is the displayed text:
Is displayed text empty? :true
CNN

shortcode

PDF, bilibili, youtube, innerlink, douban bilibili

Advanced

Advanced Turorel(cn)

More Components

Universe

We can find more beautiful components here.

Order descending and order ascending of the list

 {/- if gt $pages $pages_pin -}}

 <div class="posts-group" id="desc" style="display: block;">
  <div class="post-year" id="{/{ .Key }}">{/{ .Key }}</div>
  <ul class="posts-list">
   {/{- range (where .Pages ".Params.pin" "ne" true) }}
   <li class="post-item">
    <a href="{/{.Permalink}}">
     <span class="post-title">{/{.Title}}</span>
     <span class="post-day">{/{ .Date.Format .Site.Params.dateformShort }}</span>
    </a>
    {/{- if and .Page.Params.description .Site.Params.descriptionInPosts -}}

    <span class="post-description">{/{ .Page.Params.description }}</span>
    {/{- end -}}
   </li>
   {/{- end }}
  </ul>

 </div>
 <div class="posts-group" id="asc" style="display: none;">
  <div class="post-year" id="{/{ .Key }}">{/{ .Key }}</div>
  <ul class="posts-list">
   {/{- range (where .Pages ".Params.pin" "ne" true).Reverse }}
   <li class="post-item">
    <a href="{/{.Permalink}}">
     <span class="post-title">{/{.Title}}</span>
     <span class="post-day">{/{ .Date.Format .Site.Params.dateformShort }}</span>
    </a>
    {/{- if and .Page.Params.description .Site.Params.descriptionInPosts -}}

    <span class="post-description">{/{ .Page.Params.description }}</span>
    {/{- end -}}
   </li>
   {/{- end }}
  </ul>

 </div>
 {/- end -}}

And this is the javascript code:

<script>
 document.addEventListener('DOMContentLoaded', (event) => {
  const checkbox = document.getElementById('checkAsc');
  const descDiv = document.getElementById('desc');
  const AscDiv = document.getElementById('asc');

  checkbox.addEventListener('change', function () {
   if (this.checked) {
    descDiv.style.display = 'none';
    AscDiv.style.display = 'block';
   } else {
    descDiv.style.display = 'block';
    AscDiv.style.display = 'none';
   }
  });
 });
</script>

And you can find your own style of button in the website mentioned in #More Components.

Comment

I referred to this, which is in Chinese.

read time

We can modify readTime.html to adapt the read time format. I add show the number of words directly. And I modify the reading speed rate because the default rate is too low.

Shortcode

Reference 1

Code block

Documentations

---