{"id":15545682,"url":"https://github.com/davbree/important-octopus","last_synced_at":"2026-05-08T13:45:42.098Z","repository":{"id":140317369,"uuid":"319079755","full_name":"davbree/important-octopus","owner":"davbree","description":"Jamstack site created with Stackbit","archived":false,"fork":false,"pushed_at":"2020-12-06T16:35:24.000Z","size":4212,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T14:21:36.636Z","etag":null,"topics":["gatsby","git","headless","jamstack","ssg","stackbit","static"],"latest_commit_sha":null,"homepage":"https://jamstack.new","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davbree.png","metadata":{"files":{"readme":"README.ko.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-06T16:35:14.000Z","updated_at":"2020-12-06T16:35:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c978d66-6ef4-49a3-881a-2481ea42956e","html_url":"https://github.com/davbree/important-octopus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fimportant-octopus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fimportant-octopus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fimportant-octopus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fimportant-octopus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davbree","download_url":"https://codeload.github.com/davbree/important-octopus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245240825,"owners_count":20583099,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","git","headless","jamstack","ssg","stackbit","static"],"created_at":"2024-10-02T12:53:44.229Z","updated_at":"2026-05-08T13:45:37.054Z","avatar_url":"https://github.com/davbree.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zzo theme for Hugo\n\n[English](https://github.com/zzossig/hugo-theme-zzo/blob/master/README.md) | \n한국어\n\n🔥🔥🔥\nzzo theme을 업데이트한 후 `config.toml` 파일에서 page 변수를 삭제해주세요\n```diff\n[outputs]\n  \u003cdel\u003epage = [\"HTML\", \"SearchIndex\"]\u003c/del\u003e\n```\n검색 관련 인덱스 생성위치를 변경했습니다\n🔥🔥🔥\n\n클릭해 주셔서 감사합니다. Zzo theme은 많은 기능을 지원하고있고 있습니다. 기술 블로그를 운영하기에 최적화 되어있습니다!(적어도 제생각엔...)\nZzo theme을 이용할 시 가장 매력적인 포인트 한가지는, 한글로 저와 소통할 수 있다는 점? 입니다. \n\n## Documentation\n\n영문버전 도큐먼트\n[https://zzodocs.netlify.com/docs/](https://zzodocs.netlify.com/docs/)\n\n## Table of contents\n\n* [기능](#features)\n* [최소 휴고 버전](#minimum-hugo-version)\n* [설치](#installation)\n* [업데이트](#updating)\n* [예제 사이트 돌리기](#run-example-site)\n* [설정](#configuration)\n* [갤러리](#gallery)\n* [컨택 페이지](#contact-page)\n* [토크 페이지](#talks-page)\n* [쇼케이스 페이지](#showcase-page)\n* [다국어](#multi-language)\n* [저자](#author)\n* [Favicon](#favicon)\n* [커스터마이징](#customizing)\n* [외부 라이브러리 사용](#external-library)\n* [Shortcodes](#shortcodes)\n\n## Features\n\n* 다양한 스킨 지원(dark, light, solarized, ...)\n* 모바일 메뉴\n* 최신 HTML5, CSS 기술 이용\n* 심플한 블로그\n* 검색 엔진 최적화 (SEO)\n* 다국어 지원 (i18n)\n* 반응형 디자인\n* RSS feed 지원\n* 검색 (지원 예정)\n* 갤러리 지원\n* 코드 하이라이트\n* 토크 페이지\n* 쇼케이스 페이지\n\n## Minimum Hugo version\n\n최소 요구 Hugo 버전은 0.60.0 입니다.\n\n## Installation\n\n우선 설정 파일을 만드셔야 합니다. 설정파일이 없거나 설정값이 잘못 될 경우, 실행이 안되실 수 있습니다.\n[설정](#configuration) 링크를 참조하여 설정파일을 만들어주세요.\n\n설정 파일을 다 만드셨으면, theme 폴더에 zzo 폴더를 만들고, 그곳에 이 레포지토리를 다운로드 하신 파일을 복사 붙여넣기 하시면 됩니다.\n이렇게 파일을 복사 붙여넣기 하시면, 나중에 제가 여러가지 버그나 이슈를 업데이트 했을 때, 님이 만드신 블로그를 최신 Zzo theme으로\n업데이트 하고 싶으시면 해당 Zzo theme을 지우고 다시 다운로드 한 다음, 복붙하시면 되겠습니다.\n\n```bash\n$ git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo\n```\n\n깃헙을 이용하여 블로그를 관리하신다면, 섭모듈을 사용하여 Zzo theme을 쉽게 최신버전으로 유지하실 수 있습니다.\n\n루트 폴더에서 다음 코드를 입력해주시면 submodule로써 Zzo theme이 설치됩니다:\n\n```bash\ngit submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo\n```\n\n## Updating\n\nFrom the root of your site:\n\n```bash\ngit submodule update --remote --merge\n```\n\n## Run example site\n\nFrom the root of themes/zzo/exampleSite:\n\n```bash\nhugo server --themesDir ../..\n```\n\n## Configuration\n\n0. 저같은 경우, 디렉토리 하나를 만들고 그곳에 다음과같이 사이트를 만듭니다.\n\n```bash\nhugo new site .\n```\n\n1. 0번 단계에서 만드신 디렉토리로 들어가주세요.\nconfig.toml 파일이 보이신다면, 과감하게 지워주세요. 아래 단계들은 제가 사용하는 config 파일들입니다.\n모두 그냥 복사, 붙여넣기 해서 파일을 만드시면 되는데, 귀찮으신 분들은 exampleSite 폴더에 있는 config 폴더를\n루트 디렉토리에 그냥 복사 붙여넣기 하셔도 됩니다.\n \n아래는 설정 파일 구조구요. _default폴더의 _(언더스코어) 뺴먹지 마세요!\n\n```bash\nroot\n├── config\n│   ├── _default\n│   │   ├── config.toml\n│   │   ├── languages.toml\n│   │   ├── menus.en.toml\n│   │   ├── params.toml\n```\n\n2. config.toml\n\n```bash\nbaseURL = \"http://example.org/\" # The URL of your site.\ntitle = \"Hugo Zzo Theme\" # Title of your site\ntheme = \"zzo\" # Name of Zzo theme folder in `themes/`.\n\ndefaultContentLanguage = \"en\" # Default language to use (if you setup multilingual)\ndefaultContentLanguageInSubdir = true # baseURL/en/, baseURL/kr/ ...\nhasCJKLanguage = true # Set `true` for Chinese/Japanese/Korean languages.\n\nsummaryLength = 70 # The length of a post description on a list page.\nbuildFuture = true # if true, we can use future date for talks page\n\ncopyright = \"©{year}, All Rights Reserved\" # copyright symbol: $copy; current year: {year}\ntimeout = 10000\nenableEmoji = true\npaginate = 13 # Number of items per page in paginated lists.\nrssLimit = 100\n\nenableGitInfo = 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\ngoogleAnalytics = \"\"\n\n[markup]\n  [markup.goldmark]\n    [markup.goldmark.renderer]\n      hardWraps = true\n      unsafe = true\n      xHTML = true\n  [markup.highlight]\n    codeFences = true\n    lineNos = true\n    lineNumbersInTable = true\n    noClasses = false\n  [markup.tableOfContents]\n    endLevel = 3\n    ordered = false\n    startLevel = 2\n\n[outputs]\n  home = [\"HTML\", \"RSS\", \"JSON\"]\n\n[taxonomies]\n  category = \"categories\"\n  tag = \"tags\"\n  series = \"series\"\n```\n\n3. languages.toml\n\n```bash\n[en]\n  title = \"Hugo Zzo Theme\"\n  languageName = \"English\"\n  weight = 1\n\n[ko]\n  title = \"Hugo Zzo Theme\"\n  languageName = \"한국어\"\n  weight = 2\n```\n\n4. menus.en.toml\n\nYou shoud make your own menu.\n\n```bash\n[[main]]\n  identifier = \"about\"\n  name = \"about\"\n  url = \"about\"\n  weight = 1\n\n[[main]]\n  identifier = \"archive\"\n  name = \"archive\"\n  url = \"archive\"\n  weight = 2\n\n[[main]]\n  identifier = \"gallery\"\n  name = \"gallery\"\n  url = \"gallery\"\n  weight = 3\n    \n[[main]]\n  parent = \"gallery\"\n  name = \"cartoon\"\n  url = \"gallery/cartoon\"\n\n[[main]]\n  parent = \"gallery\"\n  name = \"photo\"\n  url = \"gallery/photo\"\n\n[[main]]\n  identifier = \"posts\"\n  name = \"posts\"\n  url = \"posts\"\n  weight = 4\n    \n[[main]]\n  identifier = \"notes\"\n  name = \"notes\"\n  url = \"notes\"\n  weight = 5\n...\n```\n\n5. params.toml\n\n```bash\nlogoText = \"Zzo\" # Logo text that appears in the site navigation bar.\nlogoType = \"short\" # long, short -\u003e short: squre shape includes logo text, long: rectangle shape not includes logo text\nlogo = true # Logo that appears in the site navigation bar.\ndescription = \"The Zzo theme for Hugo example site.\" # for SEO\ncustom_css = [] # custom_css = [\"scss/custom.scss\"] and then make file at root/assets/scss/custom.scss\ncustom_js = [] # custom_js = [\"js/custom.js\"] and then make file at root/assets/js/custom.js\nuseFaviconGenerator = false # https://www.favicon-generator.org/\nlanguagedir = \"ltr\" # ltr / rtl\n\nthemeOptions = [\"dark\", \"light\", \"hacker\", \"solarized\", \"kimbie\"] # select options for site color theme\nnotAllowedTypesInHome = [\"contact\", \"talks\", \"about\", \"showcase\"] # not allowed page types in home page. type can be set in front matter or default to folder name.\nnotAllowedTypesInHomeSidebar = [\"about\", \"archive\", \"showcase\"] # not allowed page types in home page sidebar(recent post titles).\nnotAllowedTypesInArchive = [\"about\", \"talks\", \"showcase\"] # not allowed page types in archive page\nnotAllowedTypesInHomeFeed = [\"about\", \"archive\", \"contact\", \"talks\", \"showcase\", \"publication\", \"presentation\", \"resume\", \"gallery\"]\nenablePinnedPosts = true # show pinned posts first in the main view\n\nviewportSize = \"normal\" # widest, wider, wide, normal, narrow\nenableUiAnimation = true\nhideSingleContentsWhenJSDisabled = false\nminItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud\n\n# appbar\nenableAppbarSearchIcon = false\nenableAppbarLangIcon = false\n\n# header\nhomeHeaderType = \"text\" # text, img, slide, typewriter\nhideHomeHeaderWhenMobile = false\n\n# menu\nshowMobileMenuTerms = [\"tags\", \"categories\", \"series\"]\n\n# navbar\nenableThemeChange = true # site color theme\n\n# body\nenableBreadcrumb = true # breadcrumb for list, single page\nenableSearch = true # site search with fuse\nenableSearchHighlight = true # when true, search keyword will be highlighted\nenableGoToTop = true # scroll to top\nenableWhoami = true # at the end of single page\nsummaryShape = \"classic\" # card, classic, compact\narchiveGroupByDate = \"2006\" # \"2006-01\": group by month, \"2006\": group by year\narchivePaginate = 13 # items per page\npaginateWindow = 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\ntalksPaginate = 8 # items per page\ntalksGroupByDate = \"2006\" # \"2006-01\": group by month, \"2006\": group by year\n\n# whoami: usage - home page sidebar, single page bottom of post. all values can be empty\nmyname = \"zzossig\"\nemail = \"zzossig@gmail.com\"\nwhoami = \"Web Developer\"\nbioImageUrl = \"\" # 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)\nuseGravatar = false # we use this option highest priority\nlocation = \"Seoul, Korea\"\norganization = \"Hugo\"\nlink = \"https://github.com/zzossig/hugo-theme-zzo\"\n\n# sidebar\nenableBio = true # in home page sidebar\nenableBioImage = true # in home page sidebar\nenableSidebar = true # Set to false to create the full width of the content.\nenableSidebarTags = true # if you want to use tags.\nenableSidebarSeries = true\nenableSidebarCategories = true\nenableHomeSidebarTitles = true\nenableListSidebarTitles = true\nenableToc = true # single page table of contents, you can replace this param to toc(toc = true)\nhideToc = false # Hide or Show toc\ntocPosition = \"inner\" # inner, outer\ntocFolding = false\nenableTocSwitch = true # single page table of contents visibility switch\nitemsPerCategory = 5 # maximum number of posts shown in the sidebar.\nsidebarPosition = \"right\" # bio, profile component layout position\ntocLevels = [\"h2\", \"h3\", \"h4\"] # minimum h2, maximum h4 in your article\nenableSidebarPostsByOrder = false # another lists in the sidebar\n\n# footer\nshowPoweredBy = true # show footer text: Powered by Hugo and Zzo theme\nshowFeedLinks = true # RSS Feed \nshowSocialLinks = true # email, facebook, twitter ...\nenableLangChange = true # show button at bottom left of footer.\n\n# service\ngoogleTagManager = \"\" # GTM-XXXXXX\nbaiduAnalytics = \"\" # alternative of google analytics\nenableBusuanzi = false # if set true, total page view, total unique visitors show up in the footer.\nbusuanziSiteUV = true # unique visitors (total number of visitors)\nbusuanziSitePV = true # site total page view count\nbusuanziPagePV = true # post view count\n\n# rss\nupdatePeriod = \"\" # Possible values: 'hourly', 'daily', 'weekly', 'monthly', or 'yearly'.\nupdateFrequency = \"\"\nfullContents = false\n\n# comment\nenableComment = true\ndisqus_shortname = \"\" \ncommento = false\n\n[gitment]          # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment\n  owner = \"\"              # Your GitHub ID\n  repo = \"\"               # The repo to store comments\n  clientId = \"\"           # Your client ID\n  clientSecret = \"\"       # Your client secret\n\n[utterances]       # https://utteranc.es/\n  owner = \"\"              # Your GitHub ID\n  repo = \"\"               # The repo to store comments\n  message = \"\"      # Optional\n  link = \"\"         # Optional\n\n[gitalk]           # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk\n  owner = \"\"              # Your GitHub ID\n  repo = \"\"               # The repo to store comments\n  clientId = \"\"           # Your client ID\n  clientSecret = \"\"       # Your client secret\n\n# Valine.\n# You can get your appid and appkey from https://leancloud.cn\n# more info please open https://valine.js.org\n[valine]\n  enable = false\n  appId = '你的appId'\n  appKey = '你的appKey'\n  notify = false  # mail notifier , https://github.com/xCss/Valine/wiki\n  verify = false # Verification code\n  avatar = 'mm' \n  placeholder = '说点什么吧...'\n  visitor = false\n\n[changyan]\n  changyanAppid = \"\"        # Changyan app id             # 畅言\n  changyanAppkey = \"\"       # Changyan app key\n\n[livere]\n  livereUID = \"\"            # LiveRe UID                  # 来必力\n\n# Isso: https://posativ.org/isso/\n[isso]\n  enable = false\n  scriptSrc = \"\" # \"https://isso.example.com/js/embed.min.js\"\n  dataAttrs = \"\" # \"data-isso='https://isso.example.com' data-isso-require-author='true'\"\n\n[socialOptions] # if set, social icons will show up.\n  email = \"mailto:your@email.com\"\n  phone = \"\"\n  facebook = \"http://example.org/\"\n  twitter = \"http://example.org/\"\n  github = \"https://github.com/zzossig/hugo-theme-zzo\"\n  stack-overflow = \"\"\n  instagram = \"\"\n  google-plus = \"\"\n  youtube = \"\"\n  medium = \"\"\n  tumblr = \"\"\n  linkedin = \"\"\n  pinterest = \"\"\n  stack-exchange = \"\"\n  telegram = \"\"\n  steam = \"\"\n  weibo = \"\"\n  douban = \"\"\n  csdn = \"\"\n  gitlab = \"\"\n  mastodon = \"\"\n  jianshu = \"\"\n  zhihu = \"\"\n  signal = \"\"\n  whatsapp = \"\"\n  matrix = \"\"\n  xmpp = \"\"\n  dev-to = \"\"\n  gitea = \"\"\n  google-scholar = \"\"\n  twitch = \"\"\n\n[donationOptions]\n  enable = false # if set, the donation button will show up on the single page.\n  alipay = \"\" # Alipay QR Code image (example path: images/donation/alipay-qrcode.png) and put your file at root/static/images/donation/\n  wechat = \"\" # Wechat pay QR Code image (example path: same as above)\n  paypal = \"\" # Paypal URL\n  patreon = \"\" # Patreon URL\n  bitcoin = \"\" # example path: images/donation/bitcoin-code-image.png\n\n[copyrightOptions]\n  enableCopyrightLink = false # if set, you can add copyright link\n  copyrightLink = \"\"\n  copyrightLinkImage = \"\"\n  copyrightLinkText = \"\"\n\n# possible share name: \"facebook\",\"twitter\", \"reddit\", \"linkedin\", \"tumblr\", \"weibo\", \"douban\", \"line\", \"whatsapp\", \"telegram\"\n[[share]]\n  name = \"facebook\"\n  username = \"\"\n[[share]]\n  name = \"twitter\"\n\n[[footerLinks]]\n  name = \"\"\n  link = \"\"\n[[footerLinks]]\n  name = \"\"\n  link = \"\"\n```\n\n## Gallery\n\n갤러리는 두가지 모두가 존재해요. 하나씩 올리거나 한번에 올리거나.\n\n```bash\ncontent/gallery/anygalleryname/index.md\n\n---\ntitle: \"{{ replace .Name \"-\" \" \" | title }}\"\ndate: {{ .Date }}\ndescription: \ntype: gallery\nmode: one-by-one # at-once or one-by-one\ntags:\n-\nseries:\n-\ncategories:\n-\nimages: # when mode is one-by-one, images front-matter variable works\n  - image: image1.jpg # image path: static/gallery/anygalleryname/image1.jpg\n    caption: caption1\n  - image: image2.jpg # image path: static/gallery/anygalleryname/image2.jpg\n    caption: caption2\n    ...\n---\n\n```\n\n갤러리를 만드시려면 우선 type을 갤러리로 하셔야 하구요, mode를 one-by-one으로 하시면 images에 이미지를 위와 같이 하나씩 입력해주셔야 해요. \n그럼 이미지가 위에 적힌 순서대로 나타날거에요. mode를 at-once로 하시면, static 폴더에 있는 이미지를 전부 불러올거에요. 예를들어 위의 코드에서 mode를 at-once로 했다면,\nstatic/gallery/anygalleryname 폴더에 있는 이미지를 전부 읽어 갤러리 페이지에 나타날 거에요.\n\n1. Make a gallery folder under the content folder\n\n```bash\nroot\n├── content\n│   ├── gallery\n```\n\n2. Make a sub folder under the gallery folder\n\n```bash\nroot\n├── content\n│   ├── gallery\n│   │   ├── anygalleryname\n```\n\n3. Make a index.md file under the sub folder using this command\n\n```bash\nhugo new --kind gallery gallery/anygalleryname/index.md\n```\n\n4. Put your images in static folder\n\n```bash\nroot\n├── static\n│   ├── gallery\n│   │   ├── anygalleryname\n│   │   │   ├── ...your images here\n```\n\n## Contact Page\n\n현재 이용 가능한 서비스: [formspree]. 다른 서비스를 이용하고 싶으시면 새 이슈를 만들어주세요. 서비스 파라미터를 빈값으로 설정하면 마크다운으로 해당 페이지를 채울 수 있습니다.\n\n1. 파일을 다음 경로에 만들어줍니다. root/content/contact/index.md\n\n```yaml\n---\ntitle: \"Contact\"\ndate: 2019-12-17T23:58:33+09:00\ndescription: Contact page\ntype: contact\nservice: formspree\nformId: \"your@email.com\"\n---\n\nThis is contact page.\n```\n\n2. 컨택트 메뉴를 다음 경로에 추가해줍니다. root/config/_default/menus.en.toml.\n\n```toml\n...\n[[main]]\n  identifier = \"contact\"\n  name = \"contact\"\n  url = \"contact\"\n  weight = 6\n```\n\n## Talks Page\n\nTalks 페이지는 아카이브 페이지와 유사한 UI의 페이지입니다. 비디오, 피티 등등의 링크를 모아서 보여주는 용도로 씁니다. Talks 페이지를 추가하려면 아래의 순서대로 따라해주세요.\n\n1. 파일을 root/content/talks/_index.md. 경로에 다음과 같이 만듭니다.\n\n```yaml\n---\ntitle: \"Talks\"\ndate: 2019-12-30T11:14:14+09:00\ndescription: Talks Page\ntitleWrap: wrap # wrap, nowrap\n---\n```\n\n2. 또 다른 파일을 만들어 줍니다. 이곳에 내용을 넣어주세요. \n\nroot/content/talks/myLinks.md\n\n```yaml\n---\ntitle: \"My Awesome links\"\ndate: 2019-12-31T00:04:50+09:00\npublishDate: 2019-12-31\ndescription:\ntags:\n-\nseries:\n-\ncategories:\n-\n---\n```\n\n3. 마지막으로 메뉴만 다음 과 같이 만들어 주면 됩니다. \n\nroot/config/_default/menus.en.toml file\n\n```toml\n[[main]]\n  identifier = \"talks\"\n  name = \"talks\"\n  url = \"talks\"\n  weight = 6\n```\n\n4. 추가적으로, date를 미래의 날짜를 쓰고 싶으시면 다음 단계를 따라서 해주세요.\n\n    - 다음 경로의 설정파일(root/config/_default/config.toml)에서 `buildFuture`를 추가해주세요.\n\n    ```toml\n    ...\n    buildFuture = true\n    ...\n    ```\n\n    - talks폴더의 마크다운 파일에 `publishDate`를 추가해주세요. root/content/talks/myLinks.md\n\n    ```yaml\n    ---\n    title:\n    date:\n    publishDate: 2020-02-20\n    ...\n    ---\n    ...\n    ```\n\n## Showcase Page\n\nShowcase 페이지는 프로젝트를 전시하는 페이지 입니다. 페이지를 만드시려면 아래 단계를 진행해주세요.\n\n1. 다음 경로에 파일을 만듭니다. `root/content/showcase/_index.md`.\n\n```yaml\n---\ntitle: \"Showcase overview\" # For SEO\ndate: 2020-01-19T15:43:38+09:00\ndescription: My portfolio, repos, works overview page # For SEO\nenableBio: true # Set to false if you want to hide the bio component.\n---\n```\n\n2. 다음 경로에 카테고리 폴더와 파일을 만듭니다. `root/content/showcase/hugo/_index.md` file. (저의 경우, hugo가 카테고리 폴더입니다.)\n\n```yaml\n---\ntitle: \"Hugo\" # section name\ndate: 2020-01-19T21:04:11+09:00\ndescription: Hugo theme collection # For SEO\ncategory: theme # meta info appeared on a card bottom side. category in category\nenableBio: true\n---\n```\n\n3. 프로젝트당 한개의 md파일을 만들어 주세요.\n\n`root/content/showcase/hugo/my-awesome-project.md`\n\n```yaml\n---\ntitle: \"My Awesome Project\" # apperared on a card component\ndate: 2020-01-19T21:13:42+09:00\ndescription: Hello world! This is my awesome project! # apperared on a card component\nweight: 1 # card ordering\nlink: https://github.com/zzossig/hugo-theme-zzo\nrepo: https://github.com/zzossig/hugo-theme-zzo\npinned: true # appreared on a overview page.\nthumb: feature3/css3.png # relative path in static/images\n---\n```\n\n4. 마지막으로, 메뉴를 등록해주세요.\n\n`root/config/_default/menus.en.toml`\n\n```toml\n[[main]]\n  identifier = \"showcase\"\n  name = \"Showcase\"\n  url = \"showcase\"\n  weight = 7\n```\n\n## Multi Language\n\nZzo theme의 기본 언어는 영어입니다. 한국어로 바꾸시려면 다음과 같이 해주세요.\n\n1. 우선 메뉴파일을 만듭니다.\n\n```bash \nroot\n├── config\n│   ├── _default\n│   │   ├── ...\n│   │   ├── menus.ko.toml\n```\n\n```bash\nconfig/_default/menus.ko.toml\n\n[[main]]\n  identifier = \"about\"\n  name = \"about\"\n  url = \"/about/\"\n  weight = 1\n\n[[main]]\n    identifier = \"archive\"\n    name = \"archive\"\n    url = \"/archive/\"\n    weight = 2\n...\n```\n\n2. content 폴더에 마크다운 파일을 작성하실 때, 확장자 앞에 ko를 붙여주세요!\n\n```bash\nhugo new about/index.ko.md\nhugo new posts/markdown-syntax.ko.md\n...\n```\n\n3. i18n 파일을 만듭니다.\n\n```bash\ni18n/ko.toml\n\n[search-placeholder]\nother = \"검색...\"\n\n[summary-dateformat]\nother = \"2006년 01월 02일\"\n\n[tags]\nother = \"태그\"\n\n...\n```\n\n4. 설정 파일에 기본언어 항목 값을 변경해줍니다.\n\n```bash\ndefaultContentLanguage = \"ko\"\ndefaultContentLanguageInSubdir = true\nhasCJKLanguage = true\n```\n\n## Customizing\n\n기본적으로 theme 폴더안에 있는 내용은 안건드시는게 좋지만, 건드신다면 나중에 theme을 업데이트 하는게 복잡해 질 수도 있습니다. 현재 상태로 별로 업데이트가 필요 없다고 느끼신다면 theme에 있는 파일을 마음대로 고치셔도 됩니다. 그게 아니라면 아래에 있는 방식으로 커스터마이징 하시기를 추천드립니다.\n\n추가로, custom css나 custom js를 아래의 방식대로 이용하시면, 페이지 로드 속도가 약간 더 느려지는 것을\n발견했습니다.\n\n### custom css\n\n1. config 폴더의 params.toml 파일에 아래와같이 커스텀 스타일 파일을 명시해주세요.\n\n```bash\nconfig/_default/params.toml\n\n...\ncustom_css = [\"css/custom.css\", \"scss/custom.scss\", ...]\n...\n```\n\n2. 위 설정파일에 명시한 대로 실제 파일을 만들어 주세요.\n\n```bash\nassets/scss/custom.scss\nassets/css/custom.css\n```\n\n3. 만약 특정 색상을 변경하고 싶으시면, 위에 만든 커스텀 스타일 파일에 해당 부분의 스타일을 오버라이드 해줘야 합니다. 예를들어 backdrop 색상을 변경하고자 하시면, 다음과 같이 해주셔야 합니다.\n\n```css\nassets/scss/custom.scss or assets/css/custom.css\n\n...\n#body {\n  background-color: red !important;\n}\n...\n```\n\n### custom js\n\n1. config 폴더의 params.toml 파일에 아래와같이 커스텀 파일을 명시해주세요.\n\n```bash\nconfig/_default/params.toml\n\n...\ncustom_js = [\"js/custom.js\", ...]\n...\n```\n\n2. 실제 파일을 생성해 주시구요.\n\n```bash\nassets/js/custom.js\n```\n\n### custom syntax highlighting\n\n1. root/data 폴더에 skin.toml파일을 만들어주세요. theme_dark_chroma, theme_light_chroma, ... 파라미터의 항목의 값을 원하시는 코드 하이라이트 테마값으로 변경해주세요. [이 링크](https://xyproto.github.io/splash/docs/all.html)를 참조해서 값을 변경하시면 됩니다. 만약 theme_[xxxx]_chroma 값에 - 나 _ 같은 특수문자가 있다면 지워주세요.\n예를들어, solarized-dark256 값을 입력하시려면, 다음과 같이 해주세요.\n\n```\nroot/data/skin.toml\n\ntheme_dark_chroma = \"solarizeddark256\"\n```\n\n2. 특정 색상을 변경하고 싶으시다면, [[custom-css](#custom-css)]에서 만든 파일에 chroma class를 오버라이드 해야합니다. 잘 모르겠으면 문의주세요!\n\n```\nroot/assets/scss/custom.scss\n\n.chroma {\n  background-color: #123456 !important;\n}\n```\n\n### custom header\n\n홈페이지에서 헤더 부분에 4가지 종류의 헤더를 입힐 수 있습니다. 슬라이더, 이미지, 텍스트, 그리고 아무것도 입력 안하시면 빈공간이 됩니다.\n\n1. config/_default/params.toml 설정파일에 homeHeaderType 값을 변경해주세요. 가능한 값은 slide, img, text, typewriter입니다.\n\n2. root/content/_index.md에 _index.md 파일을 만들어주세요 그리고 아래 내용을 복붙해주세요.\n\n3. 변수의 이름만으로 의미가 전달된다고 생각합니다. 값을 하나씩 변경해보면서 원하시는 대로 커스터마이징 해주세요.\n\n```yaml\n---\nheader:\n  - type: text\n    height: 200\n    paddingX: 50\n    paddingY: 0\n    align: center\n    title:\n      - HUGO\n    subtitle:\n      - The world’s fastest framework for building websites\n    titleColor: # #123456, red\n    titleShadow: false\n    titleFontSize: 44\n    subtitleColor: # #123456, red\n    subtitleCursive: false\n    subtitleFontSize: 16\n    spaceBetweenTitleSubtitle: 20\n  \n  - type: img\n    imageSrc: images/header/background.jpg # your image file path: root/static/images/header/background.jpg\n    imageSize: cover # auto|length|cover|contain|initial|inherit\n    imageRepeat: no-repeat # repeat|repeat-x|repeat-y|no-repeat|initial|inherit\n    imagePosition: center # x% y%| xpos ypos| left top| center bottom| ...\n    height: 235\n    paddingX: 50\n    paddingY: 0\n    align: center\n    title:\n      -\n    subtitle:\n      -\n    titleColor:\n    titleShadow: false\n    titleFontSize: 44\n    subtitleColor:\n    subtitleCursive: false\n    subtitleFontSize: 16\n    spaceBetweenTitleSubtitle: 20\n\n  - type: slide\n    height: 235\n    options:\n        startSlide: 0\n        auto: 5000 # auto slide delay 5000ms(5sec)\n        draggable: true # slide draggable\n        autoRestart: true # restart after drag finished\n        continuous: true # last to first\n        disableScroll: true\n        stopPropagation: true\n    slide:\n      - paddingX: 50\n        paddingY: 0\n        align: left\n        imageSrc: images/header/background.jpg\n        imageSize: cover\n        imageRepeat: no-repeat\n        imagePosition: center\n        title:\n          - header title1\n        subtitle:\n          - header subtitle1\n        titleFontSize: 44\n        subtitleFontSize: 16\n        spaceBetweenTitleSubtitle: 20\n\n      - paddingX: 50\n        paddingY: 0\n        align: center\n        imageSrc: images/header/background.jpg\n        imageSize: cover\n        imageRepeat: no-repeat\n        imagePosition: center\n        title:\n          - header title2\n        subtitle:\n          - header subtitle2\n        titleFontSize: 44\n        subtitleFontSize: 16\n        spaceBetweenTitleSubtitle: 20\n\n      - paddingX: 50\n        paddingY: 0\n        align: right\n        imageSrc: images/header/background.jpg\n        imageSize: cover\n        imageRepeat: no-repeat\n        imagePosition: center\n        title:\n          - header title3\n        subtitle:\n          - header subtitle3\n        titleFontSize: 44\n        subtitleFontSize: 16\n        spaceBetweenTitleSubtitle: 20\n---\n```\n\n### custom grid\n\n1. 폴더에 grid.toml 파일을 만들어주세요. (data/grid.toml)\n\n2. themes/zzo/data/grid.toml 파일에 있는 내용을 위에서 만든 파일에 복붙해주세요.\n\n3. 원하시는 대로 값을 변경해주세요.\n\n4. 변경 후, 휴고를 재시작 해주세요.\n\n```toml\ndata/grid.toml example\n\ngrid_max_width = \"960\"\ngrid_max_unit = \"px\" #  \"px\", \"\\\"%\\\"\"  Using% is limited to using full width.\ngrid_main_main_width = \"5\"\ngrid_main_main_unit = \"fr\" # \"fr\", \"px\"\ngrid_main_side_width = \"2\"\ngrid_main_side_unit = \"fr\" # \"fr\", \"px\"\ngrid_column_gap_width = \"32\"\ngrid_column_gap_unit = \"px\" # \"px\"\ngrid_navbar_height = \"50px\" # \"px\"\ngrid_row_gap = \"0\"\n```\n\n### custom font\n\n1. 커스텀 css 파일을 만들어주세요.\n\n```bash\nconfig/_default/params.toml\n\n...\ncustom_css = [\"css/font.css\"]\n...\n```\n\n2. font.css 파일에, font-face를 아래와 같이 만들어주세요.\n\n```css\n@font-face {\n    font-family: 'Montserrat';\n    src: url('../fonts/montserrat-black.woff2') format('woff2'),\n         url('../fonts/montserrat-black.woff') format('woff');\n    font-weight: 900;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: 'Merriweather';\n    src: url('../fonts/merriweather-regular.woff2') format('woff2'),\n         url('../fonts/merriweather-regular.woff') format('woff');\n    font-weight: 400;\n    font-style: normal;\n}\n```\n\n3. root/static/fonts/myfont.xxx 폰트 파일을 static 폴더에 넣어주세요. (If your url in step2 is ('../fonts/myfont.xxx')).\n\n4. root/data/font.toml 에 font.toml 파일을 만들어주세요. 그리고 아래와 같이 내용을 입력해주세요.\n\n```toml\ntitle_font = \"\\\"Montserrat\\\", sans-serif\"\ncontent_font = \"\\\"Merriweather\\\", serif\"\n```\n\n5. 다른 방식\n\nroot/layouts/partials/head/custom-head.html 경로에 파일을 만드시고 폰트를 그곳에서 로드해주세요.\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700\u0026display=swap\u0026subset=korean\" rel=\"stylesheet\"\u003e\n```\n\n### custom copyright\n\nfooter의 저작권 텍스트에 링크를 넣고 싶으면 다음과 같이 커스터마이징 하면 됩니다.\n\n1. 설정 파일인 config.toml 에서 copyright 파라미터 값을 설정해주세요.\n```toml\n...\ncopyright = This is my {} copyright text\n...\n```\n{} 로 쓰여진 부분이 링크가 들어갈 부분입니다.\n2. 설정 파일인 params.toml 에서 copyrightOptions 파라미터 값을 설정해주세요.\n\n```toml\n...\n[copyrightOptions]\n  enableCopyrightLink = false\n  copyrightLink = \"https://...\"\n  copyrightLinkImage = \"https://...\"\n  copyrightLinkText = \"copyright link text\"\n```\n\n### custom favicon\n\nroot/static 폴더에 파비콘을 넣어서 테마의 favicon을 overriding 하시면 됩니다.\n\n## Author\n\n포스트의 저자에 대한 정보를 front matter를 통해서 명시할 수 있습니다.\n\n```yaml\n---\ntitle:\n...\nauthor: # author name\nauthorEmoji: 🤖 # emoji for subtitle, summary meta data\nauthorImage: \"/images/whoami/avatar.jpg\" # image path in the static folder\nauthorImageUrl: \"\" # your image url. We use `authorImageUrl` first. If not set, we use `authorImage`.\nauthorDesc: # author description\nsocialOptions: # override params.toml file socialOptions\n  email: \"\"\n  facebook: \"\"\n  ...\n---\n```\n\n## Favicon\n\n`favicon.ico`라는 파일을 루트 디렉토리의 static 폴더에 넣어주세요. 파일 이름과 확장자가 정확히 `favicon.ico`여야 합니다.\n\n### Using favicon-genarator\n\n모바일 환경을 고려하신다면 [favicon-generator](https://www.favicon-generator.org/) 사이트에서 파비콘을 만들어주세요.\n\n- 위의 사이트에서 파비콘을 만들어주세요.\n- `root/static/favicon`경로에 폴더를 만들어주세요.\n- 해당 폴더에 파비콘을 풀어주세요.\n- params.toml 파일에 `useFaviconGenerator`의 값을 `true`로 바꿔주세요.\n\n## External Library\n\n현재 지원하는 외부 라이브러리는 Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram 입니다. front-matter에 값을 넣어주시면 해당 라이브러리가 로드됩니다.\n\n```bash\n---\ntitle: \"{{ replace .Name \"-\" \" \" | title }}\"\ndate: {{ .Date }}\n...\nlibraries:\n- katex \n- mathjax\n- chart\n- flowchartjs\n- msc\n- katex\n- mermaid\n- viz\n- wavedrom\n---\n\n```\n\n## Shortcodes\n\n### alert\n\n```bash\n{{\u003c alert theme=\"warning\" \u003e}} # warning, success, info, danger\n**this** is a text\n{{\u003c /alert \u003e}}\n```\n\n### expand\n\n```bash\n{{\u003c expand \"Expand me\" \u003e}}Some Markdown Contents{{\u003c /expand \u003e}}\n```\n\n### img\n\n```bash\n// path: static/images/whoami/avatar.jpg\n{{\u003c img src=\"/images/whoami/avatar.jpg\" title=\"Image4\" caption=\"Image description\" alt=\"image alt\" width=\"50px\" height=\"50px\"\u003e}}\n```\n\n### notice\n\n```bash\n{{\u003c notice success \u003e}} # success, info, warning, error\nsuccess\n{{\u003c /notice \u003e}}\n```\n\n### color\n\n```bash\n{{\u003c color \"#0000ff\" \u003e}}*text*{{\u003c /color \u003e}}\n```\n\n### box\n\n```bash\n{{\u003c box \u003e}}\nSome contents\n{{\u003c /box \u003e}}\n```\n\n### boxmd\n\n```bash\n{{\u003c boxmd \u003e}}\nSome markdown contents\n{{\u003c /boxmd \u003e}}\n```\n\n### code / codes =\u003e 코드를 여러 버전으로 제공할 때 쓰세요. 들여쓰기 잘못하면 이상하게 나와요.\n\n`````\n{{\u003c codes java javascript \u003e}}\n  {{\u003c code \u003e}}\n  ```java\n  System.out.println('Hello World!');\n  ```\n  {{\u003c /code \u003e}}\n  {{\u003c code \u003e}}\n  ```javascript\n  console.log('Hello World!');\n  ```\n  {{\u003c /code \u003e}}\n{{\u003c /codes \u003e}}\n`````\n\n### tab / tabs =\u003e 여러 버전의 뷰를 제공할 때 쓰세요\n\n탭을 만들 때, 각 탭마다 안의 내용에 따라 고유 아이디를 부여하기 때문에, Tab 안에 있는 내용이 서로 달라야합니다.\n\n`````\n{{\u003c tabs Windows MacOS Ubuntu \u003e}}\n  {{\u003c tab \u003e}}\n\n  ### Windows section\n\n  ```javascript\n  console.log('Hello World!');\n  ```\n\n  {{\u003c /tab \u003e}}\n  {{\u003c tab \u003e}}\n\n  ### MacOS section\n\n  Hello world!\n  {{\u003c /tab \u003e}}\n  {{\u003c tab \u003e}}\n\n  ### Ubuntu section\n\n  Great!\n  {{\u003c /tab \u003e}}\n{{\u003c /tabs \u003e}}\n`````","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavbree%2Fimportant-octopus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavbree%2Fimportant-octopus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavbree%2Fimportant-octopus/lists"}