Learn Javascript
Tutorial

準備

  1. 💊💊上課用模板
  2. 看看有沒有裝hugo 下載,安裝則看下圖
    more
  3. 設定執行環境(在電腦教室直接解壓縮,我們只需要hugo.exe放在子目錄)
    more
  4. 參考步驟節錄 
    hugo new site myweb #🏷️
cd myweb 
# 建立簡單範本
hugo new theme exampleTheme # 🏷️
# clone 別人的範本
#git submodule add  https://github.com/gcushen/hugo-academic.git themes/academic
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke #🏷️

echo theme = ananke >> config.toml # 🏷️

hugo new posts/my-first-post.md
    hugo new site 產生的目錄結構
    .
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
    └── exampleTheme
        ├── LICENSE
        ├── archetypes
        │   └── default.md
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   └── partials
        │       ├── footer.html
        │       ├── head.html
        │       └── header.html
        ├── static
        │   ├── css
        │   └── js
        └── theme.toml

自建立theme

  1. layout/index.html內容原本是空的,加入如下內容,可以把content/_index.md的內容顯示
{{ .Content }}
  1. 'baseof.html` 
    <!DOCTYPE html>
<html>
  {{- partial "head.html" . -}}
  <body>
    {{- block "main" . }}
    {{- end -}}    
  </body>
</html>
  2. list.html 
    {{ define "main" }}
  {{ .Content }}  
  {{ range .RegularPages.ByTitle }}
        <a class="text-body" href="{{ .RelPermalink }}">{{ if .Draft }}DRAFT: {{end}}{{ .Title }}</a>
  {{- end -}}
{{ end }}
  3. single.html 
    {{ define "main" }}
    {{ .Content }}
{{ end }}

config.toml

config.toml 中

uglyURLs = true

以子目錄post為例

  • false
    • 翻譯成hostURL/post/
  • true
    • 翻譯成hostURL/post.html
      裡面的檔案,例如xx.md
  • false
    • 翻譯成hostURL/post/xx
  • true
    • 翻譯成hostURL/post/xx.html

常用hugo指令

# 輸出HTML
hugo

# 本地測試+草稿檔案
hugo server -D

# 建立網站
hugo new site
# 建立主題
hugo new theme exampleTheme
# 建立文件
hugo new path/to/file.md

# 列出內容
hugo list drafts
hugo list expired
hugo list future

# Garbage Collection, removes generate resources like resized images
hugo --gc
hugo server -D --navigateToChanged --watch --disableFastRender

文件panel

draft: true

expiryDate: 2018-05-04T12:30+01:00
# 文章會在這個日期之後不顯示,除非 hugo --buildExpired 選項。

publishDate: 2018-05-04T12:30+01:00
# 預設發布日期

複雜的theme

  1. 建立空的git repo(這裡https://github.com/airbone5/myweb.git)
  2. 建立根目錄和複製現有的theme 
    cd mytest
hugo new site myweb
cd myweb
cd themes
git clone https://github.com/matcornic/hugo-theme-learn.git
    目前的目錄結構
    ```
C:.
└─myweb
    ├─archetypes
    ├─content
    ├─data
    ├─layouts
    ├─static
    └─themes
        └─hugo-theme-learn
            ├─archetypes
            ├─exampleSite
            │  ├─content
            │  │  ├─basics
            │  │  │  ├─configuration
            │  │  │  │  └─images
            │  │  │  ├─installation
            │  │  │  │  └─images
            │  │  │  ├─requirements
            │  │  │  │  └─images
            │  │  │  └─style-customization
            │  │  │      └─images
            │  │  ├─cont
            │  │  │  ├─i18n
            │  │  │  │  └─images
            │  │  │  └─pages
            │  │  │      └─images
            │  │  └─shortcodes
            │  │      ├─attachments.en.files
            │  │      ├─attachments.fr.files
            │  │      └─children
            │  │          ├─children-1
            │  │          │  └─children-1-1
            │  │          │      └─children-1-1-1
            │  │          │          └─children-1-1-1-1
            │  │          │              └─children-1-1-1-1-1
            │  │          ├─children-2
            │  │          ├─children-3
            │  │          └─children-4
            │  ├─layouts
            │  │  ├─partials
            │  │  └─shortcodes
            │  └─static
            │      ├─css
            │      ├─fonts
            │      └─images
            │          └─showcase
            ├─i18n
            ├─images
            ├─layouts
            │  ├─partials
            │  ├─shortcodes
            │  └─_default
            └─static
                ├─css
                ├─fonts
                ├─images
                ├─js
                ├─mermaid
                └─webfonts
```
  3. 設定config.toml 
    baseURL = 'https://airbone5.github.io/myweb/' # 🏷️
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "hugo-theme-learn" #🏷️
publishDir = "docs" #🏷️
  4. 測試 
    ..\hugo server #🏷️
  5. 推到自己的git repo 
    git init .
git add . #❌😒
git add . # 🏷️
git push
  6. 但是這時候,還沒有網頁,只有原始檔案,因此到github setting裡面 設定網頁指向。(見課堂)
  7. 產生網頁 
    ..\hugo
  8. 推到git repo
  9. done.

建立自己的主題

關鍵字: build hugo theme