YehYeh 記事本2.0

Version 0.8.3

竹科碼農的記事本

Hugo 佈景安裝及設定

2. 到Hugo網站選擇要使用的佈景

3. 下載佈景

  • https://themes.gohugo.io/hugo-theme-techdoc/
  • 切換到themes資料夾再執行git clone指令
cd themes
git clone https://github.com/thingsym/hugo-theme-techdoc.git

3. 網站設定

1. 複製佈景的設定

  • 將佈景的設定檔覆蓋原本的設定檔
  • themes\hugo-theme-techdoc\exampleSite\config.toml
  • 覆蓋 \config.toml
  • 將新文章預設格式覆蓋原本的新文章預設格式
    • themes\hugo-theme-techdoc\exampleSite\archetypes\default.md
    • 覆蓋 \archetypes\default.md

2. 修改config.toml

# https://themes.gohugo.io/hugo-theme-techdoc/
baseURL = "/"

languageCode = "zh-tw"
DefaultContentLanguage = "zh"
title = "YehYeh 記事本2.0"
theme = "hugo-theme-techdoc"

hasCJKLanguage = true
metaDataFormat = "yaml"

pygmentsCodeFences = true
pygmentsUseClasses = true

defaultContentLanguage = "zh"
defaultContentLanguageInSubdir= false
enableMissingTranslationPlaceholders = false

[Params]

    # Source Code repository section
    description = "竹科碼農的記事本"
    github_repository = "https://github.com/thingsym/hugo-theme-techdoc"
    version = "0.8.3"

    # Documentation repository section
    # documentation repository (set edit link to documentation repository)
    github_doc_repository = "https://github.com/thingsym/hugo-theme-techdoc"

    # Analytic section
    google_analytics_id = "" # Your Google Analytics tracking id
    tag_manager_container_id = "" # Your Google Tag Manager container id
    google_site_verification = "" # Your Google Site Verification for Search Console

    # Open Graph and Twitter Cards settings section
    # Open Graph settings for each page are set on the front matter.
    # See https://gohugo.io/templates/internal/#open-graph
    # See https://gohugo.io/templates/internal/#twitter-cards
    title = "Hugo Techdoc Theme 測試"
    #images = ["images/og-image.png"] # Open graph images are placed in `static/images`
    images = ["images/Test.jpg"] # Open graph images are placed in `static/images`

    # Theme settings section
    # Theme color
    # See color value reference https://developer.mozilla.org/en-US/docs/Web/CSS/color
    custom_font_color = ""
    custom_background_color = "DodgerBlue"

    # Documentation Menu section
    # Menu style settings
    menu_style = "slide-menu"                    # "open-menu" or "slide-menu"

    # Date format
    dateformat = "2006-01-02" # default "2 Jan 2006"
    # See the format reference https://gohugo.io/functions/format/#hugo-date-and-time-templating-reference

    # path name excluded from documentation menu
    menu_exclusion = [
        "archives",
        "archive",
        "blog",
        "entry",
        "post",
        "posts"
    ]

# Global menu section
# See https://gohugo.io/content-management/menus/
[menu]
  [[menu.main]]
      name = "Home"
      url = "/"
      weight = 1

  [[menu.main]]
      name = "Twitter"
      url = "https://twitter.com/thingsym"
      weight = 2

# Markup configure section
# See https://gohugo.io/getting-started/configuration-markup/
[markup]
  [markup.tableOfContents]
    startLevel = 2
    endLevel = 4
    ordered = false

執行佈景的範例網站

  1. 路徑切換到佈景資料夾裡的exampleSite themes/佈景資料夾/exampleSite
  2. 執行 hugo server --themesDir ../..

補充說明

  • 如果安裝多個佈景時,Hugo怎麼知道要使用那個佈景?
    • Hugo會依據config.toml裡的theme屬性來判定
  • 如果把佈景裡的exampleSite覆蓋到根目錄可以嗎?
    • 可以,但不建議…未來換佈景時檔案結構可能會愈來愈亂
Last updated on 2020-03-22
Published on 2020-03-22
Edit on GitHub