ฮัมบูร์กเป็นธีมบล็อกที่เรียบง่ายและสะอาดตาสำหรับ Hugo โดยอิงจากธีมเวียนนาจาก keichi
คุณสมบัติเด่นที่ฉันอยากจะบอกใครสักคนคือ:
ในไดเร็กทอรีไซต์ Hugo ของคุณ ให้รัน:
git clone https://github.com/hauke96/hugo-theme-hamburg.git themes/hamburg
ธีมควรอยู่ใน themes/hamburg/
คุณสามารถระบุตัวเลือกต่อไปนี้ใน config.toml
(หรือ config.yaml
/ config.json
) ของเว็บไซต์ของคุณเพื่อใช้คุณสมบัติของธีมนี้:
baseurl = " http://your-site.com "
defaultContentLanguage = " en "
defaultContentLanguageInSubdir = " true "
title = " Your site title "
theme = " hamburg "
[ params ]
# Short subtitle/tagline. This is displayed in the header.
themecolor = " #hexcolor " # Defines the tab color in Chrome for Android.
# To load additional CSS styles
customCSS = [ ' hamburg.css ' ]
# Show this very user-friendly and absolutely not annoying GDPR notice at the bottom of the page
ShowGDPRNotice = true
subtitle = " The great example site of the hugo-hamburg-theme "
# Since 0.57.0 there's the concept of "main sections". The files for the section "posts" are in "./content/posts/".
mainSections = [ " posts " ]
[ languages ]
[ languages . en ]
languageCode = " en "
languageName = " English "
subtitle = " A simple subtitle "
# Copyright notice. This is displayer in the footer.
copyright = " © some license "
[ languages . en . menu ]
[[ languages . en . menu . main ]]
name = " About "
identifier = " about "
url = " pages/about "
[ languages . de ]
languageCode = " de "
languageName = " Deutsch "
subtitle = " Ein einfacher Untertitel "
copyright = " © eine Lizenz "
[ languages . de . menu ]
[[ languages . de . menu . main ]]
name = " Über "
identifier = " about "
url = " pages/about "
vienna
เพิ่มเติม -พารามิเตอร์ธีมมีพารามิเตอร์อื่นจากธีมเวียนนาดั้งเดิมที่ฉันยังไม่เคยใช้ ส่วนใหญ่อาจ ไม่ทำงาน อีกต่อไป ดังนั้นจึงไม่มีการรับประกัน:
[ params ]
# Social accounts. Link to these accounts are displayed in the header and
# footer.
twitter = " Your Twitter username "
github = " Your GitHub username "
gitlab = " Your GitLab username "
linkedin = " Your LinkedIn username "
googleplus = " Your Google+ user id "
facebook = " Your Facebook username "
reddit = " Your Reddit username "
hackernews = " Your Hacker News username "
stackoverflow = " Your Stackoverflow user id (number) "
keybase = " Your keybase.io username "
instagram = " Your Instagram username "
# Disqus shortname
disqus = " Your disqus shortname "
# Google Analytics API key.
ga_api_key = " Your Google Analytics tracking id "
# Mixpanel API key.
mixpanel_api_key = " Your Mixpanel API key "
มีตัวเลือกบางอย่างที่คุณสามารถตั้งค่าไว้ที่ส่วนหัวของโพสต์หรือเพจได้:
# The date will be at the bottom of the page at the "Posted on ..." label
date = " 2018-08-13T15:38:27+02:00 "
title = " Erster Eintrag "
draft = true
author = " hauke "
# The summary will be shown at the start page or other page/post lists
summary = " Dies ist nur ein Testbeitrag um die Website zu testen. "
# This will ensure that the date is not printed
noshowdate = true
มีรหัสย่อง่ายๆ เพื่อทำให้สิ่งต่างๆ ง่ายขึ้น
สร้างลิงก์ง่ายๆ ไปยังหน้าแท็ก:
I like {{< linkTag veggy-food "yummi vegetarian food" >}}.
รวมรูปภาพและเปิดในแท็บใหม่เมื่อคลิก:
{{< img "photo.png" "What a lovely picture" >}}
สร้างลิงค์ไปยังรูปภาพที่กำหนด
{{< imgUrl "photo.png" "link text" >}}
ปรับขนาดรูปภาพตามขนาดที่กำหนดและฝังไว้เหมือนกับรหัสย่อ img
{{< imgUrl "photo.png" "What a lovely picture" "500x" >}}
(ภาพนี้ปรับขนาดความกว้างเป็น 500 พิกเซล ความสูงจะถูกกำหนดโดยอัตโนมัติ)
ธีมนี้จะอ่านข้อมูลของผู้เขียนตามรหัสภาษาของหน้า
หากต้องการสนับสนุนผู้เขียนหลายคน ให้สร้างไฟล์ data/<lang>/authors/name.toml
(เช่น เช่น data/en/authors/hauke96.toml
) ไฟล์นี้มีข้อมูลเกี่ยวกับผู้เขียน:
name = " Your name "
avatar = " /images/avatar.jpg "
contact = " mailto:[email protected] "
bio = " Something about you "
หากต้องการรองรับหลายภาษา ให้สร้างหลายไดเร็กทอรีในไดเร็กทอรี data
ดังนั้นสำหรับภาษาเยอรมันในฐานะภาษาที่สอง ( languageCode
จะเป็น de
) ตัวอย่างข้างต้นก็จะมีไฟล์ data/de/authors/hauke96.toml
ด้วย
คุณสามารถใช้การกำหนดค่าข้างต้นกับ Google Analytics หรือใช้ข้อมูลโค้ด JavaScript ของคุณเองเพื่อดำเนินการดังกล่าว
สำหรับข้อมูลโค้ด JavaScript ที่กำหนดเอง คุณต้องสร้างไฟล์ layouts/partials/tracking.html
และใส่โค้ดที่จำเป็นลงในไฟล์นี้ ไฟล์ (ถ้ามี) จะถูกฝังไว้ในส่วนท้ายถัดจากกลไกการติดตามอื่นๆ
ฉันทดสอบสิ่งนี้ด้วยซอฟต์แวร์วิเคราะห์ Matomo ซึ่งมี JavaScript หรือสนิปแบบรูปภาพที่ฉันใส่ลงใน tracking.html