# Zzo theme for Hugo [English](https://github.com/zzossig/hugo-theme-zzo/blob/master/README.md) | ํ๊ตญ์ด ๐ฅ๐ฅ๐ฅ๐ค์ต์๋ก ์ง์๊ฐ๋ฅํ Hugo ๋ฒ์ ์ด 0.60.0์ผ๋ก ๋ณ๊ฒฝ๋์์ต๋๋ค. ์ด์ ๋ฒ์ ๊ณผ๋ ๋ค๋ฅด๊ฒ ์์ ๋งํฌ๋ค์ด ๋ ๋๋ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ฒด๊ฐ ๋ณ๊ฒฝ๋์ด(blackfridy์์ goldmark๋ก), ํน์ฌ ์ด์ ๋ฒ์ ์ ์ฌ์ฉํ๊ณ ๊ณ์๋ค๋ฉด, ์ต์ Hugo ๋ฒ์ ์ ์ค์นํ์๋๊ฑธ ๊ถ์ฅ๋๋ฆฝ๋๋ค.๐ฅ๐ฅ๐ฅ ํด๋ฆญํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. Zzo theme์ ๋ง์ ๊ธฐ๋ฅ์ ์ง์ํ๊ณ ์๊ณ ์์ต๋๋ค. ๊ธฐ์ ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๊ธฐ์ ์ต์ ํ ๋์ด์์ต๋๋ค!(์ ์ด๋ ์ ์๊ฐ์...) Zzo theme์ ์ด์ฉํ ์ ๊ฐ์ฅ ๋งค๋ ฅ์ ์ธ ํฌ์ธํธ ํ๊ฐ์ง๋, ํ๊ธ๋ก ์ ์ ์ํตํ ์ ์๋ค๋ ์ ? ์ ๋๋ค. ## Documentation ์๋ฌธ๋ฒ์ ๋ํ๋จผํธ [https://zzodocs.netlify.com/docs/](https://zzodocs.netlify.com/docs/) ## Table of contents * [๊ธฐ๋ฅ](#features) * [์ต์ ํด๊ณ ๋ฒ์ ](#minimum-hugo-version) * [์ค์น](#installation) * [์ ๋ฐ์ดํธ](#updating) * [์์ ์ฌ์ดํธ ๋๋ฆฌ๊ธฐ](#run-example-site) * [์ค์ ](#configuration) * [๊ฐค๋ฌ๋ฆฌ](#gallery) * [์ปจํ ํ์ด์ง](#contact-page) * [ํ ํฌ ํ์ด์ง](#talks-page) * [์ผ์ผ์ด์ค ํ์ด์ง](#showcase-page) * [๋ค๊ตญ์ด](#multi-language) * [์ ์](#author) * [Favicon](#favicon) * [์ปค์คํฐ๋ง์ด์ง](#customizing) * [์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ](#external-library) * [Shortcodes](#shortcodes) ## Features * ๋ค์ํ ์คํจ ์ง์(dark, light, solarized, ...) * ๋ชจ๋ฐ์ผ ๋ฉ๋ด * ์ต์ HTML5, CSS ๊ธฐ์ ์ด์ฉ * ์ฌํํ ๋ธ๋ก๊ทธ * ๊ฒ์ ์์ง ์ต์ ํ (SEO) * ๋ค๊ตญ์ด ์ง์ (i18n) * ๋ฐ์ํ ๋์์ธ * RSS feed ์ง์ * ๊ฒ์ (์ง์ ์์ ) * ๊ฐค๋ฌ๋ฆฌ ์ง์ * ์ฝ๋ ํ์ด๋ผ์ดํธ * ํ ํฌ ํ์ด์ง * ์ผ์ผ์ด์ค ํ์ด์ง ## Minimum Hugo version ์ต์ ์๊ตฌ Hugo ๋ฒ์ ์ 0.60.0 ์ ๋๋ค. ## Installation ์ฐ์ ์ค์ ํ์ผ์ ๋ง๋์ ์ผ ํฉ๋๋ค. ์ค์ ํ์ผ์ด ์๊ฑฐ๋ ์ค์ ๊ฐ์ด ์๋ชป ๋ ๊ฒฝ์ฐ, ์คํ์ด ์๋์ค ์ ์์ต๋๋ค. [์ค์ ](#configuration) ๋งํฌ๋ฅผ ์ฐธ์กฐํ์ฌ ์ค์ ํ์ผ์ ๋ง๋ค์ด์ฃผ์ธ์. ์ค์ ํ์ผ์ ๋ค ๋ง๋์ จ์ผ๋ฉด, theme ํด๋์ zzo ํด๋๋ฅผ ๋ง๋ค๊ณ , ๊ทธ๊ณณ์ ์ด ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ๋ค์ด๋ก๋ ํ์ ํ์ผ์ ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ ํ์๋ฉด ๋ฉ๋๋ค. ์ด๋ ๊ฒ ํ์ผ์ ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ ํ์๋ฉด, ๋์ค์ ์ ๊ฐ ์ฌ๋ฌ๊ฐ์ง ๋ฒ๊ทธ๋ ์ด์๋ฅผ ์ ๋ฐ์ดํธ ํ์ ๋, ๋์ด ๋ง๋์ ๋ธ๋ก๊ทธ๋ฅผ ์ต์ Zzo theme์ผ๋ก ์ ๋ฐ์ดํธ ํ๊ณ ์ถ์ผ์๋ฉด ํด๋น Zzo theme์ ์ง์ฐ๊ณ ๋ค์ ๋ค์ด๋ก๋ ํ ๋ค์, ๋ณต๋ถํ์๋ฉด ๋๊ฒ ์ต๋๋ค. ```bash $ git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo ``` ๊นํ์ ์ด์ฉํ์ฌ ๋ธ๋ก๊ทธ๋ฅผ ๊ด๋ฆฌํ์ ๋ค๋ฉด, ์ญ๋ชจ๋์ ์ฌ์ฉํ์ฌ Zzo theme์ ์ฝ๊ฒ ์ต์ ๋ฒ์ ์ผ๋ก ์ ์งํ์ค ์ ์์ต๋๋ค. ๋ฃจํธ ํด๋์์ ๋ค์ ์ฝ๋๋ฅผ ์ ๋ ฅํด์ฃผ์๋ฉด submodule๋ก์จ Zzo theme์ด ์ค์น๋ฉ๋๋ค: ```bash git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo ``` ## Updating From the root of your site: ```bash git submodule update --remote --merge ``` ## Run example site From the root of themes/zzo/exampleSite: ```bash hugo server --themesDir ../.. ``` ## Configuration 0. ์ ๊ฐ์ ๊ฒฝ์ฐ, ๋๋ ํ ๋ฆฌ ํ๋๋ฅผ ๋ง๋ค๊ณ ๊ทธ๊ณณ์ ๋ค์๊ณผ๊ฐ์ด ์ฌ์ดํธ๋ฅผ ๋ง๋ญ๋๋ค. ```bash hugo new site . ``` 1. 0๋ฒ ๋จ๊ณ์์ ๋ง๋์ ๋๋ ํ ๋ฆฌ๋ก ๋ค์ด๊ฐ์ฃผ์ธ์. config.toml ํ์ผ์ด ๋ณด์ด์ ๋ค๋ฉด, ๊ณผ๊ฐํ๊ฒ ์ง์์ฃผ์ธ์. ์๋ ๋จ๊ณ๋ค์ ์ ๊ฐ ์ฌ์ฉํ๋ config ํ์ผ๋ค์ ๋๋ค. ๋ชจ๋ ๊ทธ๋ฅ ๋ณต์ฌ, ๋ถ์ฌ๋ฃ๊ธฐ ํด์ ํ์ผ์ ๋ง๋์๋ฉด ๋๋๋ฐ, ๊ท์ฐฎ์ผ์ ๋ถ๋ค์ exampleSite ํด๋์ ์๋ config ํด๋๋ฅผ ๋ฃจํธ ๋๋ ํ ๋ฆฌ์ ๊ทธ๋ฅ ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ ํ์ ๋ ๋ฉ๋๋ค. ์๋๋ ์ค์ ํ์ผ ๊ตฌ์กฐ๊ตฌ์. _defaultํด๋์ _(์ธ๋์ค์ฝ์ด) ๋บด๋จน์ง ๋ง์ธ์! ```bash root โโโ config โ โโโ _default โ โ โโโ config.toml โ โ โโโ languages.toml โ โ โโโ menus.en.toml โ โ โโโ params.toml ``` 2. config.toml ```bash baseURL = "http://example.org/" # The URL of your site. title = "Hugo Zzo Theme" # Title of your site theme = "zzo" # Name of Zzo theme folder in `themes/`. defaultContentLanguage = "en" # Default language to use (if you setup multilingual) defaultContentLanguageInSubdir = true # baseURL/en/, baseURL/kr/ ... hasCJKLanguage = true # Set `true` for Chinese/Japanese/Korean languages. summaryLength = 70 # The length of a post description on a list page. buildFuture = true # if true, we can use future date for talks page copyright = "ยฉ{year}, All Rights Reserved" # copyright symbol: $copy; current year: {year} timeout = 10000 enableEmoji = true paginate = 13 # Number of items per page in paginated lists. rssLimit = 100 enableGitInfo = false # When true, the modified date will appear on a summary and single page. Since GitHub info needs to be fetched, this feature will slow down to build depending on a page number you have googleAnalytics = "" [markup] [markup.goldmark] [markup.goldmark.renderer] hardWraps = true unsafe = true xHTML = true [markup.highlight] codeFences = true lineNos = true lineNumbersInTable = true noClasses = false [markup.tableOfContents] endLevel = 3 ordered = false startLevel = 2 [outputs] home = ["HTML", "RSS", "JSON"] [taxonomies] category = "categories" tag = "tags" series = "series" ``` 3. languages.toml ```bash [en] title = "Hugo Zzo Theme" languageName = "English" weight = 1 [ko] title = "Hugo Zzo Theme" languageName = "ํ๊ตญ์ด" weight = 2 ``` 4. menus.en.toml You shoud make your own menu. ```bash [[main]] identifier = "about" name = "about" url = "about" weight = 1 [[main]] identifier = "archive" name = "archive" url = "archive" weight = 2 [[main]] identifier = "gallery" name = "gallery" url = "gallery" weight = 3 [[main]] parent = "gallery" name = "cartoon" url = "gallery/cartoon" [[main]] parent = "gallery" name = "photo" url = "gallery/photo" [[main]] identifier = "posts" name = "posts" url = "posts" weight = 4 [[main]] identifier = "notes" name = "notes" url = "notes" weight = 5 ... ``` 5. params.toml ```bash logoText = "Zzo" # Logo text that appears in the site navigation bar. logoType = "short" # long, short -> short: squre shape includes logo text, long: rectangle shape not includes logo text logo = true # Logo that appears in the site navigation bar. description = "The Zzo theme for Hugo example site." # for SEO custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js useFaviconGenerator = false # https://www.favicon-generator.org/ languagedir = "ltr" # ltr / rtl themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme notAllowedTypesInHome = ["contact", "talks", "about", "showcase"] # not allowed page types in home page. type can be set in front matter or default to folder name. notAllowedTypesInHomeSidebar = ["about", "archive", "showcase"] # not allowed page types in home page sidebar(recent post titles). notAllowedTypesInArchive = ["about", "talks", "showcase"] # not allowed page types in archive page notAllowedTypesInHomeFeed = ["about", "archive", "contact", "talks", "showcase", "publication", "presentation", "resume", "gallery"] viewportSize = "normal" # widest, wider, wide, normal, narrow enableUiAnimation = true hideSingleContentsWhenJSDisabled = false # header homeHeaderType = "text" # text, img, slide # menu showMobileMenuTerms = ["tags", "categories", "series"] # navbar enableThemeChange = true # site color theme # body enableBreadcrumb = true # breadcrumb for list, single page enableSearch = true # site search with fuse enableSearchHighlight = true # when true, search keyword will be highlighted enableGoToTop = true # scroll to top enableWhoami = true # at the end of single page summaryShape = "classic" # card, classic, compact archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year archivePaginate = 13 # items per page paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc talksPaginate = 8 # items per page talksGroupByDate = "2006" # "2006-01": group by month, "2006": group by year # whoami: usage - home page sidebar, single page bottom of post. all values can be empty myname = "zzossig" email = "zzossig@gmail.com" whoami = "Web Developer" bioImageUrl = "" # image url like "http//..." or "images/anyfoldername/mybioimage.jpg" If not set, we find a avatar image in root/static/images/whoami/avatar.(png|jpg|svg) useGravatar = false # we use this option highest priority location = "Seoul, Korea" organization = "Hugo" link = "https://github.com/zzossig/hugo-theme-zzo" # sidebar enableBio = true # in home page sidebar enableBioImage = true # in home page sidebar enableSidebar = true # Set to false to create the full width of the content. enableSidebarTags = true # if you want to use tags. enableSidebarSeries = true enableSidebarCategories = true enableHomeSidebarTitles = true enableListSidebarTitles = true enableToc = true # single page table of contents, you can replace this param to toc(toc = true) hideToc = false # Hide or Show toc tocPosition = "inner" # inner, outer tocFolding = false enableTocSwitch = true # single page table of contents visibility switch itemsPerCategory = 5 # maximum number of posts shown in the sidebar. sidebarPosition = "right" # bio, profile component layout position tocLevels = ["h2", "h3", "h4"] # minimum h2, maximum h4 in your article enableSidebarPostsByOrder = false # another lists in the sidebar # footer showPoweredBy = true # show footer text: Powered by Hugo and Zzo theme showFeedLinks = true # RSS Feed showSocialLinks = true # email, facebook, twitter ... enableLangChange = true # show button at bottom left of footer. # service googleTagManager = "" # GTM-XXXXXX baiduAnalytics = "" # alternative of google analytics enableBusuanzi = false # if set true, total page view, total unique visitors show up in the footer. busuanziSiteUV = true # unique visitors (total number of visitors) busuanziSitePV = true # site total page view count busuanziPagePV = true # post view count # rss updatePeriod = "" # Possible values: 'hourly', 'daily', 'weekly', 'monthly', or 'yearly'. updateFrequency = "" fullContents = false # comment enableComment = true disqus_shortname = "" commento = false [gitment] # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment owner = "" # Your GitHub ID repo = "" # The repo to store comments clientId = "" # Your client ID clientSecret = "" # Your client secret [utterances] # https://utteranc.es/ owner = "" # Your GitHub ID repo = "" # The repo to store comments [gitalk] # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk owner = "" # Your GitHub ID repo = "" # The repo to store comments clientId = "" # Your client ID clientSecret = "" # Your client secret # Valine. # You can get your appid and appkey from https://leancloud.cn # more info please open https://valine.js.org [valine] enable = false appId = 'ไฝ ็appId' appKey = 'ไฝ ็appKey' notify = false # mail notifier , https://github.com/xCss/Valine/wiki verify = false # Verification code avatar = 'mm' placeholder = '่ฏด็นไปไนๅง...' visitor = false [changyan] changyanAppid = "" # Changyan app id # ็ ่จ changyanAppkey = "" # Changyan app key [livere] livereUID = "" # LiveRe UID # ๆฅๅฟ ๅ # Isso: https://posativ.org/isso/ [isso] enable = false scriptSrc = "" # "https://isso.example.com/js/embed.min.js" dataAttrs = "" # "data-isso='https://isso.example.com' data-isso-require-author='true'" [socialOptions] # if set, social icons will show up. email = "mailto:your@email.com" phone = "" facebook = "http://example.org/" twitter = "http://example.org/" github = "https://github.com/zzossig/hugo-theme-zzo" stack-overflow = "" instagram = "" google-plus = "" youtube = "" medium = "" tumblr = "" linkedin = "" pinterest = "" stack-exchange = "" telegram = "" steam = "" weibo = "" douban = "" csdn = "" gitlab = "" mastodon = "" jianshu = "" zhihu = "" signal = "" whatsapp = "" matrix = "" xmpp = "" dev-to = "" gitea = "" google-scholar = "" twitch = "" [donationOptions] enable = false # if set, the donation button will show up on the single page. alipay = "" # Alipay QR Code image (example path: images/donation/alipay-qrcode.png) and put your file at root/static/images/donation/ wechat = "" # Wechat pay QR Code image (example path: same as above) paypal = "" # Paypal URL patreon = "" # Patreon URL bitcoin = "" # example path: images/donation/bitcoin-code-image.png [copyrightOptions] enableCopyrightLink = false # if set, you can add copyright link copyrightLink = "" copyrightLinkImage = "" copyrightLinkText = "" # possible share name: "facebook","twitter", "reddit", "linkedin", "tumblr", "weibo", "douban", "line", "whatsapp", "telegram" [[share]] name = "facebook" username = "" [[share]] name = "twitter" [[footerLinks]] name = "" link = "" [[footerLinks]] name = "" link = "" ``` ## Gallery ๊ฐค๋ฌ๋ฆฌ๋ ๋๊ฐ์ง ๋ชจ๋๊ฐ ์กด์ฌํด์. ํ๋์ฉ ์ฌ๋ฆฌ๊ฑฐ๋ ํ๋ฒ์ ์ฌ๋ฆฌ๊ฑฐ๋. ```bash content/gallery/anygalleryname/index.md --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: type: gallery mode: one-by-one # at-once or one-by-one tags: - series: - categories: - images: # when mode is one-by-one, images front-matter variable works - image: image1.jpg # image path: static/gallery/anygalleryname/image1.jpg caption: caption1 - image: image2.jpg # image path: static/gallery/anygalleryname/image2.jpg caption: caption2 ... --- ``` ๊ฐค๋ฌ๋ฆฌ๋ฅผ ๋ง๋์๋ ค๋ฉด ์ฐ์ type์ ๊ฐค๋ฌ๋ฆฌ๋ก ํ์ ์ผ ํ๊ตฌ์, mode๋ฅผ one-by-one์ผ๋ก ํ์๋ฉด images์ ์ด๋ฏธ์ง๋ฅผ ์์ ๊ฐ์ด ํ๋์ฉ ์ ๋ ฅํด์ฃผ์ ์ผ ํด์. ๊ทธ๋ผ ์ด๋ฏธ์ง๊ฐ ์์ ์ ํ ์์๋๋ก ๋ํ๋ ๊ฑฐ์์. mode๋ฅผ at-once๋ก ํ์๋ฉด, static ํด๋์ ์๋ ์ด๋ฏธ์ง๋ฅผ ์ ๋ถ ๋ถ๋ฌ์ฌ๊ฑฐ์์. ์๋ฅผ๋ค์ด ์์ ์ฝ๋์์ mode๋ฅผ at-once๋ก ํ๋ค๋ฉด, static/gallery/anygalleryname ํด๋์ ์๋ ์ด๋ฏธ์ง๋ฅผ ์ ๋ถ ์ฝ์ด ๊ฐค๋ฌ๋ฆฌ ํ์ด์ง์ ๋ํ๋ ๊ฑฐ์์. 1. Make a gallery folder under the content folder ```bash root โโโ content โ โโโ gallery ``` 2. Make a sub folder under the gallery folder ```bash root โโโ content โ โโโ gallery โ โ โโโ anygalleryname ``` 3. Make a index.md file under the sub folder using this command ```bash hugo new --kind gallery gallery/anygalleryname/index.md ``` 4. Put your images in static folder ```bash root โโโ static โ โโโ gallery โ โ โโโ anygalleryname โ โ โ โโโ ...your images here ``` ## Contact Page ํ์ฌ ์ด์ฉ ๊ฐ๋ฅํ ์๋น์ค: [formspree]. ๋ค๋ฅธ ์๋น์ค๋ฅผ ์ด์ฉํ๊ณ ์ถ์ผ์๋ฉด ์ ์ด์๋ฅผ ๋ง๋ค์ด์ฃผ์ธ์. ์๋น์ค ํ๋ผ๋ฏธํฐ๋ฅผ ๋น๊ฐ์ผ๋ก ์ค์ ํ๋ฉด ๋งํฌ๋ค์ด์ผ๋ก ํด๋น ํ์ด์ง๋ฅผ ์ฑ์ธ ์ ์์ต๋๋ค. 1. ํ์ผ์ ๋ค์ ๊ฒฝ๋ก์ ๋ง๋ค์ด์ค๋๋ค. root/content/contact/index.md ```yaml --- title: "Contact" date: 2019-12-17T23:58:33+09:00 description: Contact page type: contact service: formspree formId: "your@email.com" --- This is contact page. ``` 2. ์ปจํํธ ๋ฉ๋ด๋ฅผ ๋ค์ ๊ฒฝ๋ก์ ์ถ๊ฐํด์ค๋๋ค. root/config/_default/menus.en.toml. ```toml ... [[main]] identifier = "contact" name = "contact" url = "contact" weight = 6 ``` ## Talks Page Talks ํ์ด์ง๋ ์์นด์ด๋ธ ํ์ด์ง์ ์ ์ฌํ UI์ ํ์ด์ง์ ๋๋ค. ๋น๋์ค, ํผํฐ ๋ฑ๋ฑ์ ๋งํฌ๋ฅผ ๋ชจ์์ ๋ณด์ฌ์ฃผ๋ ์ฉ๋๋ก ์๋๋ค. Talks ํ์ด์ง๋ฅผ ์ถ๊ฐํ๋ ค๋ฉด ์๋์ ์์๋๋ก ๋ฐ๋ผํด์ฃผ์ธ์. 1. ํ์ผ์ root/content/talks/_index.md. ๊ฒฝ๋ก์ ๋ค์๊ณผ ๊ฐ์ด ๋ง๋ญ๋๋ค. ```yaml --- title: "Talks" date: 2019-12-30T11:14:14+09:00 description: Talks Page titleWrap: wrap # wrap, nowrap --- ``` 2. ๋ ๋ค๋ฅธ ํ์ผ์ ๋ง๋ค์ด ์ค๋๋ค. ์ด๊ณณ์ ๋ด์ฉ์ ๋ฃ์ด์ฃผ์ธ์. root/content/talks/myLinks.md ```yaml --- title: "My Awesome links" date: 2019-12-31T00:04:50+09:00 publishDate: 2019-12-31 description: tags: - series: - categories: - --- ``` 3. ๋ง์ง๋ง์ผ๋ก ๋ฉ๋ด๋ง ๋ค์ ๊ณผ ๊ฐ์ด ๋ง๋ค์ด ์ฃผ๋ฉด ๋ฉ๋๋ค. root/config/_default/menus.en.toml file ```toml [[main]] identifier = "talks" name = "talks" url = "talks" weight = 6 ``` 4. ์ถ๊ฐ์ ์ผ๋ก, date๋ฅผ ๋ฏธ๋์ ๋ ์ง๋ฅผ ์ฐ๊ณ ์ถ์ผ์๋ฉด ๋ค์ ๋จ๊ณ๋ฅผ ๋ฐ๋ผ์ ํด์ฃผ์ธ์. - ๋ค์ ๊ฒฝ๋ก์ ์ค์ ํ์ผ(root/config/_default/config.toml)์์ `buildFuture`๋ฅผ ์ถ๊ฐํด์ฃผ์ธ์. ```toml ... buildFuture = true ... ``` - talksํด๋์ ๋งํฌ๋ค์ด ํ์ผ์ `publishDate`๋ฅผ ์ถ๊ฐํด์ฃผ์ธ์. root/content/talks/myLinks.md ```yaml --- title: date: publishDate: 2020-02-20 ... --- ... ``` ## Showcase Page Showcase ํ์ด์ง๋ ํ๋ก์ ํธ๋ฅผ ์ ์ํ๋ ํ์ด์ง ์ ๋๋ค. ํ์ด์ง๋ฅผ ๋ง๋์๋ ค๋ฉด ์๋ ๋จ๊ณ๋ฅผ ์งํํด์ฃผ์ธ์. 1. ๋ค์ ๊ฒฝ๋ก์ ํ์ผ์ ๋ง๋ญ๋๋ค. `root/content/showcase/_index.md`. ```yaml --- title: "Showcase overview" # For SEO date: 2020-01-19T15:43:38+09:00 description: My portfolio, repos, works overview page # For SEO enableBio: true # Set to false if you want to hide the bio component. --- ``` 2. ๋ค์ ๊ฒฝ๋ก์ ์นดํ ๊ณ ๋ฆฌ ํด๋์ ํ์ผ์ ๋ง๋ญ๋๋ค. `root/content/showcase/hugo/_index.md` file. (์ ์ ๊ฒฝ์ฐ, hugo๊ฐ ์นดํ ๊ณ ๋ฆฌ ํด๋์ ๋๋ค.) ```yaml --- title: "Hugo" # section name date: 2020-01-19T21:04:11+09:00 description: Hugo theme collection # For SEO category: theme # meta info appeared on a card bottom side. category in category enableBio: true --- ``` 3. ํ๋ก์ ํธ๋น ํ๊ฐ์ mdํ์ผ์ ๋ง๋ค์ด ์ฃผ์ธ์. `root/content/showcase/hugo/my-awesome-project.md` ```yaml --- title: "My Awesome Project" # apperared on a card component date: 2020-01-19T21:13:42+09:00 description: Hello world! This is my awesome project! # apperared on a card component weight: 1 # card ordering link: https://github.com/zzossig/hugo-theme-zzo repo: https://github.com/zzossig/hugo-theme-zzo pinned: true # appreared on a overview page. thumb: feature3/css3.png # relative path in static/images --- ``` 4. ๋ง์ง๋ง์ผ๋ก, ๋ฉ๋ด๋ฅผ ๋ฑ๋กํด์ฃผ์ธ์. `root/config/_default/menus.en.toml` ```toml [[main]] identifier = "showcase" name = "Showcase" url = "showcase" weight = 7 ``` ## Multi Language Zzo theme์ ๊ธฐ๋ณธ ์ธ์ด๋ ์์ด์ ๋๋ค. ํ๊ตญ์ด๋ก ๋ฐ๊พธ์๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ํด์ฃผ์ธ์. 1. ์ฐ์ ๋ฉ๋ดํ์ผ์ ๋ง๋ญ๋๋ค. ```bash root โโโ config โ โโโ _default โ โ โโโ ... โ โ โโโ menus.ko.toml ``` ```bash config/_default/menus.ko.toml [[main]] identifier = "about" name = "about" url = "/about/" weight = 1 [[main]] identifier = "archive" name = "archive" url = "/archive/" weight = 2 ... ``` 2. content ํด๋์ ๋งํฌ๋ค์ด ํ์ผ์ ์์ฑํ์ค ๋, ํ์ฅ์ ์์ ko๋ฅผ ๋ถ์ฌ์ฃผ์ธ์! ```bash hugo new about/index.ko.md hugo new posts/markdown-syntax.ko.md ... ``` 3. i18n ํ์ผ์ ๋ง๋ญ๋๋ค. ```bash i18n/ko.toml [search-placeholder] other = "๊ฒ์..." [summary-dateformat] other = "2006๋ 01์ 02์ผ" [tags] other = "ํ๊ทธ" ... ``` 4. ์ค์ ํ์ผ์ ๊ธฐ๋ณธ์ธ์ด ํญ๋ชฉ ๊ฐ์ ๋ณ๊ฒฝํด์ค๋๋ค. ```bash defaultContentLanguage = "ko" defaultContentLanguageInSubdir = true hasCJKLanguage = true ``` ## Customizing ๊ธฐ๋ณธ์ ์ผ๋ก theme ํด๋์์ ์๋ ๋ด์ฉ์ ์๊ฑด๋์๋๊ฒ ์ข์ง๋ง, ๊ฑด๋์ ๋ค๋ฉด ๋์ค์ theme์ ์ ๋ฐ์ดํธ ํ๋๊ฒ ๋ณต์กํด ์ง ์๋ ์์ต๋๋ค. ํ์ฌ ์ํ๋ก ๋ณ๋ก ์ ๋ฐ์ดํธ๊ฐ ํ์ ์๋ค๊ณ ๋๋ผ์ ๋ค๋ฉด theme์ ์๋ ํ์ผ์ ๋ง์๋๋ก ๊ณ ์น์ ๋ ๋ฉ๋๋ค. ๊ทธ๊ฒ ์๋๋ผ๋ฉด ์๋์ ์๋ ๋ฐฉ์์ผ๋ก ์ปค์คํฐ๋ง์ด์ง ํ์๊ธฐ๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค. ์ถ๊ฐ๋ก, custom css๋ custom js๋ฅผ ์๋์ ๋ฐฉ์๋๋ก ์ด์ฉํ์๋ฉด, ํ์ด์ง ๋ก๋ ์๋๊ฐ ์ฝ๊ฐ ๋ ๋๋ ค์ง๋ ๊ฒ์ ๋ฐ๊ฒฌํ์ต๋๋ค. ### custom css 1. config ํด๋์ params.toml ํ์ผ์ ์๋์๊ฐ์ด ์ปค์คํ ์คํ์ผ ํ์ผ์ ๋ช ์ํด์ฃผ์ธ์. ```bash config/_default/params.toml ... custom_css = ["css/custom.css", "scss/custom.scss", ...] ... ``` 2. ์ ์ค์ ํ์ผ์ ๋ช ์ํ ๋๋ก ์ค์ ํ์ผ์ ๋ง๋ค์ด ์ฃผ์ธ์. ```bash assets/scss/custom.scss assets/css/custom.css ``` 3. ๋ง์ฝ ํน์ ์์์ ๋ณ๊ฒฝํ๊ณ ์ถ์ผ์๋ฉด, ์์ ๋ง๋ ์ปค์คํ ์คํ์ผ ํ์ผ์ ํด๋น ๋ถ๋ถ์ ์คํ์ผ์ ์ค๋ฒ๋ผ์ด๋ ํด์ค์ผ ํฉ๋๋ค. ์๋ฅผ๋ค์ด backdrop ์์์ ๋ณ๊ฒฝํ๊ณ ์ ํ์๋ฉด, ๋ค์๊ณผ ๊ฐ์ด ํด์ฃผ์ ์ผ ํฉ๋๋ค. ```css assets/scss/custom.scss or assets/css/custom.css ... #body { background-color: red !important; } ... ``` ### custom js 1. config ํด๋์ params.toml ํ์ผ์ ์๋์๊ฐ์ด ์ปค์คํ ํ์ผ์ ๋ช ์ํด์ฃผ์ธ์. ```bash config/_default/params.toml ... custom_js = ["js/custom.js", ...] ... ``` 2. ์ค์ ํ์ผ์ ์์ฑํด ์ฃผ์๊ตฌ์. ```bash assets/js/custom.js ``` ### custom syntax highlighting 1. root/data ํด๋์ skin.tomlํ์ผ์ ๋ง๋ค์ด์ฃผ์ธ์. theme_dark_chroma, theme_light_chroma, ... ํ๋ผ๋ฏธํฐ์ ํญ๋ชฉ์ ๊ฐ์ ์ํ์๋ ์ฝ๋ ํ์ด๋ผ์ดํธ ํ ๋ง๊ฐ์ผ๋ก ๋ณ๊ฒฝํด์ฃผ์ธ์. [์ด ๋งํฌ](https://xyproto.github.io/splash/docs/all.html)๋ฅผ ์ฐธ์กฐํด์ ๊ฐ์ ๋ณ๊ฒฝํ์๋ฉด ๋ฉ๋๋ค. ๋ง์ฝ theme_[xxxx]_chroma ๊ฐ์ - ๋ _ ๊ฐ์ ํน์๋ฌธ์๊ฐ ์๋ค๋ฉด ์ง์์ฃผ์ธ์. ์๋ฅผ๋ค์ด, solarized-dark256 ๊ฐ์ ์ ๋ ฅํ์๋ ค๋ฉด, ๋ค์๊ณผ ๊ฐ์ด ํด์ฃผ์ธ์. ``` root/data/skin.toml theme_dark_chroma = "solarizeddark256" ``` 2. ํน์ ์์์ ๋ณ๊ฒฝํ๊ณ ์ถ์ผ์๋ค๋ฉด, [[custom-css](#custom-css)]์์ ๋ง๋ ํ์ผ์ chroma class๋ฅผ ์ค๋ฒ๋ผ์ด๋ ํด์ผํฉ๋๋ค. ์ ๋ชจ๋ฅด๊ฒ ์ผ๋ฉด ๋ฌธ์์ฃผ์ธ์! ``` root/assets/scss/custom.scss .chroma { background-color: #123456 !important; } ``` ### custom header ํํ์ด์ง์์ ํค๋ ๋ถ๋ถ์ 4๊ฐ์ง ์ข ๋ฅ์ ํค๋๋ฅผ ์ ํ ์ ์์ต๋๋ค. ์ฌ๋ผ์ด๋, ์ด๋ฏธ์ง, ํ ์คํธ, ๊ทธ๋ฆฌ๊ณ ์๋ฌด๊ฒ๋ ์ ๋ ฅ ์ํ์๋ฉด ๋น๊ณต๊ฐ์ด ๋ฉ๋๋ค. 1. config/_default/params.toml ์ค์ ํ์ผ์ homeHeaderType ๊ฐ์ ๋ณ๊ฒฝํด์ฃผ์ธ์. ๊ฐ๋ฅํ ๊ฐ์ slide, img, text์ ๋๋ค. 2. root/content/_index.md์ _index.md ํ์ผ์ ๋ง๋ค์ด์ฃผ์ธ์ ๊ทธ๋ฆฌ๊ณ ์๋ ๋ด์ฉ์ ๋ณต๋ถํด์ฃผ์ธ์. 3. ๋ณ์์ ์ด๋ฆ๋ง์ผ๋ก ์๋ฏธ๊ฐ ์ ๋ฌ๋๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ฐ์ ํ๋์ฉ ๋ณ๊ฒฝํด๋ณด๋ฉด์ ์ํ์๋ ๋๋ก ์ปค์คํฐ๋ง์ด์ง ํด์ฃผ์ธ์. ```yaml --- header: - type: text height: 200 paddingX: 50 paddingY: 0 align: center title: - HUGO subtitle: - The worldโs fastest framework for building websites titleColor: # #123456, red titleShadow: false titleFontSize: 44 subtitleColor: # #123456, red subtitleCursive: false subtitleFontSize: 16 spaceBetweenTitleSubtitle: 20 - type: img imageSrc: images/header/background.jpg # your image file path: root/static/images/header/background.jpg imageSize: cover # auto|length|cover|contain|initial|inherit imageRepeat: no-repeat # repeat|repeat-x|repeat-y|no-repeat|initial|inherit imagePosition: center # x% y%| xpos ypos| left top| center bottom| ... height: 235 paddingX: 50 paddingY: 0 align: center title: - subtitle: - titleColor: titleShadow: false titleFontSize: 44 subtitleColor: subtitleCursive: false subtitleFontSize: 16 spaceBetweenTitleSubtitle: 20 - type: slide height: 235 options: startSlide: 0 auto: 5000 # auto slide delay 5000ms(5sec) draggable: true # slide draggable autoRestart: true # restart after drag finished continuous: true # last to first disableScroll: true stopPropagation: true slide: - paddingX: 50 paddingY: 0 align: left imageSrc: images/header/background.jpg imageSize: cover imageRepeat: no-repeat imagePosition: center title: - header title1 subtitle: - header subtitle1 titleFontSize: 44 subtitleFontSize: 16 spaceBetweenTitleSubtitle: 20 - paddingX: 50 paddingY: 0 align: center imageSrc: images/header/background.jpg imageSize: cover imageRepeat: no-repeat imagePosition: center title: - header title2 subtitle: - header subtitle2 titleFontSize: 44 subtitleFontSize: 16 spaceBetweenTitleSubtitle: 20 - paddingX: 50 paddingY: 0 align: right imageSrc: images/header/background.jpg imageSize: cover imageRepeat: no-repeat imagePosition: center title: - header title3 subtitle: - header subtitle3 titleFontSize: 44 subtitleFontSize: 16 spaceBetweenTitleSubtitle: 20 --- ``` ### custom grid 1. ํด๋์ grid.toml ํ์ผ์ ๋ง๋ค์ด์ฃผ์ธ์. (data/grid.toml) 2. themes/zzo/data/grid.toml ํ์ผ์ ์๋ ๋ด์ฉ์ ์์์ ๋ง๋ ํ์ผ์ ๋ณต๋ถํด์ฃผ์ธ์. 3. ์ํ์๋ ๋๋ก ๊ฐ์ ๋ณ๊ฒฝํด์ฃผ์ธ์. 4. ๋ณ๊ฒฝ ํ, ํด๊ณ ๋ฅผ ์ฌ์์ ํด์ฃผ์ธ์. ```toml data/grid.toml example grid_max_width = "960" grid_max_unit = "px" # "px", "\"%\"" Using% is limited to using full width. grid_main_main_width = "5" grid_main_main_unit = "fr" # "fr", "px" grid_main_side_width = "2" grid_main_side_unit = "fr" # "fr", "px" grid_column_gap_width = "32" grid_column_gap_unit = "px" # "px" grid_navbar_height = "50px" # "px" grid_row_gap = "0" ``` ### custom font 1. ์ปค์คํ css ํ์ผ์ ๋ง๋ค์ด์ฃผ์ธ์. ```bash config/_default/params.toml ... custom_css = ["css/font.css"] ... ``` 2. font.css ํ์ผ์, font-face๋ฅผ ์๋์ ๊ฐ์ด ๋ง๋ค์ด์ฃผ์ธ์. ```css @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-black.woff2') format('woff2'), url('../fonts/montserrat-black.woff') format('woff'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Merriweather'; src: url('../fonts/merriweather-regular.woff2') format('woff2'), url('../fonts/merriweather-regular.woff') format('woff'); font-weight: 400; font-style: normal; } ``` 3. root/static/fonts/myfont.xxx ํฐํธ ํ์ผ์ static ํด๋์ ๋ฃ์ด์ฃผ์ธ์. (If your url in step2 is ('../fonts/myfont.xxx')). 4. root/data/font.toml ์ font.toml ํ์ผ์ ๋ง๋ค์ด์ฃผ์ธ์. ๊ทธ๋ฆฌ๊ณ ์๋์ ๊ฐ์ด ๋ด์ฉ์ ์ ๋ ฅํด์ฃผ์ธ์. ```toml title_font = "\"Montserrat\", sans-serif" content_font = "\"Merriweather\", serif" ``` 5. ๋ค๋ฅธ ๋ฐฉ์ root/layouts/partials/head/custom-head.html ๊ฒฝ๋ก์ ํ์ผ์ ๋ง๋์๊ณ ํฐํธ๋ฅผ ๊ทธ๊ณณ์์ ๋ก๋ํด์ฃผ์ธ์. ```html <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700&display=swap&subset=korean" rel="stylesheet"> ``` ### custom copyright footer์ ์ ์๊ถ ํ ์คํธ์ ๋งํฌ๋ฅผ ๋ฃ๊ณ ์ถ์ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์ปค์คํฐ๋ง์ด์ง ํ๋ฉด ๋ฉ๋๋ค. 1. ์ค์ ํ์ผ์ธ config.toml ์์ copyright ํ๋ผ๋ฏธํฐ ๊ฐ์ ์ค์ ํด์ฃผ์ธ์. ```toml ... copyright = This is my {} copyright text ... ``` {} ๋ก ์ฐ์ฌ์ง ๋ถ๋ถ์ด ๋งํฌ๊ฐ ๋ค์ด๊ฐ ๋ถ๋ถ์ ๋๋ค. 2. ์ค์ ํ์ผ์ธ params.toml ์์ copyrightOptions ํ๋ผ๋ฏธํฐ ๊ฐ์ ์ค์ ํด์ฃผ์ธ์. ```toml ... [copyrightOptions] enableCopyrightLink = false copyrightLink = "https://..." copyrightLinkImage = "https://..." copyrightLinkText = "copyright link text" ``` ### custom favicon root/static ํด๋์ ํ๋น์ฝ์ ๋ฃ์ด์ ํ ๋ง์ favicon์ overriding ํ์๋ฉด ๋ฉ๋๋ค. ## Author ํฌ์คํธ์ ์ ์์ ๋ํ ์ ๋ณด๋ฅผ front matter๋ฅผ ํตํด์ ๋ช ์ํ ์ ์์ต๋๋ค. ```yaml --- title: ... author: # author name authorEmoji: ๐ค # emoji for subtitle, summary meta data authorImage: "/images/whoami/avatar.jpg" # image path in the static folder authorImageUrl: "" # your image url. We use `authorImageUrl` first. If not set, we use `authorImage`. authorDesc: # author description socialOptions: # override params.toml file socialOptions email: "" facebook: "" ... --- ``` ## Favicon `favicon.ico`๋ผ๋ ํ์ผ์ ๋ฃจํธ ๋๋ ํ ๋ฆฌ์ static ํด๋์ ๋ฃ์ด์ฃผ์ธ์. ํ์ผ ์ด๋ฆ๊ณผ ํ์ฅ์๊ฐ ์ ํํ `favicon.ico`์ฌ์ผ ํฉ๋๋ค. ### Using favicon-genarator ๋ชจ๋ฐ์ผ ํ๊ฒฝ์ ๊ณ ๋ คํ์ ๋ค๋ฉด [favicon-generator](https://www.favicon-generator.org/) ์ฌ์ดํธ์์ ํ๋น์ฝ์ ๋ง๋ค์ด์ฃผ์ธ์. - ์์ ์ฌ์ดํธ์์ ํ๋น์ฝ์ ๋ง๋ค์ด์ฃผ์ธ์. - `root/static/favicon`๊ฒฝ๋ก์ ํด๋๋ฅผ ๋ง๋ค์ด์ฃผ์ธ์. - ํด๋น ํด๋์ ํ๋น์ฝ์ ํ์ด์ฃผ์ธ์. - params.toml ํ์ผ์ `useFaviconGenerator`์ ๊ฐ์ `true`๋ก ๋ฐ๊ฟ์ฃผ์ธ์. ## External Library ํ์ฌ ์ง์ํ๋ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram ์ ๋๋ค. front-matter์ ๊ฐ์ ๋ฃ์ด์ฃผ์๋ฉด ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ก๋๋ฉ๋๋ค. ```bash --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} ... libraries: - katex - mathjax - chart - flowchartjs - msc - katex - mermaid - viz - wavedrom --- ``` ## Shortcodes ### alert ```bash {{< alert theme="warning" >}} # warning, success, info, danger **this** is a text {{< /alert >}} ``` ### expand ```bash {{< expand "Expand me" >}}Some Markdown Contents{{< /expand >}} ``` ### img ```bash // path: static/images/whoami/avatar.jpg {{< img src="/images/whoami/avatar.jpg" title="Image4" caption="Image description" alt="image alt" width="50px" height="50px">}} ``` ### notice ```bash {{< notice success >}} # success, info, warning, error success {{< /notice >}} ``` ### color ```bash {{< color "#0000ff" >}}*text*{{< /color >}} ``` ### box ```bash {{< box >}} Some contents {{< /box >}} ``` ### boxmd ```bash {{< boxmd >}} Some markdown contents {{< /boxmd >}} ``` ### code / codes => ์ฝ๋๋ฅผ ์ฌ๋ฌ ๋ฒ์ ์ผ๋ก ์ ๊ณตํ ๋ ์ฐ์ธ์. ๋ค์ฌ์ฐ๊ธฐ ์๋ชปํ๋ฉด ์ด์ํ๊ฒ ๋์์. ````` {{< codes java javascript >}} {{< code >}} ```java System.out.println('Hello World!'); ``` {{< /code >}} {{< code >}} ```javascript console.log('Hello World!'); ``` {{< /code >}} {{< /codes >}} ````` ### tab / tabs => ์ฌ๋ฌ ๋ฒ์ ์ ๋ทฐ๋ฅผ ์ ๊ณตํ ๋ ์ฐ์ธ์ ํญ์ ๋ง๋ค ๋, ๊ฐ ํญ๋ง๋ค ์์ ๋ด์ฉ์ ๋ฐ๋ผ ๊ณ ์ ์์ด๋๋ฅผ ๋ถ์ฌํ๊ธฐ ๋๋ฌธ์, Tab ์์ ์๋ ๋ด์ฉ์ด ์๋ก ๋ฌ๋ผ์ผํฉ๋๋ค. ````` {{< tabs Windows MacOS Ubuntu >}} {{< tab >}} ### Windows section ```javascript console.log('Hello World!'); ``` {{< /tab >}} {{< tab >}} ### MacOS section Hello world! {{< /tab >}} {{< tab >}} ### Ubuntu section Great! {{< /tab >}} {{< /tabs >}} `````