함부르크는 keichi의 비엔나 테마를 기반으로 한 Hugo의 간단하고 깔끔한 블로그 테마입니다.
내가 누군가에게 말하고 싶은 주목할만한 기능은 다음과 같습니다.
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
파일을 생성하고 필요한 코드를 이 파일에 넣어야 합니다. 파일(있는 경우)은 다른 추적 메커니즘 옆의 바닥글에 포함됩니다.
나는 이것을 tracking.html
에 넣은 JavaScript 또는 이미지 기반 스니핑을 제공하는 Matomo 분석 소프트웨어로 테스트했습니다.