Detailed explanation of Hugo playground content initialization example

text

The experience of building a site with Hugo is great. First of all, the construction speed is fast, and secondly, it is simple to use.hugoOur site is ready.

During the build process, Hugo provides a wealth of built-in function functions that can provide you with information about almost any site you need during the build process. Let the theme help with all presentation and layout-related issues with reusable templates. Let the author focus more on content creation.

Hugo Playground

The site is built and the written content is converted into website resources that the web server can understand. For example, when we write, we use the Markdown format, and the generated website resources are usually in HTML format.

Here is a simple initialization blog content:

--  --
theme = "mytheme"
contentDir = "mycontent"
--  --
Hello project!
-- themes/mytheme/ --
Hello theme!
-- mycontent/blog/ --
---
title: "Post Title"
---
### first blog
Hello Blog
-- layouts/ --
{{ $entries := (readDir ".") }}
START:|{{ range $entry := $entries }}{{ if not $ }}{{ $ }}|{{ end }}{{ end }}:END:
-- layouts/_default/ --
{{ .Content }}
===
Static Content
===

You can see that we have customized a thememytheme, only one file, and no actual template file. This will help us understand how topics are nested and loaded in the following construction process explanation.

Our content folder ismycontent, There is a simple blog post /blog/ in the blog directory. If you want to access this blog post independently, you need to generate an HTML file for it so that we can access it in the browser.

In the example, in order to generate the homepage and blog, we also created two templates under layouts. One is the homepage template, and the other is the template_default/ that you will use in a single article.

Parse the above text through golang tools txtar, which facilitates us to convert it into disk files with the following structure:

.
├── 
├── layouts
│  ├── _default
│  │   └── 
│  └── 
├── mycontent
│   └── blog
│     └── 
├── 
└── themes
    └── mytheme
        └── 

By building through the Hugo command, the following site resources can be generated:

➜  public tree
.
├── blog
│   └── 
├── 
└── 

And contains the information we want:

Site homepage

➜  public cat 
START:|||:END:%

Blog Page

➜  public cat blog/
<h3 >first blog</h3>
<p>Hello Blog</p>
===
Static Content
===
  %

So how did Hugo's magic come about?

In order to understand the core principles of Hugo construction, the latest Hugo source code is cut to remove unnecessary "noise" at the current stage. In combination with our example above, a minimum working source code library was generated manually -Hugo Playground. To ensure that we can play in this amusement park, focus on core principles, and enjoy the entire source code learning process.

By command:

git ls-files | grep '.go' | xargs wc -l

Statistics separatelygohugoio/hugoandhugo playgroundnumber of lines of code. The data we get are163075and33990OK.

It has been reduced by nearly four times!

I believe that all the readers will be shocked and their confidence will increase! It turns out that you can be so happy to read the source code. Please prepare a small stool for melon seed drinks, dear readers, please listen carefully.

Show Me The Code

package main
import (
   "bytes"
   "fmt"
   "path/filepath"
   "/x/tools/txtar"
)
// File structure// file name:// File content: theme = 'mytheme'var files = "--  --\n" +
   "theme = 'mytheme'"
func main() {
   // parse the above file structure   data := ([]byte(files))
   ("File start:")
   // traverse all files generated by parsing, and obtain file names and file data through the File structure   // Get the file name   // Get file data   for _, f := range  {
      filename := ("workingDir", )
      data := (, []byte("\n"))
      (filename)
      (string(data))
   }
   ("File end.")
}

Output:

# After parsing, get the file and the following file contents# workingDir is our working directory, usually the file directory to be writtenFile start:
workingDir/
theme = 'mytheme'
File end.

Try it yourself

The above is the detailed explanation of the Hugo Playground content initialization example. For more information about Hugo content initialization, please pay attention to my other related articles!