├── .browserslistrc ├── .editorconfig ├── .eslintrc ├── .github └── workflows │ └── ci-test.yml ├── .gitignore ├── .postcssrc ├── .stylelintrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── archetypes └── default.md ├── assets └── css │ └── style.css ├── exampleSite ├── .gitignore ├── config.toml ├── content │ ├── about.md │ ├── docs │ │ ├── _index.md │ │ ├── customization.md │ │ ├── faq.md │ │ └── getting-started.md │ └── post │ │ ├── basic-elements.md │ │ ├── getting-started-with-hugo.md │ │ └── hugo-template-primer.md ├── data │ └── .gitkeep └── static │ └── .gitkeep ├── i18n ├── bg.yaml ├── bn.yaml ├── cs.yaml ├── de.yaml ├── en.yaml ├── es.yaml ├── fi.yaml ├── fr.yaml ├── hr.yaml ├── hu.yaml ├── id.yaml ├── it.yaml ├── ja.yaml ├── kk.yaml ├── mk.yaml ├── nl.yaml ├── pt-br.yaml ├── pt.yaml ├── ru.yaml ├── sv.yaml ├── vi.yaml ├── zh-cn.yaml └── zh-tw.yaml ├── images ├── screenshot.png └── tn.png ├── layouts ├── 404.html ├── _default │ ├── baseof.html │ ├── list.html │ ├── single.html │ └── summary.html ├── index.html └── partials │ ├── authorbox.html │ ├── comments.html │ ├── footer.html │ ├── footer_links.html │ ├── header.html │ ├── logo.html │ ├── mathjax.html │ ├── menu.html │ ├── pager.html │ ├── pagination.html │ ├── post_meta.html │ ├── post_meta │ ├── author.html │ ├── categories.html │ ├── date.html │ └── translations.html │ ├── post_tags.html │ ├── post_thumbnail.html │ ├── post_toc.html │ ├── sidebar.html │ ├── svg │ ├── author.svg │ ├── bitbucket.svg │ ├── category.svg │ ├── email.svg │ ├── facebook.svg │ ├── files.svg │ ├── github.svg │ ├── gitlab.svg │ ├── instagram.svg │ ├── linkedin.svg │ ├── tag.svg │ ├── telegram.svg │ ├── time.svg │ └── twitter.svg │ └── widgets │ ├── categories.html │ ├── ddg-search.html │ ├── languages.html │ ├── recent.html │ ├── search.html │ ├── sidemenu.html │ ├── social.html │ └── taglist.html ├── package-lock.json ├── package.json ├── static ├── apple-touch-icon.png ├── favicon.ico ├── img │ ├── avatar.png │ └── placeholder.png └── js │ └── menu.js └── theme.toml /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 0.25% 2 | not dead 3 | IE >= 11 4 | iOS >= 7 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = tab 7 | end_of_line = lf 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.{json,yaml,yml,toml,md,babelrc,eslintrc,postcssrc,stylelintrc}] 15 | indent_style = space 16 | indent_size = 2 17 | 18 | [layouts/**.{html,svg}] 19 | insert_final_newline = false 20 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb-base/legacy", 3 | "rules": { 4 | "indent": [2, "tab"], 5 | "no-tabs": 0, 6 | "no-unused-vars": 0, 7 | "no-shadow-restricted-names": 0 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.github/workflows/ci-test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | paths-ignore: 8 | - "README.md" 9 | pull_request: 10 | paths-ignore: 11 | - "README.md" 12 | 13 | jobs: 14 | lint: 15 | runs-on: ubuntu-latest 16 | strategy: 17 | matrix: 18 | node: 19 | - '20.x' 20 | 21 | steps: 22 | - uses: actions/checkout@v4 23 | - uses: actions/setup-node@v4 24 | with: 25 | node-version: ${{ matrix.node }} 26 | 27 | - name: Install npm dependencies 28 | run: npm ci 29 | 30 | - name: Lint 31 | run: npm run lint 32 | 33 | test-hugo: 34 | runs-on: ubuntu-latest 35 | strategy: 36 | matrix: 37 | hugo: 38 | - '0.54.0' # min version 39 | - '0.58.2' # https://github.com/gohugoio/hugoThemes/issues/682 40 | - '0.59.1' # last major version without goldmark renderer 41 | - '0.60.1' # first major version with goldmark renderer 42 | - '0.76.5' # https://github.com/gohugoio/hugo/issues/7822 43 | # - '0.80.0' # https://github.com/gohugoio/hugo/issues/8340 44 | - '0.86.1' # https://github.com/gohugoio/hugo/issues/9150 45 | - '0.93.3' # https://github.com/gohugoio/hugo/commit/837fdfdf45014e3d5ef3b00b01548b68a4489c5f 46 | - '0.123.8' # https://github.com/gohugoio/hugo/issues/12080 47 | - '0.132.2' # .Site.IsServer deprecation ERROR 48 | - 'latest' 49 | fail-fast: true 50 | 51 | steps: 52 | - uses: actions/checkout@v4 53 | 54 | # https://github.com/peaceiris/actions-hugo (community action) 55 | - name: Run Hugo ${{ matrix.hugo }} 56 | uses: peaceiris/actions-hugo@v3 57 | with: 58 | hugo-version: ${{ matrix.hugo }} 59 | # extended: true 60 | 61 | - name: Build with Hugo ${{ matrix.hugo }} 62 | working-directory: exampleSite 63 | run: | 64 | function ver { printf "%03d%03d%03d" $(echo "$1" | tr '.' ' '); } 65 | HUGO_VERSION=$(hugo version | grep -Eo '[0-9]+\.[0-9]+((\.[0-9]+)?)') 66 | # The option changed in 0.93.0: https://github.com/gohugoio/hugo/releases/tag/v0.93.0 67 | I18N_OPT=$([ $(ver $HUGO_VERSION) -lt $(ver 0.93.0) ] && echo "--i18n-warnings" || echo "--printI18nWarnings") 68 | # The option deprecated in v0.114.0 (WARNs >= 0.120.0): https://github.com/gohugoio/hugo/releases/tag/v0.114.0 69 | LOG_OPT=$([ $(ver $HUGO_VERSION) -lt $(ver 0.114.0) ] && echo "--verbose" || echo "--logLevel info") 70 | HUGO_THEME="Mainroad" hugo --themesDir ../.. $I18N_OPT $LOG_OPT 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # NPM 2 | node_modules/ 3 | npm-debug.log 4 | 5 | # IDE 6 | .idea 7 | *.sublime-project 8 | *.sublime-workspace 9 | .vscode/* 10 | 11 | # OS 12 | ._* 13 | Thumbs.db 14 | .DS_Store 15 | .Trashes 16 | .Spotlight-V100 17 | .AppleDouble 18 | .LSOverride 19 | Desktop.ini 20 | -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "autoprefixer": { 4 | cascade: false 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-order" 4 | ], 5 | "rules": { 6 | "at-rule-empty-line-before": [ 7 | "always", 8 | { 9 | "except": [ 10 | "blockless-after-same-name-blockless", 11 | "first-nested" 12 | ], 13 | "ignore": [ 14 | "after-comment" 15 | ] 16 | } 17 | ], 18 | "at-rule-name-case": "lower", 19 | "at-rule-name-space-after": "always-single-line", 20 | "at-rule-semicolon-newline-after": "always", 21 | "block-closing-brace-newline-after": "always", 22 | "block-closing-brace-empty-line-before": "never", 23 | "block-no-empty": true, 24 | "block-opening-brace-newline-after": "always-multi-line", 25 | "color-hex-case": "lower", 26 | "color-hex-length": "short", 27 | "color-no-invalid-hex": true, 28 | "comment-no-empty": true, 29 | "declaration-bang-space-after": "never", 30 | "declaration-bang-space-before": "always", 31 | "declaration-block-no-duplicate-properties": [ 32 | true, 33 | { 34 | "ignore": [ 35 | "consecutive-duplicates-with-different-values" 36 | ] 37 | } 38 | ], 39 | "declaration-block-no-shorthand-property-overrides": true, 40 | "declaration-block-semicolon-newline-after": "always-multi-line", 41 | "declaration-block-semicolon-space-after": "always-single-line", 42 | "declaration-block-semicolon-space-before": "never", 43 | "declaration-block-single-line-max-declarations": 1, 44 | "declaration-block-trailing-semicolon": "always", 45 | "declaration-colon-newline-after": "always-multi-line", 46 | "declaration-colon-space-after": "always-single-line", 47 | "declaration-colon-space-before": "never", 48 | "font-family-no-duplicate-names": true, 49 | "function-calc-no-unspaced-operator": true, 50 | "function-comma-newline-after": "always-multi-line", 51 | "function-comma-space-after": "always-single-line", 52 | "function-comma-space-before": "never", 53 | "function-linear-gradient-no-nonstandard-direction": true, 54 | "function-max-empty-lines": 0, 55 | "function-name-case": "lower", 56 | "function-parentheses-newline-inside": "always-multi-line", 57 | "function-parentheses-space-inside": "never-single-line", 58 | "function-whitespace-after": "always", 59 | "indentation": "tab", 60 | "keyframe-declaration-no-important": true, 61 | "length-zero-no-unit": true, 62 | "max-empty-lines": 1, 63 | "media-feature-colon-space-after": "always", 64 | "media-feature-colon-space-before": "never", 65 | "media-feature-name-case": "lower", 66 | "media-feature-name-no-unknown": true, 67 | "media-feature-parentheses-space-inside": "never", 68 | "media-feature-range-operator-space-after": "always", 69 | "media-feature-range-operator-space-before": "always", 70 | "media-query-list-comma-newline-after": "always-multi-line", 71 | "media-query-list-comma-space-after": "always-single-line", 72 | "media-query-list-comma-space-before": "never", 73 | "no-empty-source": true, 74 | "no-eol-whitespace": true, 75 | "no-extra-semicolons": true, 76 | "no-invalid-double-slash-comments": true, 77 | "no-missing-end-of-source-newline": true, 78 | "number-no-trailing-zeros": true, 79 | "property-case": "lower", 80 | "property-no-unknown": true, 81 | "selector-attribute-brackets-space-inside": "never", 82 | "selector-attribute-operator-space-after": "never", 83 | "selector-attribute-operator-space-before": "never", 84 | "selector-combinator-space-after": "always", 85 | "selector-combinator-space-before": "always", 86 | "selector-descendant-combinator-no-non-space": true, 87 | "selector-list-comma-newline-after": "always", 88 | "selector-list-comma-space-before": "never", 89 | "selector-pseudo-class-case": "lower", 90 | "selector-pseudo-class-no-unknown": true, 91 | "selector-pseudo-class-parentheses-space-inside": "never", 92 | "selector-pseudo-element-case": "lower", 93 | "selector-pseudo-element-colon-notation": "double", 94 | "selector-pseudo-element-no-unknown": true, 95 | "selector-type-case": "lower", 96 | "selector-type-no-unknown": true, 97 | "shorthand-property-no-redundant-values": true, 98 | "string-no-newline": true, 99 | "unit-case": "lower", 100 | "unit-no-unknown": true, 101 | "value-list-comma-newline-after": "always-multi-line", 102 | "value-list-comma-space-after": "always-single-line", 103 | "value-list-comma-space-before": "never", 104 | "value-list-max-empty-lines": 0, 105 | "order/properties-order": [ 106 | "position", 107 | "top", 108 | "right", 109 | "bottom", 110 | "left", 111 | "z-index", 112 | "box-sizing", 113 | "display", 114 | "flex", 115 | "flex-align", 116 | "flex-basis", 117 | "flex-direction", 118 | "flex-wrap", 119 | "flex-flow", 120 | "flex-shrink", 121 | "flex-grow", 122 | "flex-wrap", 123 | "align-content", 124 | "align-items", 125 | "align-self", 126 | "justify-content", 127 | "order", 128 | "float", 129 | "width", 130 | "min-width", 131 | "max-width", 132 | "height", 133 | "min-height", 134 | "max-height", 135 | "padding", 136 | "padding-top", 137 | "padding-right", 138 | "padding-bottom", 139 | "padding-left", 140 | "margin", 141 | "margin-top", 142 | "margin-right", 143 | "margin-bottom", 144 | "margin-left", 145 | "overflow", 146 | "overflow-x", 147 | "overflow-y", 148 | "-webkit-overflow-scrolling", 149 | "-ms-overflow-x", 150 | "-ms-overflow-y", 151 | "-ms-overflow-style", 152 | "columns", 153 | "column-count", 154 | "column-fill", 155 | "column-gap", 156 | "column-rule", 157 | "column-rule-width", 158 | "column-rule-style", 159 | "column-rule-color", 160 | "column-span", 161 | "column-width", 162 | "orphans", 163 | "widows", 164 | "clip", 165 | "clear", 166 | "font", 167 | "font-family", 168 | "font-size", 169 | "font-style", 170 | "font-weight", 171 | "font-variant", 172 | "font-size-adjust", 173 | "font-stretch", 174 | "font-effect", 175 | "font-emphasize", 176 | "font-emphasize-position", 177 | "font-emphasize-style", 178 | "font-smooth", 179 | "src", 180 | "hyphens", 181 | "line-height", 182 | "color", 183 | "text-align", 184 | "text-align-last", 185 | "text-emphasis", 186 | "text-emphasis-color", 187 | "text-emphasis-style", 188 | "text-emphasis-position", 189 | "text-decoration", 190 | "text-indent", 191 | "text-justify", 192 | "text-outline", 193 | "-ms-text-overflow", 194 | "text-overflow", 195 | "text-overflow-ellipsis", 196 | "text-overflow-mode", 197 | "text-shadow", 198 | "text-transform", 199 | "text-wrap", 200 | "-webkit-text-size-adjust", 201 | "-ms-text-size-adjust", 202 | "letter-spacing", 203 | "-ms-word-break", 204 | "word-break", 205 | "word-spacing", 206 | "-ms-word-wrap", 207 | "word-wrap", 208 | "overflow-wrap", 209 | "tab-size", 210 | "white-space", 211 | "vertical-align", 212 | "direction", 213 | "unicode-bidi", 214 | "list-style", 215 | "list-style-position", 216 | "list-style-type", 217 | "list-style-image", 218 | "pointer-events", 219 | "-ms-touch-action", 220 | "touch-action", 221 | "cursor", 222 | "visibility", 223 | "zoom", 224 | "table-layout", 225 | "empty-cells", 226 | "caption-side", 227 | "border-spacing", 228 | "border-collapse", 229 | "content", 230 | "quotes", 231 | "counter-reset", 232 | "counter-increment", 233 | "resize", 234 | "user-select", 235 | "nav-index", 236 | "nav-up", 237 | "nav-right", 238 | "nav-down", 239 | "nav-left", 240 | "background", 241 | "background-color", 242 | "background-image", 243 | "filter", 244 | "background-repeat", 245 | "background-attachment", 246 | "background-position", 247 | "background-position-x", 248 | "background-position-y", 249 | "background-clip", 250 | "background-origin", 251 | "background-size", 252 | "border", 253 | "border-color", 254 | "border-style", 255 | "border-width", 256 | "border-top", 257 | "border-top-color", 258 | "border-top-style", 259 | "border-top-width", 260 | "border-right", 261 | "border-right-color", 262 | "border-right-style", 263 | "border-right-width", 264 | "border-bottom", 265 | "border-bottom-color", 266 | "border-bottom-style", 267 | "border-bottom-width", 268 | "border-left", 269 | "border-left-color", 270 | "border-left-style", 271 | "border-left-width", 272 | "border-radius", 273 | "border-top-left-radius", 274 | "border-top-right-radius", 275 | "border-bottom-right-radius", 276 | "border-bottom-left-radius", 277 | "border-image", 278 | "border-image-source", 279 | "border-image-slice", 280 | "border-image-width", 281 | "border-image-outset", 282 | "border-image-repeat", 283 | "outline", 284 | "outline-width", 285 | "outline-style", 286 | "outline-color", 287 | "outline-offset", 288 | "box-shadow", 289 | "opacity", 290 | "-ms-interpolation-mode", 291 | "page-break-after", 292 | "page-break-before", 293 | "page-break-inside", 294 | "transition", 295 | "transition-delay", 296 | "transition-timing-function", 297 | "transition-duration", 298 | "transition-property", 299 | "transform", 300 | "transform-origin", 301 | "perspective", 302 | "appearance", 303 | "animation", 304 | "animation-name", 305 | "animation-duration", 306 | "animation-play-state", 307 | "animation-timing-function", 308 | "animation-delay", 309 | "animation-iteration-count", 310 | "animation-direction", 311 | "animation-fill-mode", 312 | "quotes", 313 | "will-change", 314 | "fill", 315 | "fill-rule", 316 | "stroke" 317 | ] 318 | } 319 | } 320 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Mainroad 2 | 3 | **Mainroad** welcomes contributions and corrections. Before contributing, please make sure you have read the guidelines 4 | below. If you're a newcomer to open source and you haven't contributed to other projects or used 5 | [Git](https://git-scm.com/) before, you should make yourself familiar before proceeding. 6 | 7 | ## Issues 8 | 9 | The [issue tracker](https://github.com/vimux/mainroad/issues) is the preferred channel for bug reports and features 10 | requests, but please respect the following restrictions: 11 | 12 | ### General requirements 13 | 14 | * Issue must be written in English. 15 | * Please **do not** combine a few problems or feature requests in one issue. Create separate issues if needed. 16 | * Please **do not** create an issue that contains only title. Write a clear title and useful description. 17 | * Please **do not** use the issue tracker for personal support requests. 18 | * Please **do not** post comments consisting solely of "+1" or emoji. The project maintainer reserve the right to delete 19 | such comments. Use 20 | [GitHub's reactions feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) instead. 21 | * Search first before filing a new issue. Please check existing open or recently closed issues to make sure somebody 22 | else hasn't already reported the issue. 23 | 24 | ### Reporting bugs 25 | 26 | When creating a new bug issue make sure to include the following information: 27 | 28 | * Your environment e.g. OS version, Hugo version, theme is up to date? Anything unusual about your environment or 29 | deployment. 30 | * Specify the exact steps to reproduce the bug in as many details as possible with code examples. Include links to files 31 | or demo projects, or copy/pasteable snippets, which you use in those examples. 32 | * Any message or error you get from Hugo, if you do. 33 | * A screenshot of any visual bug. 34 | 35 | Please, take in consideration the next template to report your bug: 36 | 37 | > **Hugo version**\ 38 | > _Run `hugo version` and paste output here._ 39 | > 40 | > **Theme is up to date?**\ 41 | > _No | Yes_ 42 | > 43 | > **Expected behavior**\ 44 | > _A short and expressive description of what behavior you're expecting._ 45 | > 46 | > **Current behavior**\ 47 | > _A short sentence explaining what's actually happening, possibly containing screenshots._ 48 | > 49 | > **Steps to reproduce / Code to reproduce**\ 50 | > _A step by step description of how to trigger this bug. / Provide link to a demo project which reproduces this bug._ 51 | > 52 | > **Additional info**\ 53 | > _Anything unusual about your environment or deployment process? Anything else do we need to know? Optional._ 54 | 55 | **Note:** If you find a **Closed** issue that seems like it is the same bug that you're experiencing, open a new issue 56 | and include a link to the original issue in the body of your new one. 57 | 58 | ### Proposing features 59 | 60 | * Explain the proposed feature, what it should do, why it is useful, and alternatives considered if possible. Please 61 | note that the project maintainer may close this issue or ask you to create a Pull Request if this is not something that 62 | the project maintainer sees as a sufficiently high priority. 63 | 64 | Following these guidelines helps maintainer and the community understand your suggestion and find related suggestions. 65 | 66 | ## Pull Requests (PR) 67 | 68 | **Please ask first** before embarking on any significant pull request (e.g. implementing features or refactoring code), 69 | otherwise, you risk spending a lot of time working on something that the project maintainer might not want to merge into 70 | the project. 71 | 72 | Please respect our Pull Request Acceptance Criteria. For larger changes, you will likely receive multiple rounds of 73 | comments and it may take some time to complete. 74 | 75 | ### Pull Request Acceptance Criteria 76 | 77 | * Keep the change in a single PR as small as possible 78 | * 1 PR = 1 FIX or FEATURE (do not combine things, send separate PR if needed) 79 | * PR with irrelevant changes won't be merged. If you do want to fix formatting or style, do that in a separate PR 80 | * Use a clear and descriptive branch name (e.g. **NOT** "patch-1" or "update") 81 | * Don't create a Pull Request from master branch 82 | * Provide a reasonable PR title and description 83 | * PR must be written in English 84 | * If the PR changes the UI it should include before-and-after screenshots or a link to a video 85 | * Keep PR up to date with upstream/master 86 | * Pay attention to any automated CI failures reported in the Pull Request 87 | * PR solves a common use case that several users will need in their real-life projects, not only your specific problems 88 | * If you've added or modify SVG, ensure that each SVG file: 89 | * Be less than 2048 bytes 90 | * Be minified to a single line with no formatting 91 | * Not contain any JS or CSS section inside it 92 | * Not contain any additional transformations (matrix, translate, scale) or negative viewBox position values 93 | * Сompatible with [GPLv2 License](LICENSE.md) 94 | * Maintain clean commit history and use meaningful commit messages. Pull Requests with messy commit history (with 95 | commit messages like "update", "another update", etc) are difficult to review and won't be merged, even if the changes 96 | are good enough 97 | * Be prepared to answer questions and make code changes. The project maintainer expect you to be reasonably responsive 98 | to those feedback, otherwise the PR will be closed after 2-4 weeks of inactivity 99 | 100 | ### Pull Request Contribution Prerequisites 101 | 102 | * You have Node & npm installed 103 | * You have Hugo installed at v0.54.0+ 104 | * You are familiar with Git 105 | 106 | ### Pull Request Process 107 | 108 | 1. Fork the repository 109 | 1. Clone down the repository to your local system 110 | 1. Run `npm i` in the repository root 111 | 1. Create a new *dedicated branch* with descriptive name from `master` 112 | 1. Make your change and commit to the new branch from the previous step 113 | 1. Write a clear commit message 114 | 1. If you've added code that need documentation, update the README.md 115 | 1. Make sure your code lints (`npm test`) 116 | 1. Push to your fork 117 | 1. Submit a Pull Request (PR) to the upstream 118 | 119 | --- 120 | 121 | **⚠️ IMPORTANT: No guarantees can be made that your pull request will be accepted.** 122 | 123 | ## License 124 | 125 | By contributing to Mainroad, you agree that your contributions will be licensed under [GPLv2 License](LICENSE.md). 126 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ### GNU GENERAL PUBLIC LICENSE 2 | 3 | Version 2, June 1991 4 | 5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 7 | 8 | Everyone is permitted to copy and distribute verbatim copies 9 | of this license document, but changing it is not allowed. 10 | 11 | ### Preamble 12 | 13 | The licenses for most software are designed to take away your freedom 14 | to share and change it. By contrast, the GNU General Public License is 15 | intended to guarantee your freedom to share and change free 16 | software--to make sure the software is free for all its users. This 17 | General Public License applies to most of the Free Software 18 | Foundation's software and to any other program whose authors commit to 19 | using it. (Some other Free Software Foundation software is covered by 20 | the GNU Lesser General Public License instead.) You can apply it to 21 | your programs, too. 22 | 23 | When we speak of free software, we are referring to freedom, not 24 | price. Our General Public Licenses are designed to make sure that you 25 | have the freedom to distribute copies of free software (and charge for 26 | this service if you wish), that you receive source code or can get it 27 | if you want it, that you can change the software or use pieces of it 28 | in new free programs; and that you know you can do these things. 29 | 30 | To protect your rights, we need to make restrictions that forbid 31 | anyone to deny you these rights or to ask you to surrender the rights. 32 | These restrictions translate to certain responsibilities for you if 33 | you distribute copies of the software, or if you modify it. 34 | 35 | For example, if you distribute copies of such a program, whether 36 | gratis or for a fee, you must give the recipients all the rights that 37 | you have. You must make sure that they, too, receive or can get the 38 | source code. And you must show them these terms so they know their 39 | rights. 40 | 41 | We protect your rights with two steps: (1) copyright the software, and 42 | (2) offer you this license which gives you legal permission to copy, 43 | distribute and/or modify the software. 44 | 45 | Also, for each author's protection and ours, we want to make certain 46 | that everyone understands that there is no warranty for this free 47 | software. If the software is modified by someone else and passed on, 48 | we want its recipients to know that what they have is not the 49 | original, so that any problems introduced by others will not reflect 50 | on the original authors' reputations. 51 | 52 | Finally, any free program is threatened constantly by software 53 | patents. We wish to avoid the danger that redistributors of a free 54 | program will individually obtain patent licenses, in effect making the 55 | program proprietary. To prevent this, we have made it clear that any 56 | patent must be licensed for everyone's free use or not licensed at 57 | all. 58 | 59 | The precise terms and conditions for copying, distribution and 60 | modification follow. 61 | 62 | ### TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 63 | 64 | **0.** This License applies to any program or other work which 65 | contains a notice placed by the copyright holder saying it may be 66 | distributed under the terms of this General Public License. The 67 | "Program", below, refers to any such program or work, and a "work 68 | based on the Program" means either the Program or any derivative work 69 | under copyright law: that is to say, a work containing the Program or 70 | a portion of it, either verbatim or with modifications and/or 71 | translated into another language. (Hereinafter, translation is 72 | included without limitation in the term "modification".) Each licensee 73 | is addressed as "you". 74 | 75 | Activities other than copying, distribution and modification are not 76 | covered by this License; they are outside its scope. The act of 77 | running the Program is not restricted, and the output from the Program 78 | is covered only if its contents constitute a work based on the Program 79 | (independent of having been made by running the Program). Whether that 80 | is true depends on what the Program does. 81 | 82 | **1.** You may copy and distribute verbatim copies of the Program's 83 | source code as you receive it, in any medium, provided that you 84 | conspicuously and appropriately publish on each copy an appropriate 85 | copyright notice and disclaimer of warranty; keep intact all the 86 | notices that refer to this License and to the absence of any warranty; 87 | and give any other recipients of the Program a copy of this License 88 | along with the Program. 89 | 90 | You may charge a fee for the physical act of transferring a copy, and 91 | you may at your option offer warranty protection in exchange for a 92 | fee. 93 | 94 | **2.** You may modify your copy or copies of the Program or any 95 | portion of it, thus forming a work based on the Program, and copy and 96 | distribute such modifications or work under the terms of Section 1 97 | above, provided that you also meet all of these conditions: 98 | 99 | 100 | **a)** You must cause the modified files to carry prominent notices 101 | stating that you changed the files and the date of any change. 102 | 103 | 104 | **b)** You must cause any work that you distribute or publish, that in 105 | whole or in part contains or is derived from the Program or any part 106 | thereof, to be licensed as a whole at no charge to all third parties 107 | under the terms of this License. 108 | 109 | 110 | **c)** If the modified program normally reads commands interactively 111 | when run, you must cause it, when started running for such interactive 112 | use in the most ordinary way, to print or display an announcement 113 | including an appropriate copyright notice and a notice that there is 114 | no warranty (or else, saying that you provide a warranty) and that 115 | users may redistribute the program under these conditions, and telling 116 | the user how to view a copy of this License. (Exception: if the 117 | Program itself is interactive but does not normally print such an 118 | announcement, your work based on the Program is not required to print 119 | an announcement.) 120 | 121 | These requirements apply to the modified work as a whole. If 122 | identifiable sections of that work are not derived from the Program, 123 | and can be reasonably considered independent and separate works in 124 | themselves, then this License, and its terms, do not apply to those 125 | sections when you distribute them as separate works. But when you 126 | distribute the same sections as part of a whole which is a work based 127 | on the Program, the distribution of the whole must be on the terms of 128 | this License, whose permissions for other licensees extend to the 129 | entire whole, and thus to each and every part regardless of who wrote 130 | it. 131 | 132 | Thus, it is not the intent of this section to claim rights or contest 133 | your rights to work written entirely by you; rather, the intent is to 134 | exercise the right to control the distribution of derivative or 135 | collective works based on the Program. 136 | 137 | In addition, mere aggregation of another work not based on the Program 138 | with the Program (or with a work based on the Program) on a volume of 139 | a storage or distribution medium does not bring the other work under 140 | the scope of this License. 141 | 142 | **3.** You may copy and distribute the Program (or a work based on it, 143 | under Section 2) in object code or executable form under the terms of 144 | Sections 1 and 2 above provided that you also do one of the following: 145 | 146 | 147 | **a)** Accompany it with the complete corresponding machine-readable 148 | source code, which must be distributed under the terms of Sections 1 149 | and 2 above on a medium customarily used for software interchange; or, 150 | 151 | 152 | **b)** Accompany it with a written offer, valid for at least three 153 | years, to give any third party, for a charge no more than your cost of 154 | physically performing source distribution, a complete machine-readable 155 | copy of the corresponding source code, to be distributed under the 156 | terms of Sections 1 and 2 above on a medium customarily used for 157 | software interchange; or, 158 | 159 | 160 | **c)** Accompany it with the information you received as to the offer 161 | to distribute corresponding source code. (This alternative is allowed 162 | only for noncommercial distribution and only if you received the 163 | program in object code or executable form with such an offer, in 164 | accord with Subsection b above.) 165 | 166 | The source code for a work means the preferred form of the work for 167 | making modifications to it. For an executable work, complete source 168 | code means all the source code for all modules it contains, plus any 169 | associated interface definition files, plus the scripts used to 170 | control compilation and installation of the executable. However, as a 171 | special exception, the source code distributed need not include 172 | anything that is normally distributed (in either source or binary 173 | form) with the major components (compiler, kernel, and so on) of the 174 | operating system on which the executable runs, unless that component 175 | itself accompanies the executable. 176 | 177 | If distribution of executable or object code is made by offering 178 | access to copy from a designated place, then offering equivalent 179 | access to copy the source code from the same place counts as 180 | distribution of the source code, even though third parties are not 181 | compelled to copy the source along with the object code. 182 | 183 | **4.** You may not copy, modify, sublicense, or distribute the Program 184 | except as expressly provided under this License. Any attempt otherwise 185 | to copy, modify, sublicense or distribute the Program is void, and 186 | will automatically terminate your rights under this License. However, 187 | parties who have received copies, or rights, from you under this 188 | License will not have their licenses terminated so long as such 189 | parties remain in full compliance. 190 | 191 | **5.** You are not required to accept this License, since you have not 192 | signed it. However, nothing else grants you permission to modify or 193 | distribute the Program or its derivative works. These actions are 194 | prohibited by law if you do not accept this License. Therefore, by 195 | modifying or distributing the Program (or any work based on the 196 | Program), you indicate your acceptance of this License to do so, and 197 | all its terms and conditions for copying, distributing or modifying 198 | the Program or works based on it. 199 | 200 | **6.** Each time you redistribute the Program (or any work based on 201 | the Program), the recipient automatically receives a license from the 202 | original licensor to copy, distribute or modify the Program subject to 203 | these terms and conditions. You may not impose any further 204 | restrictions on the recipients' exercise of the rights granted herein. 205 | You are not responsible for enforcing compliance by third parties to 206 | this License. 207 | 208 | **7.** If, as a consequence of a court judgment or allegation of 209 | patent infringement or for any other reason (not limited to patent 210 | issues), conditions are imposed on you (whether by court order, 211 | agreement or otherwise) that contradict the conditions of this 212 | License, they do not excuse you from the conditions of this License. 213 | If you cannot distribute so as to satisfy simultaneously your 214 | obligations under this License and any other pertinent obligations, 215 | then as a consequence you may not distribute the Program at all. For 216 | example, if a patent license would not permit royalty-free 217 | redistribution of the Program by all those who receive copies directly 218 | or indirectly through you, then the only way you could satisfy both it 219 | and this License would be to refrain entirely from distribution of the 220 | Program. 221 | 222 | If any portion of this section is held invalid or unenforceable under 223 | any particular circumstance, the balance of the section is intended to 224 | apply and the section as a whole is intended to apply in other 225 | circumstances. 226 | 227 | It is not the purpose of this section to induce you to infringe any 228 | patents or other property right claims or to contest validity of any 229 | such claims; this section has the sole purpose of protecting the 230 | integrity of the free software distribution system, which is 231 | implemented by public license practices. Many people have made 232 | generous contributions to the wide range of software distributed 233 | through that system in reliance on consistent application of that 234 | system; it is up to the author/donor to decide if he or she is willing 235 | to distribute software through any other system and a licensee cannot 236 | impose that choice. 237 | 238 | This section is intended to make thoroughly clear what is believed to 239 | be a consequence of the rest of this License. 240 | 241 | **8.** If the distribution and/or use of the Program is restricted in 242 | certain countries either by patents or by copyrighted interfaces, the 243 | original copyright holder who places the Program under this License 244 | may add an explicit geographical distribution limitation excluding 245 | those countries, so that distribution is permitted only in or among 246 | countries not thus excluded. In such case, this License incorporates 247 | the limitation as if written in the body of this License. 248 | 249 | **9.** The Free Software Foundation may publish revised and/or new 250 | versions of the General Public License from time to time. Such new 251 | versions will be similar in spirit to the present version, but may 252 | differ in detail to address new problems or concerns. 253 | 254 | Each version is given a distinguishing version number. If the Program 255 | specifies a version number of this License which applies to it and 256 | "any later version", you have the option of following the terms and 257 | conditions either of that version or of any later version published by 258 | the Free Software Foundation. If the Program does not specify a 259 | version number of this License, you may choose any version ever 260 | published by the Free Software Foundation. 261 | 262 | **10.** If you wish to incorporate parts of the Program into other 263 | free programs whose distribution conditions are different, write to 264 | the author to ask for permission. For software which is copyrighted by 265 | the Free Software Foundation, write to the Free Software Foundation; 266 | we sometimes make exceptions for this. Our decision will be guided by 267 | the two goals of preserving the free status of all derivatives of our 268 | free software and of promoting the sharing and reuse of software 269 | generally. 270 | 271 | **NO WARRANTY** 272 | 273 | **11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO 274 | WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 275 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 276 | OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY 277 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 278 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 279 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 280 | PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME 281 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 282 | 283 | **12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 284 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 285 | AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU 286 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 287 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 288 | PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 289 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 290 | FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF 291 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 292 | DAMAGES. 293 | 294 | ### END OF TERMS AND CONDITIONS 295 | 296 | ### How to Apply These Terms to Your New Programs 297 | 298 | If you develop a new program, and you want it to be of the greatest 299 | possible use to the public, the best way to achieve this is to make it 300 | free software which everyone can redistribute and change under these 301 | terms. 302 | 303 | To do so, attach the following notices to the program. It is safest to 304 | attach them to the start of each source file to most effectively 305 | convey the exclusion of warranty; and each file should have at least 306 | the "copyright" line and a pointer to where the full notice is found. 307 | 308 | one line to give the program's name and an idea of what it does. 309 | Copyright (C) yyyy name of author 310 | 311 | This program is free software; you can redistribute it and/or 312 | modify it under the terms of the GNU General Public License 313 | as published by the Free Software Foundation; either version 2 314 | of the License, or (at your option) any later version. 315 | 316 | This program is distributed in the hope that it will be useful, 317 | but WITHOUT ANY WARRANTY; without even the implied warranty of 318 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 319 | GNU General Public License for more details. 320 | 321 | You should have received a copy of the GNU General Public License 322 | along with this program; if not, write to the Free Software 323 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 324 | 325 | Also add information on how to contact you by electronic and paper 326 | mail. 327 | 328 | If the program is interactive, make it output a short notice like this 329 | when it starts in an interactive mode: 330 | 331 | Gnomovision version 69, Copyright (C) year name of author 332 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details 333 | type `show w'. This is free software, and you are welcome 334 | to redistribute it under certain conditions; type `show c' 335 | for details. 336 | 337 | The hypothetical commands \`show w' and \`show c' should show the 338 | appropriate parts of the General Public License. Of course, the 339 | commands you use may be called something other than \`show w' and 340 | \`show c'; they could even be mouse-clicks or menu items--whatever 341 | suits your program. 342 | 343 | You should also get your employer (if you work as a programmer) or 344 | your school, if any, to sign a "copyright disclaimer" for the program, 345 | if necessary. Here is a sample; alter the names: 346 | 347 | Yoyodyne, Inc., hereby disclaims all copyright 348 | interest in the program `Gnomovision' 349 | (which makes passes at compilers) written 350 | by James Hacker. 351 | 352 | signature of Ty Coon, 1 April 1989 353 | Ty Coon, President of Vice 354 | 355 | This General Public License does not permit incorporating your program 356 | into proprietary programs. If your program is a subroutine library, 357 | you may consider it more useful to permit linking proprietary 358 | applications with the library. If this is what you want to do, use the 359 | [GNU Lesser General Public 360 | License](http://www.gnu.org/licenses/lgpl.html) instead of this 361 | License. 362 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mainroad 2 | 3 | **Mainroad** is a responsive, simple, clean and content-focused [Hugo](https://gohugo.io/) theme based on the 4 | [MH Magazine lite](https://wordpress.org/themes/mh-magazine-lite/) theme. 5 | 6 | **[Demo](https://mainroad-demo.netlify.app/)** • **[Docs](https://mainroad-demo.netlify.app/docs/)** 7 | 8 | ![screenshot](https://raw.githubusercontent.com/Vimux/Mainroad/master/images/screenshot.png) 9 | 10 | **Features:** 11 | 12 | + Responsive design 13 | + Main & secondary menus 14 | + Widgetized sidebar 15 | + Translations. Over 15 languages and counting 16 | + Configurable theme settings (sidebar position, author box, post navigation, highlight color) via `config.toml` 17 | + Hugo internal templates (Open Graph, Schema, Twitter Cards, Disqus, Google Analytics) 18 | + Wide cross-browser compatibility 19 | + *Desktop: IE11+, Chrome, Firefox, Safari* 20 | + *Mobile: Android browser (on Android 4.4+), Safari (on iOS 7+), Google Chrome, Opera mini* 21 | + Custom Google Fonts support, MathJax, Table of Contents, SVG icons and much more… 22 | 23 | ## Installation 24 | 25 | *Before starting, please be sure that you have 26 | [installed Hugo](https://gohugo.io/getting-started/quick-start/#step-1-install-hugo) and 27 | [created a new site](https://gohugo.io/getting-started/quick-start/#step-2-create-a-new-site). After that, you are ready 28 | to install **Mainroad**.* 29 | 30 | From your project's root directory, run: 31 | 32 | ``` 33 | git clone https://github.com/vimux/mainroad.git themes/mainroad 34 | ``` 35 | 36 | Or, if you don't plan to make any significant changes but want to track and update the theme, you can add it as a git 37 | submodule via the following command: 38 | 39 | ``` 40 | git submodule add https://github.com/vimux/mainroad.git themes/mainroad 41 | ``` 42 | 43 | Next, open `config.toml` in the base of the Hugo site and ensure the theme option is set to `mainroad`: 44 | 45 | ``` 46 | theme = "mainroad" 47 | ``` 48 | 49 | ## Configuration 50 | 51 | ### Config.toml example 52 | 53 | ```toml 54 | baseurl = "/" 55 | title = "Mainroad" 56 | languageCode = "en-us" 57 | paginate = "10" # Number of posts per page 58 | theme = "mainroad" 59 | disqusShortname = "" # DEPRECATED! Use .Services.Disqus.Shortname 60 | googleAnalytics = "" # DEPRECATED! Use .Services.googleAnalytics.ID 61 | 62 | [services.disqus] 63 | shortname = "" # Enable Disqus by entering your Disqus shortname 64 | [services.googleAnalytics] 65 | ID = "" # Enable Google Analytics by entering your tracking ID 66 | 67 | [Author] # Used in authorbox 68 | name = "John Doe" 69 | bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it." 70 | avatar = "img/avatar.png" 71 | 72 | [Params] 73 | description = "John Doe's Personal blog about everything" # Site description. Used in meta description 74 | copyright = "John Doe" # Footer copyright holder, otherwise will use site title 75 | opengraph = true # Enable OpenGraph if true 76 | schema = true # Enable Schema 77 | twitter_cards = true # Enable Twitter Cards if true 78 | readmore = false # Show "Read more" button in list if true 79 | authorbox = true # Show authorbox at bottom of pages if true 80 | toc = true # Enable Table of Contents 81 | pager = true # Show pager navigation (prev/next links) at the bottom of pages if true 82 | post_meta = ["author", "date", "categories", "translations"] # Order of post meta information 83 | mainSections = ["post", "blog", "news"] # Specify section pages to show on home page and the "Recent articles" widget 84 | dateformat = "2006-01-02" # Change the format of dates 85 | mathjax = true # Enable MathJax 86 | mathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" # Specify MathJax path 87 | mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config 88 | googleFontsLink = "https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" # Load Google Fonts 89 | customCSS = ["css/custom.css"] # Include custom CSS files 90 | customJS = ["js/custom.js"] # Include custom JS files 91 | 92 | # DEPRECATED PARAMS 93 | subtitle = "" # Deprecated in favor of .Site.Params.logo.subtitle 94 | highlightColor = "" # Deprecated in favor of .Site.Params.style.vars.highlightColor 95 | 96 | [Params.style.vars] 97 | highlightColor = "#e22d30" # Override highlight color 98 | 99 | # Override font-family sets 100 | # Take care of different quotes OR escaping symbols in these params if necessary 101 | fontFamilyPrimary = "'Open Sans', Helvetica, Arial, sans-serif" 102 | # Secondary font-family set responsible for pre, code, kbd, and samp tags font 103 | fontFamilySecondary = "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" 104 | 105 | [Params.logo] 106 | image = "img/placeholder.png" # Logo image. Path relative to "static" 107 | title = "Mainroad" # Logo title, otherwise will use site title 108 | subtitle = "Just another site" # Logo subtitle 109 | 110 | [Params.thumbnail] 111 | visibility = ["list", "post"] # Control thumbnail visibility 112 | 113 | [Params.sidebar] 114 | home = "right" # Configure layout for home page 115 | list = "left" # Configure layout for list pages 116 | single = false # Configure layout for single pages 117 | # Enable widgets in given order 118 | widgets = ["search", "recent", "categories", "taglist", "social", "languages"] 119 | 120 | [Params.widgets] 121 | recent_num = 5 # Set the number of articles in the "Recent articles" widget 122 | categories_counter = false # Enable counter for each category in "Categories" widget 123 | tags_counter = false # Enable counter for each tag in "Tags" widget 124 | 125 | [Params.widgets.social] 126 | cached = false # activate cache if true 127 | # Enable parts of social widget 128 | facebook = "username" 129 | twitter = "username" 130 | instagram = "username" 131 | linkedin = "username" 132 | telegram = "username" 133 | github = "username" 134 | gitlab = "username" 135 | bitbucket = "username" 136 | email = "example@example.com" 137 | 138 | # Custom social links 139 | [[Params.widgets.social.custom]] 140 | title = "Youtube" 141 | url = "https://youtube.com/user/username" 142 | icon = "youtube.svg" # Optional. Path relative to "layouts/partials" 143 | rel = "noopener noreferrer" # Set to false to remove the rel attribute 144 | 145 | [[Params.widgets.social.custom]] 146 | title = "My Home Page" 147 | url = "https://example.com" 148 | 149 | [Params.widgets.search] 150 | cached = false # activate cache if true 151 | url = "https://google.com/search" 152 | [Params.widgets.search.input] 153 | name = "sitesearch" 154 | pre = "" 155 | ``` 156 | 157 | **Do not copy example config as-is**. Use only those parameters that you need. 158 | 159 | For more information about all available standard configuration settings, please read 160 | [All Hugo Configuration Settings](https://gohugo.io/getting-started/configuration/#all-configuration-settings). 161 | 162 | ### Front Matter example 163 | 164 | ```yaml 165 | --- 166 | # Common-Defined params 167 | title: "Example article title" 168 | date: "2017-08-21" 169 | description: "Example article description" 170 | categories: 171 | - "Category 1" 172 | - "Category 2" 173 | tags: 174 | - "Test" 175 | - "Another test" 176 | menu: main # Optional, add page to a menu. Options: main, side, footer 177 | 178 | # Theme-Defined params 179 | thumbnail: "img/placeholder.png" # Thumbnail image 180 | lead: "Example lead - highlighted near the title" # Lead text 181 | comments: false # Enable Disqus comments for specific page 182 | authorbox: true # Enable authorbox for specific page 183 | pager: true # Enable pager navigation (prev/next) for specific page 184 | toc: true # Enable Table of Contents for specific page 185 | mathjax: true # Enable MathJax for specific page 186 | sidebar: "right" # Enable sidebar (on the right side) per page 187 | widgets: # Enable sidebar widgets in given order per page 188 | - "search" 189 | - "recent" 190 | - "taglist" 191 | --- 192 | ``` 193 | 194 | For more information about all available standard front matter variables, please read 195 | [Hugo Front Matter](https://gohugo.io/content-management/front-matter). 196 | 197 | ## Contributing 198 | 199 | Have you found a bug or got an idea for a new feature? Feel free to use the 200 | [issue tracker](https://github.com/Vimux/mainroad/issues) to let me know. Or make directly a 201 | [pull request](https://github.com/Vimux/mainroad/pulls), but please respect the following 202 | [contributing guide](https://github.com/Vimux/mainroad/blob/master/CONTRIBUTING.md). 203 | 204 | ## License 205 | 206 | This theme is released under the [GPLv2 license](https://github.com/Vimux/mainroad/blob/master/LICENSE.md). 207 | -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .TranslationBaseName '-' ' ' | title }}" 3 | description: "" 4 | date: "{{ .Date }}" 5 | thumbnail: "" 6 | categories: 7 | - "" 8 | tags: 9 | - "" 10 | --- 11 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | {{- $highlightColor := .Site.Params.style.vars.highlightColor | default (.Site.Params.highlightColor | default "#e22d30") -}} 2 | 3 | {{- $fontSans := `"Open Sans", Helvetica, Arial, sans-serif` -}} 4 | {{- $fontMono := `SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` -}} 5 | {{- $fontFamilyPrimary := .Site.Params.style.vars.fontFamilyPrimary | default $fontSans -}} 6 | {{- $fontFamilySecondary := .Site.Params.style.vars.fontFamilySecondary | default $fontMono -}} 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | } 13 | 14 | article, 15 | aside, 16 | dialog, 17 | figcaption, 18 | figure, 19 | footer, 20 | header, 21 | hgroup, 22 | main, 23 | nav, 24 | section { 25 | display: block; 26 | } 27 | 28 | :focus::-webkit-input-placeholder { 29 | color: transparent; 30 | } 31 | 32 | :focus::-moz-placeholder { 33 | color: transparent; 34 | } 35 | 36 | :focus:-moz-placeholder { 37 | color: transparent; 38 | } 39 | 40 | :focus:-ms-input-placeholder { 41 | color: transparent; 42 | } 43 | 44 | /* Structure */ 45 | html { 46 | font-size: 100%; 47 | -ms-text-size-adjust: none; 48 | -webkit-text-size-adjust: none; 49 | } 50 | 51 | body { 52 | margin: 0; 53 | font-family: {{ $fontFamilyPrimary }}; 54 | font-size: 14px; 55 | font-size: .875rem; 56 | line-height: 1.6; 57 | word-wrap: break-word; 58 | background: #f7f7f7; 59 | -webkit-font-smoothing: antialiased; 60 | } 61 | 62 | .container { 63 | position: relative; 64 | width: 100%; 65 | max-width: 1080px; 66 | margin: 0 auto; 67 | } 68 | 69 | .container--outer { 70 | margin: 25px auto; 71 | box-shadow: 0 0 10px rgba(50, 50, 50, .17); 72 | } 73 | 74 | .wrapper { 75 | padding: 25px; 76 | background: #fff; 77 | } 78 | 79 | .flex { 80 | display: -webkit-flex; 81 | display: flex; 82 | } 83 | 84 | .primary { 85 | -webkit-flex: 1 0 65.83%; 86 | flex: 1 0 65.83%; 87 | -webkit-order: 1; 88 | order: 1; 89 | min-width: 0; 90 | } 91 | 92 | .sidebar { 93 | -webkit-flex: 1 0 31.66%; 94 | flex: 1 0 31.66%; 95 | -webkit-order: 2; 96 | order: 2; 97 | min-width: 0; 98 | margin: 0 0 0 2.5%; 99 | } 100 | 101 | .sidebar--left { 102 | -webkit-order: 0; 103 | order: 0; 104 | margin: 0 2.5% 0 0; 105 | } 106 | 107 | .clearfix { 108 | display: block; 109 | } 110 | 111 | .clearfix::after { 112 | display: block; 113 | height: 0; 114 | padding: 0; 115 | margin: 0; 116 | clear: both; 117 | line-height: 0; 118 | visibility: hidden; 119 | content: ""; 120 | } 121 | 122 | input, 123 | button, 124 | select, 125 | optgroup, 126 | textarea { 127 | margin: 0; 128 | font-family: inherit; 129 | font-size: inherit; 130 | line-height: inherit; 131 | } 132 | 133 | /* Button */ 134 | .btn { 135 | padding: 5px 10px; 136 | font-weight: 700; 137 | color: #fff; 138 | white-space: pre-line; 139 | background: #2a2a2a; 140 | } 141 | 142 | .btn:hover { 143 | color: #fff; 144 | background: {{ $highlightColor }}; 145 | } 146 | 147 | /* Animation */ 148 | .menu__item, 149 | .btn { 150 | transition: background-color .25s ease-out; 151 | } 152 | 153 | /* Typography */ 154 | h1, 155 | h2, 156 | h3, 157 | h4, 158 | h5, 159 | h6 { 160 | margin: 0 0 20px; 161 | margin: 0 0 1.25rem; 162 | font-weight: 700; 163 | line-height: 1.3; 164 | color: #000; 165 | } 166 | 167 | h1 { 168 | font-size: 32px; 169 | font-size: 2rem; 170 | } 171 | 172 | h2 { 173 | font-size: 24px; 174 | font-size: 1.5rem; 175 | } 176 | 177 | h3 { 178 | font-size: 20px; 179 | font-size: 1.25rem; 180 | } 181 | 182 | h4 { 183 | font-size: 18px; 184 | font-size: 1.125rem; 185 | } 186 | 187 | h5 { 188 | font-size: 16px; 189 | font-size: 1rem; 190 | } 191 | 192 | h6 { 193 | font-size: 16px; 194 | font-size: 1rem; 195 | } 196 | 197 | a { 198 | color: #000; 199 | text-decoration: none; 200 | } 201 | 202 | a:hover { 203 | color: {{ $highlightColor }}; 204 | } 205 | 206 | hr { 207 | margin: 0 0 20px; 208 | border: 0; 209 | border-top: 1px solid #dadada; 210 | } 211 | 212 | p { 213 | margin: 0 0 20px; 214 | margin: 0 0 1.25rem; 215 | } 216 | 217 | b, 218 | strong { 219 | font: inherit; 220 | font-weight: 700; 221 | } 222 | 223 | i, 224 | em { 225 | font: inherit; 226 | font-style: italic; 227 | } 228 | 229 | ol, 230 | ul { 231 | padding: 0; 232 | margin: 0; 233 | } 234 | 235 | small { 236 | font-size: 12px; 237 | font-size: .75rem; 238 | } 239 | 240 | mark { 241 | background-color: #fd5; 242 | } 243 | 244 | figure { 245 | margin: 0 0 20px; 246 | margin: 0 0 1.25rem; 247 | } 248 | 249 | figcaption { 250 | margin-top: 4px; 251 | margin-top: .25rem; 252 | color: #666; 253 | } 254 | 255 | figcaption h4 { 256 | margin: 0; 257 | color: inherit; 258 | } 259 | 260 | pre, 261 | code, 262 | kbd, 263 | samp { 264 | font-family: {{ $fontFamilySecondary }}; 265 | font-size: inherit; 266 | } 267 | 268 | pre, 269 | code { 270 | background-color: #f5f5f5; 271 | border: 1px solid #ebebeb; 272 | } 273 | 274 | code { 275 | padding: 0 5px; 276 | color: #c33; 277 | } 278 | 279 | pre { 280 | display: block; 281 | padding: 0; 282 | padding: 1.25rem; 283 | margin-bottom: 20px; 284 | margin-bottom: 1.25rem; 285 | overflow: auto; 286 | color: #000; 287 | } 288 | 289 | pre code { 290 | padding: 0; 291 | color: inherit; 292 | white-space: inherit; 293 | background: inherit; 294 | border: 0; 295 | } 296 | 297 | kbd { 298 | padding: 2px 3px; 299 | color: #fff; 300 | background-color: #2a2a2a; 301 | } 302 | 303 | blockquote { 304 | display: block; 305 | padding: 5px 0 5px 15px; 306 | margin: 0 0 20px; 307 | margin: 0 0 1.25rem; 308 | line-height: 1.6; 309 | border-left: 5px solid {{ $highlightColor }}; 310 | } 311 | 312 | blockquote p:last-child { 313 | margin: 0; 314 | } 315 | 316 | blockquote footer { 317 | text-align: right; 318 | } 319 | 320 | sup, 321 | sub { 322 | font-size: 10px; 323 | font-size: .625rem; 324 | font-style: normal; 325 | } 326 | 327 | sup { 328 | vertical-align: super; 329 | } 330 | 331 | sub { 332 | vertical-align: sub; 333 | } 334 | 335 | abbr[title] { 336 | text-decoration: none; 337 | cursor: help; 338 | border-bottom: 1px dotted #000; 339 | } 340 | 341 | q { 342 | font-style: italic; 343 | } 344 | 345 | address { 346 | margin-bottom: 20px; 347 | margin-bottom: 1.25rem; 348 | font-family: "Consolas", Courier New, Courier, monospace; 349 | line-height: 1.5; 350 | } 351 | 352 | dl { 353 | margin: 0 0 10px 20px; 354 | } 355 | 356 | dt, 357 | dd { 358 | display: list-item; 359 | } 360 | 361 | dt { 362 | font-weight: bold; 363 | list-style-type: square; 364 | } 365 | 366 | dd { 367 | margin-left: 20px; 368 | list-style-type: circle; 369 | } 370 | 371 | select { 372 | max-width: 100%; 373 | } 374 | 375 | .warning { 376 | padding: 20px 10px; 377 | text-align: center; 378 | border: 1px solid #ddd; 379 | } 380 | 381 | .warning__icon { 382 | margin-bottom: 20px; 383 | fill: #ddd; 384 | } 385 | 386 | /* Header */ 387 | .header { 388 | background: #fff; 389 | } 390 | 391 | .logo { 392 | padding: 25px; 393 | } 394 | 395 | .logo__link { 396 | display: inline-block; 397 | } 398 | 399 | .logo__item { 400 | display: inline-block; 401 | vertical-align: middle; 402 | } 403 | 404 | .logo__img { 405 | max-height: 256px; 406 | } 407 | 408 | .logo__text { 409 | text-transform: uppercase; 410 | } 411 | 412 | .logo--mixed .logo__item { 413 | margin: .5rem auto; 414 | } 415 | 416 | .logo--mixed .logo__img { 417 | max-width: 128px; 418 | max-height: 128px; 419 | } 420 | 421 | .logo--mixed .logo__text { 422 | padding: 0 1rem; 423 | } 424 | 425 | .logo__title { 426 | font-size: 32px; 427 | font-size: 2rem; 428 | font-weight: 700; 429 | line-height: 1; 430 | color: #000; 431 | } 432 | 433 | .logo__tagline { 434 | display: inline-block; 435 | padding-top: 10px; 436 | margin-top: 10px; 437 | font-size: 14px; 438 | font-size: .875rem; 439 | font-weight: 700; 440 | line-height: 1; 441 | color: {{ $highlightColor }}; 442 | border-top: 1px solid #ebebeb; 443 | } 444 | 445 | .divider { 446 | height: 5px; 447 | margin: 0; 448 | background: {{ $highlightColor }}; 449 | border: 0; 450 | } 451 | 452 | /* Main menu */ 453 | .no-js .menu__btn { 454 | display: none; 455 | } 456 | 457 | .menu__btn { 458 | display: block; 459 | width: 100%; 460 | padding: 0; 461 | font: inherit; 462 | color: #fff; 463 | background: #2a2a2a; 464 | border: 0; 465 | outline: 0; 466 | } 467 | 468 | .menu__btn-title { 469 | position: relative; 470 | display: block; 471 | padding: 10px 15px; 472 | padding: .625rem .9375rem; 473 | font-weight: 700; 474 | text-align: right; 475 | text-transform: uppercase; 476 | cursor: pointer; 477 | -webkit-user-select: none; 478 | -moz-user-select: none; 479 | -ms-user-select: none; 480 | -o-user-select: none; 481 | user-select: none; 482 | } 483 | 484 | :focus > .menu__btn-title { 485 | box-shadow: inset 0 0 1px 3px {{ $highlightColor }}; 486 | } 487 | 488 | button:not(:-moz-focusring):focus > .menu__btn-title { 489 | box-shadow: none; 490 | } 491 | 492 | .menu__btn:focus, 493 | .menu__btn-title:focus { 494 | outline: 0; 495 | } 496 | 497 | .js .menu__btn--active { 498 | color: {{ $highlightColor }}; 499 | } 500 | 501 | .menu__list { 502 | list-style: none; 503 | background: #2a2a2a; 504 | } 505 | 506 | .menu__item:hover { 507 | background: {{ $highlightColor }}; 508 | } 509 | 510 | .menu__item:first-child { 511 | border: 0; 512 | } 513 | 514 | .menu__item--active { 515 | background: {{ $highlightColor }}; 516 | } 517 | 518 | .menu__link { 519 | display: block; 520 | padding: 10px 15px; 521 | padding: .625rem .9375rem; 522 | font-weight: 700; 523 | color: #fff; 524 | text-transform: uppercase; 525 | } 526 | 527 | .menu__link:hover { 528 | color: #fff; 529 | } 530 | 531 | .js .menu__list { 532 | position: absolute; 533 | z-index: 1; 534 | width: 100%; 535 | visibility: hidden; 536 | -webkit-transform: scaleY(0); 537 | transform: scaleY(0); 538 | -webkit-transform-origin: top left; 539 | transform-origin: top left; 540 | } 541 | 542 | .js .menu__list--active { 543 | visibility: visible; 544 | border-top: 1px solid rgba(255, 255, 255, .1); 545 | border-bottom: 1px solid rgba(255, 255, 255, .1); 546 | -webkit-transform: scaleY(1); 547 | transform: scaleY(1); 548 | } 549 | 550 | .menu__list--transition { 551 | transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease; 552 | } 553 | 554 | @media screen and (min-width: 767px) { 555 | .menu { 556 | border-bottom: 5px solid {{ $highlightColor }}; 557 | } 558 | 559 | .menu__btn { 560 | display: none; 561 | } 562 | 563 | .menu__list, 564 | .js .menu__list { 565 | position: relative; 566 | display: -webkit-flex; 567 | display: flex; 568 | -webkit-flex-wrap: wrap; 569 | flex-wrap: wrap; 570 | visibility: visible; 571 | border: 0; 572 | -webkit-transform: none; 573 | transform: none; 574 | } 575 | 576 | .menu__item { 577 | border-left: 1px solid rgba(255, 255, 255, .1); 578 | } 579 | } 580 | 581 | /* Posts/Pages */ 582 | .post__header, 583 | .main__header { 584 | margin-bottom: 20px; 585 | margin-bottom: 1.25rem; 586 | } 587 | 588 | .main__title { 589 | font-size: 28px; 590 | font-size: 1.75rem; 591 | } 592 | 593 | .main__content { 594 | margin-bottom: 20px; 595 | margin-bottom: 1.25rem; 596 | } 597 | 598 | .meta { 599 | font-size: 13px; 600 | font-size: .8125rem; 601 | vertical-align: baseline; 602 | } 603 | 604 | .meta, 605 | .meta a { 606 | color: #666; 607 | } 608 | 609 | .meta a:hover { 610 | color: {{ $highlightColor }}; 611 | } 612 | 613 | .meta__item { 614 | display: inline; 615 | margin-left: 15px; 616 | } 617 | 618 | .meta__item:first-child { 619 | margin-left: 0; 620 | } 621 | 622 | .meta__icon { 623 | margin-right: 5px; 624 | vertical-align: middle; 625 | fill: #c4c4c4; 626 | } 627 | 628 | .meta__text { 629 | vertical-align: middle; 630 | } 631 | 632 | .post__title { 633 | margin: 0; 634 | } 635 | 636 | .post__meta { 637 | padding: 5px 0; 638 | margin-top: 10px; 639 | margin-top: .625rem; 640 | border-top: 1px dotted #ebebeb; 641 | border-bottom: 1px dotted #ebebeb; 642 | } 643 | 644 | .post__lead { 645 | margin-top: 4px; 646 | margin-top: .25rem; 647 | margin-bottom: 0; 648 | font-size: 16px; 649 | font-size: 1rem; 650 | font-style: italic; 651 | } 652 | 653 | .post__thumbnail { 654 | max-width: 1030px; 655 | margin: 0 0 20px; 656 | margin-bottom: 0 0 1.25rem; 657 | } 658 | 659 | .post__thumbnail img { 660 | width: 100%; 661 | } 662 | 663 | .content a, 664 | .warning a, 665 | .authorbox__description a { 666 | font-weight: 700; 667 | color: {{ $highlightColor }}; 668 | } 669 | 670 | .content a:hover, 671 | .warning a:hover, 672 | .authorbox__description a:hover { 673 | color: {{ $highlightColor }}; 674 | text-decoration: underline; 675 | } 676 | 677 | .content .alignnone { 678 | display: block; 679 | margin: 20px 0; 680 | margin: 1.25rem 0; 681 | } 682 | 683 | .content .aligncenter { 684 | display: block; 685 | margin: 20px auto; 686 | margin: 1.25rem auto; 687 | } 688 | 689 | .content .alignleft { 690 | display: inline; 691 | float: left; 692 | margin: 5px 20px 20px 0; 693 | margin: .3125rem 1.25rem 1.25rem 0; 694 | } 695 | 696 | .content .alignright { 697 | display: inline; 698 | float: right; 699 | margin: 5px 0 20px 20px; 700 | margin: .3125rem 0 1.25rem 1.25rem; 701 | } 702 | 703 | .content ul { 704 | list-style: square; 705 | } 706 | 707 | .content ol { 708 | list-style: decimal; 709 | } 710 | 711 | .content ul, 712 | .content ol { 713 | margin: 0 0 20px 40px; 714 | } 715 | 716 | .content ul ul, 717 | .content ol ol, 718 | .content ol ul, 719 | .content ul ol { 720 | margin: 0 0 0 40px; 721 | } 722 | 723 | .content li { 724 | margin-bottom: 5px; 725 | } 726 | 727 | .post__footer { 728 | margin-top: 20px; 729 | margin-top: 1.25rem; 730 | } 731 | 732 | /* Post tags */ 733 | .tags { 734 | margin-bottom: 20px; 735 | margin-bottom: 1.25rem; 736 | font-size: 12px; 737 | font-size: .75rem; 738 | line-height: 1; 739 | color: #fff; 740 | } 741 | 742 | .tags__list { 743 | list-style: none; 744 | } 745 | 746 | .tags__item { 747 | float: left; 748 | margin: 0 6px 6px 0; 749 | margin: 0 .375rem .375rem 0; 750 | text-transform: uppercase; 751 | background: #2a2a2a; 752 | } 753 | 754 | .tags__item:hover { 755 | background: {{ $highlightColor }}; 756 | } 757 | 758 | .tags__link, 759 | .tags__link:hover { 760 | display: block; 761 | padding: 10px 15px; 762 | } 763 | 764 | .tags__badge { 765 | float: left; 766 | width: 32px; 767 | height: 32px; 768 | padding: 8px; 769 | margin-right: 6px; 770 | background: {{ $highlightColor }}; 771 | fill: #fff; 772 | } 773 | 774 | /* Table of Contents */ 775 | .toc { 776 | margin-bottom: 20px; 777 | font-weight: 700; 778 | color: #7a8288; 779 | background: #fff; 780 | border-color: #ebebeb; 781 | border-style: solid; 782 | border-top-width: 1px; 783 | border-right-width: 1px; 784 | border-bottom-width: 0; 785 | border-left-width: 1px; 786 | } 787 | 788 | .toc__title { 789 | padding: 5px 10px; 790 | color: #fff; 791 | text-transform: uppercase; 792 | -webkit-user-select: none; 793 | -moz-user-select: none; 794 | -ms-user-select: none; 795 | -o-user-select: none; 796 | user-select: none; 797 | background: #2a2a2a; 798 | } 799 | 800 | .toc__menu ul { 801 | margin: 0; 802 | list-style: none; 803 | } 804 | 805 | .toc__menu li li a { 806 | padding-left: 25px; 807 | } 808 | 809 | .toc__menu li li li a { 810 | padding-left: 45px; 811 | } 812 | 813 | .toc__menu li li li li a { 814 | padding-left: 65px; 815 | } 816 | 817 | .toc__menu li li li li li a { 818 | padding-left: 85px; 819 | } 820 | 821 | .toc__menu li li li li li li a { 822 | padding-left: 105px; 823 | } 824 | 825 | .toc__menu li { 826 | margin: 0; 827 | } 828 | 829 | .toc__menu a { 830 | display: block; 831 | padding: 5px 10px; 832 | color: {{ $highlightColor }}; 833 | border-bottom: 1px solid #ebebeb; 834 | } 835 | 836 | .toc__menu a:hover { 837 | text-decoration: underline; 838 | } 839 | 840 | /* Author Box */ 841 | .authorbox { 842 | padding: 25px 0; 843 | margin-bottom: 25px; 844 | line-height: 1.5; 845 | border-top: 1px solid #ebebeb; 846 | border-bottom: 1px solid #ebebeb; 847 | } 848 | 849 | .authorbox__avatar { 850 | float: left; 851 | padding: 3px; 852 | margin: 0 25px 0 0; 853 | border: 1px solid #ebebeb; 854 | } 855 | 856 | .authorbox__header { 857 | margin-bottom: 10px; 858 | } 859 | 860 | .authorbox__name { 861 | font-size: 16px; 862 | font-size: 1rem; 863 | font-weight: 700; 864 | } 865 | 866 | /* List content */ 867 | .list__item { 868 | padding-bottom: 20px; 869 | padding-bottom: 1.25rem; 870 | margin-bottom: 20px; 871 | margin-bottom: 1.25rem; 872 | border-bottom: 1px solid #ebebeb; 873 | } 874 | 875 | .list__header { 876 | margin-bottom: 10px; 877 | margin-bottom: .625rem; 878 | } 879 | 880 | .list__title { 881 | font-size: 20px; 882 | font-size: 1.25rem; 883 | } 884 | 885 | .list__meta { 886 | margin-top: 5px; 887 | } 888 | 889 | .list__thumbnail { 890 | float: left; 891 | margin: 0 20px 0 0; 892 | } 893 | 894 | .list__thumbnail img { 895 | width: 100%; 896 | max-width: 235px; 897 | } 898 | 899 | .list__footer-readmore { 900 | float: right; 901 | margin-top: 10px; 902 | } 903 | 904 | /* Pagination */ 905 | .pagination { 906 | margin-top: 20px; 907 | } 908 | 909 | .pagination__item { 910 | display: inline-block; 911 | padding: 10px 15px; 912 | font-weight: 700; 913 | color: #000; 914 | background: #f5f5f5; 915 | } 916 | 917 | .pagination__item:hover, 918 | .pagination__item--current { 919 | color: #fff; 920 | background: {{ $highlightColor }}; 921 | } 922 | 923 | /* Pager (prev/next links) navigation */ 924 | .pager { 925 | -webkit-justify-content: space-between; 926 | justify-content: space-between; 927 | padding-top: 25px; 928 | padding-bottom: 25px; 929 | margin-bottom: 25px; 930 | border-bottom: 1px solid #ebebeb; 931 | } 932 | 933 | .pager__subtitle { 934 | display: block; 935 | margin-bottom: 5px; 936 | font-weight: 700; 937 | line-height: 1; 938 | text-transform: uppercase; 939 | } 940 | 941 | .pager__title { 942 | margin-bottom: 0; 943 | overflow: hidden; 944 | font-size: 13px; 945 | font-size: .8125rem; 946 | } 947 | 948 | .pager__item { 949 | -webkit-flex: 1 1 50%; 950 | flex: 1 1 50%; 951 | max-width: 48%; 952 | } 953 | 954 | .pager__item--next { 955 | margin-left: auto; 956 | text-align: right; 957 | } 958 | 959 | .pager__link { 960 | display: block; 961 | } 962 | 963 | /* Images / Video */ 964 | img { 965 | width: auto\9; /* ie8 */ 966 | max-width: 100%; 967 | height: auto; 968 | vertical-align: bottom; 969 | } 970 | 971 | iframe, 972 | embed, 973 | object, 974 | video { 975 | max-width: 100%; 976 | } 977 | 978 | /* Table */ 979 | table { 980 | width: 100%; 981 | margin-bottom: 20px; 982 | margin-bottom: 1.25rem; 983 | border-spacing: 0; 984 | border-collapse: collapse; 985 | border-top: 1px solid #ebebeb; 986 | border-left: 1px solid #ebebeb; 987 | } 988 | 989 | td, 990 | th { 991 | padding: 5px 10px; 992 | border-right: 1px solid #ebebeb; 993 | border-bottom: 1px solid #ebebeb; 994 | } 995 | 996 | th { 997 | font-weight: 700; 998 | } 999 | 1000 | /* Forms */ 1001 | input { 1002 | padding: 5px; 1003 | font-size: 12px; 1004 | vertical-align: middle; 1005 | background: #f5f5f5; 1006 | border: 1px solid #ebebeb; 1007 | transition: all .25s ease-in-out; 1008 | } 1009 | 1010 | input[type=text], 1011 | input[type=email], 1012 | input[type=tel], 1013 | input[type=url] { 1014 | width: 60%; 1015 | } 1016 | 1017 | input[type=text]:hover, 1018 | input[type=email]:hover, 1019 | input[type=tel]:hover, 1020 | input[type=url]:hover, 1021 | textarea:hover { 1022 | border: 1px solid #aaa; 1023 | } 1024 | 1025 | input[type=submit], 1026 | input[type=reset] { 1027 | display: inline-block; 1028 | min-width: 150px; 1029 | padding: 10px 15px; 1030 | font-weight: 700; 1031 | color: #fff; 1032 | text-transform: uppercase; 1033 | cursor: pointer; 1034 | background: #2a2a2a; 1035 | border: 0; 1036 | transition: all .1s linear; 1037 | -webkit-appearance: none; 1038 | } 1039 | 1040 | input[type=submit]:hover, 1041 | input[type=reset]:hover { 1042 | background: {{ $highlightColor }}; 1043 | } 1044 | 1045 | textarea { 1046 | width: 96%; 1047 | padding: 5px; 1048 | overflow: auto; 1049 | line-height: 1.5; 1050 | resize: vertical; 1051 | background: #f5f5f5; 1052 | border: 1px solid rgba(0, 0, 0, .1); 1053 | } 1054 | 1055 | /* Widgets */ 1056 | .widget { 1057 | margin-bottom: 25px; 1058 | overflow: hidden; 1059 | } 1060 | 1061 | .widget:last-child { 1062 | margin-bottom: 0; 1063 | } 1064 | 1065 | .widget__title { 1066 | position: relative; 1067 | padding-bottom: 5px; 1068 | font-size: 16px; 1069 | font-size: 1rem; 1070 | text-transform: uppercase; 1071 | border-bottom: 3px solid {{ $highlightColor }}; 1072 | } 1073 | 1074 | .widget__item { 1075 | display: block; 1076 | padding: 5px 0; 1077 | border-bottom: 1px dotted #ebebeb; 1078 | } 1079 | 1080 | .widget__item:first-child { 1081 | padding-top: 0; 1082 | } 1083 | 1084 | .widget__counter--bubble { 1085 | display: inline-block; 1086 | padding: 0 6px; 1087 | font-size: .75rem; 1088 | color: #666; 1089 | text-align: center; 1090 | background: #ebebeb; 1091 | border-radius: 2em; 1092 | } 1093 | 1094 | /* Search widget */ 1095 | .widget-search__form { 1096 | padding: 16px 24px; 1097 | background: #f5f5f5; 1098 | } 1099 | 1100 | .widget-search__submit[type=submit] { 1101 | display: none; 1102 | } 1103 | 1104 | .widget-search__field { 1105 | width: 100%; 1106 | padding: 6px 8px; 1107 | font-size: 13px; 1108 | cursor: pointer; 1109 | background: #fff; 1110 | border: 1px solid #ebebeb; 1111 | outline-offset: -2px; 1112 | transition: none; 1113 | -webkit-appearance: none; 1114 | } 1115 | 1116 | .widget-search__field:active, 1117 | .widget-search__field:focus { 1118 | cursor: text; 1119 | outline: 2px solid #005fcc; 1120 | } 1121 | 1122 | /* Social widget */ 1123 | .widget-social__item { 1124 | padding: 0; 1125 | border: 0; 1126 | } 1127 | 1128 | .widget-social__link { 1129 | display: block; 1130 | margin: 0 0 8px; 1131 | white-space: normal; 1132 | } 1133 | 1134 | .widget-social__link-icon { 1135 | margin: 0 5px 0 0; 1136 | vertical-align: middle; 1137 | fill: #fff; 1138 | } 1139 | 1140 | /* Tags Widget */ 1141 | .widget-taglist__link { 1142 | display: inline-block; 1143 | margin: 0 4px 8px 0; 1144 | font-size: 12px; 1145 | text-transform: uppercase; 1146 | } 1147 | 1148 | /* Languages Widget */ 1149 | .widget-languages__link { 1150 | display: block; 1151 | } 1152 | 1153 | .widget-languages__link:hover .widget-languages__link-btn { 1154 | color: #fff; 1155 | background: {{ $highlightColor }}; 1156 | } 1157 | 1158 | .widget-languages__link-btn { 1159 | display: inline-block; 1160 | } 1161 | 1162 | /* Footer */ 1163 | .footer { 1164 | padding: 10px 25px; 1165 | font-size: 12px; 1166 | font-size: .75rem; 1167 | color: #999; 1168 | background: #2a2a2a; 1169 | border-top: 3px solid #999; 1170 | } 1171 | 1172 | .footer__container { 1173 | -webkit-flex-flow: row wrap; 1174 | flex-flow: row wrap; 1175 | -webkit-justify-content: space-between; 1176 | justify-content: space-between; 1177 | } 1178 | 1179 | .footer__links { 1180 | -webkit-order: 1; 1181 | order: 1; 1182 | } 1183 | 1184 | .footer a { 1185 | color: #fff; 1186 | } 1187 | 1188 | .footer a:hover { 1189 | text-decoration: underline; 1190 | } 1191 | 1192 | /* Media Queries */ 1193 | @media screen and (max-width: 1475px) { 1194 | .container--outer { 1195 | width: 95%; 1196 | } 1197 | } 1198 | 1199 | @media screen and (max-width: 900px) { 1200 | .container--outer { 1201 | width: 100%; 1202 | margin: 0 auto; 1203 | } 1204 | 1205 | .wrapper, 1206 | .logo { 1207 | padding: 20px; 1208 | } 1209 | 1210 | .widget { 1211 | margin-bottom: 20px; 1212 | } 1213 | 1214 | .footer__container { 1215 | display: block; 1216 | } 1217 | 1218 | .footer__links { 1219 | padding-bottom: 8px; 1220 | padding-bottom: 0.5rem; 1221 | text-align: center; 1222 | } 1223 | 1224 | .footer__copyright { 1225 | text-align: center; 1226 | } 1227 | } 1228 | 1229 | @media screen and (max-width: 767px) { 1230 | .wrapper { 1231 | display: block; 1232 | } 1233 | 1234 | .sidebar { 1235 | float: none; 1236 | width: 100%; 1237 | margin: 0; 1238 | } 1239 | 1240 | .logo { 1241 | text-align: center; 1242 | } 1243 | 1244 | .logo__link { 1245 | margin: 0 auto; 1246 | } 1247 | 1248 | .logo__title { 1249 | font-size: 24px; 1250 | font-size: 1.5rem; 1251 | } 1252 | 1253 | .sidebar { 1254 | margin-top: 20px; 1255 | } 1256 | } 1257 | 1258 | @media screen and (max-width: 620px) { 1259 | input[type=text], 1260 | input[type=email], 1261 | input[type=tel], 1262 | input[type=url] { 1263 | width: 88%; 1264 | } 1265 | 1266 | .meta__item { 1267 | display: block; 1268 | margin-left: 0; 1269 | } 1270 | 1271 | .authorbox { 1272 | text-align: center; 1273 | } 1274 | 1275 | .authorbox__avatar { 1276 | display: inline-block; 1277 | float: none; 1278 | margin: 0 0 20px; 1279 | } 1280 | 1281 | .pager { 1282 | display: block; 1283 | } 1284 | 1285 | .pager__item { 1286 | min-width: 100%; 1287 | text-align: center; 1288 | } 1289 | 1290 | .pager__item--prev { 1291 | padding-bottom: 25px; 1292 | } 1293 | 1294 | .content ul, 1295 | .content ol { 1296 | margin: 0 0 20px 20px; 1297 | } 1298 | 1299 | .content ul ul, 1300 | .content ol ol, 1301 | .content ol ul, 1302 | .content ul ol { 1303 | margin: 0 0 0 20px; 1304 | } 1305 | 1306 | .list__thumbnail { 1307 | max-width: 80px; 1308 | } 1309 | 1310 | .list__title { 1311 | font-size: 16px; 1312 | font-size: 1rem; 1313 | } 1314 | 1315 | .list__lead { 1316 | font-size: 14px; 1317 | font-size: .875rem; 1318 | } 1319 | 1320 | .list__meta { 1321 | display: block; 1322 | font-size: 11px; 1323 | font-size: .6875rem; 1324 | } 1325 | } 1326 | -------------------------------------------------------------------------------- /exampleSite/.gitignore: -------------------------------------------------------------------------------- 1 | public/ 2 | themes 3 | -------------------------------------------------------------------------------- /exampleSite/config.toml: -------------------------------------------------------------------------------- 1 | baseurl = "/" 2 | title = "Mainroad" 3 | languageCode = "en-us" 4 | paginate = "10" # Number of posts per page 5 | theme = "mainroad" 6 | disqusShortname = "" # Enable comments by entering your Disqus shortname 7 | googleAnalytics = "" # Enable Google Analytics by entering your tracking id 8 | 9 | [Author] 10 | name = "John Doe" 11 | bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it." 12 | avatar = "img/avatar.png" 13 | 14 | [Params] 15 | description = "John Doe's Personal blog about everything" # Description of your site 16 | opengraph = true 17 | twitter_cards = false 18 | readmore = false # Show "Read more" button in list if true 19 | authorbox = true 20 | pager = true 21 | post_meta = ["date", "categories"] # Order of post meta information 22 | mainSections = ["post", "docs"] 23 | 24 | [Params.logo] 25 | subtitle = "Just another site" # Logo subtitle 26 | 27 | [Params.sidebar] 28 | home = "right" # Configure layout for home page 29 | list = "right" # Configure layout for list pages 30 | single = "right" # Configure layout for single pages 31 | # Enable widgets in given order 32 | widgets = ["search", "recent", "categories", "taglist"] 33 | 34 | [Params.widgets] 35 | recent_num = 5 # Set the number of articles in the "Recent articles" widget 36 | tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default) 37 | -------------------------------------------------------------------------------- /exampleSite/content/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | date: 2022-01-25T14:00:00.000Z 4 | authorbox: false 5 | sidebar: false 6 | menu: main 7 | --- 8 | 9 | Our website builds with [Hugo](https://gohugo.io/) static site generator and 10 | [Mainroad](https://github.com/vimux/mainroad) theme. This demo allows you to see what Mainroad based website looks like 11 | before deciding to go with it. Just keep in mind that the current demo shows the basics, a small part of what the 12 | combination of Hugo and Mainroad can do. 13 | 14 | ## About Mainroad 15 | 16 | Mainroad is a responsive, simple, clean and content-focused Hugo theme based on the MH Magazine lite WordPress theme. 17 | 18 | Main features: 19 | 20 | * Responsive design 21 | * Main & secondary menus 22 | * Widgetized sidebar 23 | * Translations. Over 15 languages and counting 24 | * Configurable theme settings (sidebar position, author box, post navigation, highlight color) via config.toml 25 | * Hugo internal templates (Open Graph, Schema, Twitter Cards, Disqus, Google Analytics) 26 | * Wide cross-browser compatibility 27 | * Desktop: IE11+, Chrome, Firefox, Safari 28 | * Mobile: Android browser (on Android 4.4+), Safari (on iOS 7+), Google Chrome, Opera mini 29 | * Custom Google Fonts support, MathJax, Table of Contents, SVG icons and much more… 30 | 31 | Learn more on [GitHub](https://github.com/vimux/mainroad). Mainroad theme is released under the 32 | [GPLv2 license](https://github.com/vimux/mainroad/blob/master/LICENSE.md). 33 | 34 | ## About Hugo 35 | 36 | Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, ease of use, and 37 | configurability. Hugo takes a directory with content and templates and renders them into a full HTML website. With its 38 | amazing speed and flexibility, Hugo makes building websites fun again. 39 | 40 | Learn more on [GitHub](https://github.com/gohugoio/hugo). Complete documentation is available at 41 | [Hugo Documentation](https://gohugo.io/getting-started/). 42 | -------------------------------------------------------------------------------- /exampleSite/content/docs/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation 3 | description: Mainroad theme documentation, including getting started, customization guides, and FAQ. 4 | --- 5 | -------------------------------------------------------------------------------- /exampleSite/content/docs/customization.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Customization 3 | description: Describes common Mainroad theme configuration parameters that can be adjusted via config file or via Front 4 | Matter section. 5 | lead: Describes common Mainroad theme configuration parameters that can be adjusted via config file or via Front Matter 6 | section. 7 | date: 2022-01-24T14:00:00.000Z 8 | thumbnail: 9 | src: "img/placeholder.png" 10 | visibility: 11 | - list 12 | authorbox: false 13 | sidebar: false 14 | pager: false 15 | weight: 2 16 | menu: main 17 | --- 18 | 19 | Customization page describes common Mainroad configuration parameters which can be specified via configuration file or 20 | via Front Matter section. That includes logo section tuning, adding a sidebar with widgets, adjusting highlight color, 21 | and more. 22 | 23 | 24 | 25 | This section will mainly cover customization settings that are unique to this theme. If something is not covered here, 26 | there's a good chance it is covered somewhere in [Hugo docs](https://gohugo.io/documentation/). 27 | 28 | ### Logo 29 | 30 | **Mainroad** allows you to set a custom logo in the site header. You may use text, or image, or both. Use the following 31 | options in your site config: 32 | 33 | ```toml 34 | [Params.logo] 35 | image = "img/placeholder.png" 36 | title = "Mainroad" 37 | subtitle = "Just another site" 38 | ``` 39 | 40 | **Note:** logo image will display at a maximum width of 128 pixels and a maximum height of 128 pixels 41 | when you use text and image simultaneously. When the only logo image is active, it will display at a maximum height of 42 | 256 pixels. Ideally, your logo image should be SVG. 43 | 44 | --- 45 | 46 | If you don't set any of these variables, the theme uses the site title as a logo title. Don't need a logo section? 47 | Disable it this way: 48 | 49 | ```toml 50 | [Params.logo] 51 | image = false 52 | title = false 53 | subtitle = false 54 | ``` 55 | 56 | ### Highlight color 57 | 58 | Mainroad uses `#e22d30` as a default highlight color, but you may choose and set any other color. 59 | 60 | ```toml 61 | [Params.style.vars] 62 | highlightColor = "#e22d30" 63 | ``` 64 | 65 | ### Post meta 66 | 67 | Post meta is a feature that refers to including additional meta information (such as author name, categories, date, 68 | translations, etc.) on pages. It can be enabled via config using the `post_meta` key with a list of meta field names as 69 | value. Order matters here: rearrange fields if you want to. 70 | 71 | ```toml 72 | [Params] 73 | post_meta = ["author", "date", "categories", "translations"] 74 | ``` 75 | 76 | Full list of available default post meta fields: 77 | 78 | * `author`, `categories`, `date`, `translations` 79 | 80 | In addition to the default meta fields, you can add your own by placing a custom partial under 81 | `layouts/partials/post_meta/.html`. 82 | 83 | #### Post meta: `date` localization 84 | 85 | With [Hugo v0.87.0](https://gohugo.io/news/0.87.0-relnotes/) (or later), `date` meta field shows localized dates (with 86 | weekdays and months in the current language) by default. In most cases, such a transition is painless, but owners of 87 | multilingual sites should be careful and check that everything translates as expected after the upgrade. 88 | 89 | You can also use a predefined layout, like `:date_full`, and it will output localized dates or times. For additional 90 | information about localized dates and possible date/time formatting layouts, please see 91 | [Hugo: time.Format](https://gohugo.io/functions/dateformat/). 92 | 93 | ### Thumbnail visibility 94 | 95 | By default, a thumbnail image has shown for a list and single pages simultaneously. In some cases, you may want to show 96 | a thumbnail for list-like pages only and hide it on single pages (or vice versa). Control global thumbnail visibility 97 | via config, use the key `visibility` with combination of valid values `"list"` and `"post"`. 98 | 99 | ```toml 100 | [Params.thumbnail] 101 | # Show thumbnail only for list items 102 | visibility = ["list"] 103 | ``` 104 | 105 | Besides global configuration, you can change thumbnail visibility individually with extended thumbnail notation via 106 | front matter block. 107 | 108 | ```yaml 109 | thumbnail: 110 | src: "img/placeholder.png" 111 | visibility: 112 | - list 113 | - post 114 | ``` 115 | 116 | This page is an example of list-only thumbnail visibility. 117 | 118 | ### Sidebar 119 | 120 | **Mainroad** comes with a configurable sidebar that can be on the left, on the right, or disabled. The default layout 121 | can be specified in the `[Params.sidebar]` section of the configuration. The position can be specified for home, list 122 | and single pages individually. Use the keys `home`, `list` and `single` with values `"left"`, `"right"` or `false`. 123 | 124 | ```toml 125 | [Params.sidebar] 126 | home = "right" 127 | list = "right" 128 | single = "right" 129 | ``` 130 | 131 | The layout can be configured per page, by setting the `sidebar` parameter with one of the same values (`"left"`, 132 | `"right"` or `false`) in the page's front matter. 133 | 134 | ```yaml 135 | sidebar: "left" # Enable sidebar (on the left side) per page 136 | ``` 137 | 138 | The sidebar consists of multiple widgets. Widgets can be enabled individually using the `widgets` key with a list of 139 | widget names as value. You can add your own widgets, by placing a template under `layouts/partials/widgets/.html`. 140 | 141 | ```toml 142 | [Params.sidebar] 143 | # Enable widgets in given order 144 | widgets = ["search", "recent", "categories", "taglist", "social", "languages"] 145 | ``` 146 | 147 | The list of widgets can be overwritten from a page's front matter. 148 | 149 | ```yaml 150 | # Enable sidebar widgets in given order 151 | widgets: 152 | - "search" 153 | - "recent" 154 | - "taglist" 155 | ``` 156 | 157 | Full list of available default widgets: 158 | 159 | * `search`, `ddg-search`, `recent`, `categories`, `taglist`, `social`, `languages` 160 | 161 | **Note**: DuckDuckGo widget (`ddg-search`) deprecated in favor of `search` widget. 162 | 163 | --- 164 | 165 | Some of our widgets respect optional configuration. Have a look at the `[Params.widgets]` and `[Params.widgets.social]` 166 | sections in the example below. 167 | 168 | ```toml 169 | [Params.widgets] 170 | recent_num = 5 # Set the number of articles in the "Recent articles" widget 171 | categories_counter = false # Enable counter for each category in "Categories" widget 172 | tags_counter = false # Enable counter for each tag in "Tags" widget 173 | ``` 174 | 175 | ```toml 176 | [Params.widgets.social] 177 | # Enable parts of social widget 178 | facebook = "username" 179 | twitter = "username" 180 | instagram = "username" 181 | linkedin = "username" 182 | telegram = "username" 183 | github = "username" 184 | gitlab = "username" 185 | bitbucket = "username" 186 | email = "example@example.com" 187 | ``` 188 | 189 | ### Widget caching 190 | 191 | Sidebar strongly affects overall build time, especially if you are using all of our widgets or even more. Widget caching 192 | can significantly improve the generation time. Cached partials remain the same for all affected pages and are not 193 | generated multiple times by Hugo. All built-in widgets (`search`, `recent`, `categories`, `taglist`, `social`, 194 | `languages`) support caching. 195 | 196 | Add `cached = true` inside the corresponding widget's dictionary table to activate caching. For example, to cache the 197 | `recent` widget: 198 | 199 | ```toml 200 | [Params.widgets.recent] 201 | cached = true 202 | ``` 203 | 204 | The following sample configuration extract shows how to cache all standard widgets and generate your website faster: 205 | 206 | ```toml 207 | [Params.widgets.search] 208 | cached = true 209 | 210 | [Params.widgets.recent] 211 | cached = true 212 | 213 | [Params.widgets.categories] 214 | cached = true 215 | 216 | [Params.widgets.taglist] 217 | cached = true 218 | 219 | [Params.widgets.social] 220 | cached = true 221 | 222 | [Params.widgets.languages] 223 | cached = true 224 | ``` 225 | 226 | Not all widgets are cacheable. If a widget contains (can contain) different data for different pages (e.g., for TOC 227 | generation), then it should not be cached. Always check that your modified/customized widget is cached correctly. 228 | 229 | ### Social Widget: custom links 230 | 231 | **Mainroad** contains built-in social links in the social widget. In addition to default social links, you may set 232 | custom links by adding `Params.widgets.social.custom` to your `config.toml`. Here is an example: 233 | 234 | ```toml 235 | [[Params.widgets.social.custom]] 236 | title = "My Home Page" 237 | url = "https://example.com" 238 | ``` 239 | 240 | If you want to display an icon of your social link, you need to put SVG icon file in `layouts/partials` directory under 241 | your site's root. The `icon` key filed, which is optional, should be a path relative to `layouts/partials`. 242 | 243 | ```toml 244 | [[Params.widgets.social.custom]] 245 | title = "Youtube" 246 | url = "https://youtube.com/user/username" 247 | icon = "youtube.svg" 248 | ``` 249 | 250 | **Note:** *Only* SVG files are supported to be used as custom social icons. If you use any other files, PNG for example, 251 | a compile error will be raised by Hugo. Moreover, not every SVG icon can be used. For better results, it should be 252 | one-color SVG file with a special class attribute `{{ with .class }}{{ . }} {{ end }}` and 24x24 size. At a minimum, 253 | custom SVG icon needs these attributes: 254 | 255 | ```html 256 | ... 257 | ``` 258 | 259 | You can also specify the `rel` attribute for the link. By default, the attribute value is `"noopener noreferrer"`. You can remove the attribute completely by setting its value to `false`. 260 | 261 | ```toml 262 | [[Params.widgets.social.custom]] 263 | title = "My Home Page" 264 | url = "https://example.com" 265 | rel = "me" 266 | 267 | [[Params.widgets.social.custom]] 268 | title = "Youtube" 269 | url = "https://youtube.com/user/username" 270 | rel = false 271 | ``` 272 | 273 | ### Search box widget 274 | 275 | The search box widget can refer to the results of Google, Bing, and DuckDuckGo searches. By default, Mainroad uses 276 | Google search if no additional configuration options are specified. 277 | 278 | To use a different search engine, first of all, check that the search widget is enabled. Then set the search parameters 279 | (`Site.Params.widgets.search` section) according to the data below. 280 | 281 | **Google (default)**: 282 | 283 | ```toml 284 | [Params.widgets.search] 285 | url = "https://google.com/search" 286 | [Params.widgets.search.input] 287 | name = "sitesearch" 288 | pre = "" 289 | ``` 290 | 291 | **DuckDuckGo**: 292 | 293 | ```toml 294 | [Params.widgets.search] 295 | url = "https://duckduckgo.com/" 296 | [Params.widgets.search.input] 297 | name = "sites" 298 | pre = "" 299 | ``` 300 | 301 | **Bing**: 302 | 303 | ```toml 304 | [Params.widgets.search] 305 | url = "https://www.bing.com/search" 306 | [Params.widgets.search.input] 307 | name = "q1" 308 | pre = "site:" 309 | ``` 310 | 311 | **Google PSE**: 312 | 313 | ```toml 314 | [Params.widgets.search] 315 | url = "/search/" 316 | [Params.widgets.search.input] 317 | name = false 318 | pre = "" 319 | ``` 320 | 321 | Note that Google PSE requires additional steps to work correctly. 322 | See [Creating a Programmable Search Engine](https://developers.google.com/custom-search/docs/tutorial/creatingcse) and 323 | especially our [FAQ]({{< relref "/docs/faq.md" >}} "Mainroad FAQ") for more instructions. 324 | 325 | ### Menus 326 | 327 | **Mainroad** supports multiple menus. The `main` menu is fully responsive and displayed right under the site header. The 328 | secondary menus `side` and `footer` are displayed in a sidebar widget and the page footer respectively. To add a page to 329 | a menu, add a `menu: ` parameter to the page's front matter: 330 | 331 | ```yaml 332 | menu: main # Add page to a main menu 333 | ``` 334 | 335 | **Note:** Don't forget to enable the `sidemenu` widget in the `widgets` configuration param if you want to use the 336 | `side` menu. 337 | 338 | --- 339 | 340 | You can also add a page to multiple menus by providing a list: 341 | 342 | ```yaml 343 | # Add page to a main, side, and footer menu 344 | menu: 345 | - main 346 | - side 347 | - footer 348 | ``` 349 | 350 | **Note:** Please keep in mind that Mainroad menus don't support nested items i.e. submenus. 351 | 352 | See [Menus](https://gohugo.io/content-management/menus/#readout) from official Hugo documentation for more info. 353 | 354 | ### Custom Google Fonts support 355 | 356 | Mainroad uses Open Sans from Google Fonts as a main font. But you can use any other font from Google Fonts if you'd 357 | like. Beware, in most cases, such changes require manual CSS adjustment because every set of fonts is different and 358 | might not look as good as our default font. 359 | 360 | Follow the procedure below. 361 | 362 | 1. Open Google Fonts, choose font(s) that you prefer and copy href font link. For this particular example, we choose 363 | [Roboto with 3 different styles](https://fonts.google.com/share?selection.family=Roboto:ital,wght@0,400;0,700;1,400;1,700). 364 | Our href font link: 365 | 366 | ``` 367 | https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap 368 | ``` 369 | 370 | 1. Set `googleFontsLink` site's config param value to your href font link. For example: 371 | 372 | ```toml 373 | [Params] 374 | googleFontsLink = "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" 375 | ``` 376 | 377 | 1. Override default font-family set(s): 378 | 379 | ```toml 380 | [Params.style.vars] 381 | fontFamilyPrimary = "'Roboto', sans-serif" 382 | ``` 383 | 384 | --- 385 | 386 | It is possible to disable Google Fonts and use system font stack instead. 387 | 388 | 1. Disable Google Fonts include. Set `googleFontsLink` site's config param value to `false`: 389 | 390 | ```toml 391 | [Params] 392 | googleFontsLink = false 393 | ``` 394 | 395 | 1. Override font-family sets: 396 | 397 | ```toml 398 | [Params.style.vars] 399 | # Override font-family sets. Take care of different quotes OR escaping symbols in these params if necessary 400 | fontFamilyPrimary = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'" 401 | # Secondary font-family set responsible for pre, code, kbd, and samp tags font 402 | fontFamilySecondary = "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" 403 | ``` 404 | 405 | [Edit this page on GitHub](https://github.com/vimux/mainroad/blob/master/exampleSite/content/docs/customization.md) 406 | -------------------------------------------------------------------------------- /exampleSite/content/docs/faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Frequently asked questions (FAQ) 3 | description: Browse this FAQ page to find answers to frequently asked questions that have not been covered elsewhere in 4 | the documentation. 5 | date: 2022-01-24T14:00:00.000Z 6 | authorbox: false 7 | sidebar: false 8 | pager: false 9 | weight: 3 10 | menu: 11 | main: 12 | name: FAQ 13 | --- 14 | 15 | Browse this FAQ page to find answers to frequently asked questions that have not been covered elsewhere 16 | in the documentation. 17 | 18 | 19 | 20 | The answers have been categorized into two groups: 21 | 22 | 1. Answers to general questions without any lines of code. 23 | 2. Answers to technical questions with code snippets, step-by-step instructions, etc. 24 | 25 | ## General questions 26 | 27 | ### Do I need to have prior experience before proceeding with the Mainroad theme? 28 | 29 | **Yes.** You'll need to be familiar with Hugo before proceeding. 30 | [Our docs section]({{< ref "/docs/_index.md" >}} "Mainroad theme documentation") is intended for intermediate to 31 | advanced users and developers. Our documentation may still be helpful to users with minimal experience, but are not 32 | comprehensive. 33 | 34 | ### Do I need to use the extended version of Hugo? 35 | 36 | **No.** Mainroad theme intentionally does not use any features of the extended version. As such, the extended version of 37 | Hugo is not required (but applicable). 38 | 39 | ### Is there a list of all possible configuration options? 40 | 41 | **Configuration:** 42 | 43 | * See [All Configuration Settings](https://gohugo.io/getting-started/configuration/#all-configuration-settings) 44 | for the full list of Hugo-defined variables with their default values. 45 | * See [Mainroad config.toml example](https://github.com/Vimux/Mainroad#configtoml-example) for the full list of 46 | Mainroad-specific variables. 47 | 48 | **Front Matter:** 49 | 50 | * See [Front Matter Variables](https://gohugo.io/content-management/front-matter#front-matter-variables) for the 51 | list of Hugo-defined Front Matter variables. 52 | * See [Mainroad Front Matter example](https://github.com/Vimux/Mainroad#front-matter-example) for the list of 53 | Mainroad-specific Front Matter variables. 54 | 55 | ### What if I have more questions? Should I create an issue? 56 | 57 | **We don't provide personal technical support.** As stated in our 58 | [contributing guidelines](https://github.com/Vimux/Mainroad/blob/master/CONTRIBUTING.md), please do not use the issue 59 | tracker for personal support. This includes reports like: “How do I do this", “Everything is broken; help me”, “I 60 | changed something, and it doesn't work anymore”, “It's not a personal issue, but I just want to ask how X or Y works”, 61 | “I forked your theme, then something broke; fix this immediately”, and so on. 62 | 63 | **The issue tracker should only be used for bug reports, feature requests, and discussions that comply with our 64 | contributing rules**. All other issues will be closed and marked as invalid. 65 | 66 | ## Technical questions 67 | 68 | ### I want to get the `favicon.ico` and `apple-touch-icon.png` to match my `hightlightColor`. What should I do? 69 | 70 | There is no way to do this on the fly with Hugo, but you can use the one-liners below with some preparations: 71 | 72 | 1. Copy: 73 | * `./themes/mainroad/static/favicon.ico` to `./static/favicon.ico` 74 | * `./themes/mainroad/static/apple-touch-icon.png` to `./static/apple-touch-icon.png` 75 | 1. At the beginning of each script, replace the color in the variable with your preferred color. You must use 76 | six-digit hex triplet notation (e.g., `#E22D30`) to make it work properly. 77 | 78 | Go to the root of your project directory in the terminal and execute these two commands accordingly. 79 | 80 | ``` 81 | a=#E22D30;a=\\x${a:5:2}\\x${a:3:2}\\x${a:1:2};for i in 98 274 578;do printf $a|dd of=static/favicon.ico bs=1 seek=$i conv=notrunc;done 82 | ``` 83 | 84 | ``` 85 | a=#E22D30;a=$(echo 504C54452A2A2A${a:1:6}|sed -e 's/../\\x&/g');printf $a|gzip|tail -c8|od -tx4 -N4 -An|xargs|sed -e 's/../\\x&/g'|printf $a$(cat -)|dd of=static/apple-touch-icon.png bs=1 seek=37 conv=notrunc 86 | ``` 87 | 88 | ### I want to use Google Programmable Search Engine as a site search engine. Is it possible? 89 | 90 | **Yes, it is possible to use [Google PSE (CSE)](https://developers.google.com/custom-search/docs/overview) as a site 91 | search engine.** 92 | 93 | 1. Create a new search engine with [Google PSE](https://programmablesearchengine.google.com/about/). Google account 94 | required. 95 | 96 | 1. Add a new layout. 97 | 98 | Create file `./layouts/search/index.html` with the following content: 99 | 100 | ``` 101 | {{ define "main" }} 102 | 103 |
104 | {{ end }} 105 | ``` 106 | 107 | Don't forget to paste your Google PSE ID. 108 | 109 | 1. Add search page by creating file `./content/search.md` with the following content: 110 | 111 | ``` 112 | --- 113 | title: Search 114 | authorbox: false 115 | sidebar: false 116 | pager: false 117 | --- 118 | ``` 119 | 120 | 1. Optional. If you use the search widget, don't forget to change the search box parameters: 121 | 122 | ```toml 123 | [Params.widgets.search] 124 | url = "/search/" 125 | input.name = false 126 | input.pre = "" 127 | ``` 128 | 129 | Google PSE (CSE) should work when it's done. Look and feel will be far from perfect, but you have to solve this problem 130 | with [Google PSE Control Panel](https://programmablesearchengine.google.com/controlpanel/all) and additional CSS. 131 | 132 | [Edit this page on GitHub](https://github.com/vimux/mainroad/blob/master/exampleSite/content/docs/faq.md) 133 | -------------------------------------------------------------------------------- /exampleSite/content/docs/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started 3 | description: This article helps you get started with the Mainroad theme, including installation and minimal 4 | configuration. 5 | lead: This article helps you get started with the Mainroad theme, including installation and minimal configuration. 6 | date: 2022-01-24T14:00:00.000Z 7 | tags: 8 | - "Installation" 9 | authorbox: false 10 | sidebar: false 11 | pager: false 12 | weight: 1 13 | menu: main 14 | --- 15 | 16 | Welcome to the Mainroad theme documentation. This quick start guide covers Mainroad theme installation and minimal 17 | configuration and is intended for intermediate to advanced users. To understand this guide, you need to be familiar 18 | with the [Hugo](https://gohugo.io/) static site generator. 19 | 20 | 21 | 22 | ## Installation 23 | 24 | Before installing the **Mainroad** theme, make sure that you've 25 | [installed **Hugo** (version 0.54.0 or later)](https://gohugo.io/getting-started/quick-start/#step-1-install-hugo) and 26 | [created a new site](https://gohugo.io/getting-started/quick-start/#step-2-create-a-new-site). To learn how to install 27 | Hugo, visit [Hugo Documentation](https://gohugo.io/getting-started/installing/). 28 | 29 | There are a few ways to install a theme in Hugo. This can be done via git submodule, git clone, Hugo modules, or 30 | by downloading the archive and manually copying the files. Three installation options are described below. 31 | 32 | ### Option A: `git submodule` 33 | 34 | *Additional requirements: git* 35 | 36 | If you don't plan to make significant changes to the theme but still want to track and update it, you can add it as a 37 | [git submodule](https://git-scm.com/docs/git-submodule) by running the following command from the root directory of 38 | your Hugo site: 39 | 40 | ```sh 41 | git submodule add https://github.com/vimux/mainroad.git themes/mainroad 42 | ``` 43 | 44 | **Note:** 45 | [Netlify expects git submodule](https://docs.netlify.com/configure-builds/common-configurations/hugo/#hugo-themes) 46 | instead of git clone. 47 | 48 | ### Option B: `git clone` 49 | 50 | *Additional requirements: git* 51 | 52 | Run this [git clone](https://git-scm.com/docs/git-clone) command from the root of your Hugo site: 53 | 54 | ```sh 55 | git clone https://github.com/vimux/mainroad.git themes/mainroad 56 | ``` 57 | 58 | ### Option C: Manual install 59 | 60 | If you do not want to use git, you can manually 61 | **[download ZIP](https://github.com/vimux/mainroad/archive/master.zip)** and extract it into the `themes/mainroad` 62 | within your Hugo site. 63 | 64 | --- 65 | 66 | ### Activate theme 67 | 68 | Whichever installation option you choose, don't forget to edit `theme` param of the site configuration `config.toml`: 69 | 70 | ```toml 71 | theme = "mainroad" 72 | ``` 73 | 74 | To check it out, build the site via `hugo` command or make it available on a local server via `hugo server`. 75 | 76 | ## Minimal configuration 77 | 78 | **Do not copy the [example config](https://github.com/vimux/mainroad#configtoml-example) as-is.** 79 | Use only the parameters that you need. The Mainroad theme contains required defaults, so you don't need to add all of 80 | the configuration parameters to run the theme for the first time. Before adding any theme-specific parameters, make 81 | sure to edit the `theme` param inside the config file and check that the theme works. 82 | 83 | For information about common customization settings, see [Customization page]({{< relref "/docs/customization.md" >}} "Mainroad theme customization"). 84 | To view our example configuration, visit [demo config](https://github.com/vimux/mainroad/blob/master/exampleSite/config.toml). 85 | 86 | [Edit this page on GitHub](https://github.com/vimux/mainroad/blob/master/exampleSite/content/docs/getting-started.md) 87 | -------------------------------------------------------------------------------- /exampleSite/content/post/basic-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Basic HTML Elements 3 | description: Example test article that contains basic HTML elements for text formatting on the Web. 4 | date: 2018-04-16 5 | categories: 6 | - "Development" 7 | tags: 8 | - "HTML" 9 | - "CSS" 10 | - "Basic Elements" 11 | menu: 12 | main: 13 | name: Basic Elements 14 | weight: 4 15 | --- 16 | 17 | The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo. 18 | 19 | 20 | ## Headings 21 | 22 | Let's start with all possible headings. The HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level and `

` is the lowest. 23 | 24 | # Heading 1 25 | ## Heading 2 26 | ### Heading 3 27 | #### Heading 4 28 | ##### Heading 5 29 | ###### Heading 6 30 | 31 | *** 32 | 33 | ## Paragraph 34 | 35 | According to the [HTML5 specification](https://www.w3.org/TR/html5/dom.html#elements) by [W3C](https://www.w3.org/), **HTML documents consist of a tree of elements and text**. Each element is denoted in the source by a [start tag](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags), such as ``, and an [end tag](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags), such as ``. (*Certain start tags and end tags can in certain cases be omitted and are implied by other tags.*) 36 | 37 | Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the `a` element and its `href` attribute. 38 | 39 | ## List Types 40 | 41 | ### Ordered List 42 | 43 | 1. First item 44 | 2. Second item 45 | 3. Third item 46 | 47 | ### Unordered List 48 | 49 | * List item 50 | * Another item 51 | * And another item 52 | 53 | ### Nested list 54 | 55 |
    56 |
  • First item
    • 57 |
  • Second item 58 |
      59 |
    • Second item First subitem
      • 60 |
    • Second item second subitem 61 |
        62 |
      • Second item Second subitem First sub-subitem
        • 63 |
      • Second item Second subitem Second sub-subitem
        • 64 |
      • Second item Second subitem Third sub-subitem
        • 65 |
      66 |
      • 67 |
    • Second item Third subitem 68 |
        69 |
      1. Second item Third subitem First sub-subitem
        2. 70 |
      2. Second item Third subitem Second sub-subitem
        3. 71 |
      3. Second item Third subitem Third sub-subitem
        4. 72 |
      73 |
    74 |
    • 75 |
  • Third item
    • 76 |
77 | 78 | ### Definition List 79 | 80 | HTML also supports definition lists. 81 | 82 |
83 |
Blanco tequila
84 |
The purest form of the blue agave spirit...
85 |
Reposado tequila
86 |
Typically aged in wooden barrels for between two and eleven months...
87 |
88 | 89 | ## Blockquotes 90 | 91 | The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. 92 | 93 | > Quoted text. 94 | > This line is part of the same quote. 95 | > Also you can *put* **Markdown** into a blockquote. 96 | 97 | Blockquote with a citation. 98 | 99 |
100 |

My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.

101 |
— Steve Wozniak
102 |
103 | 104 | According to Mozilla's website, Firefox 1.0 was released in 2004 and became a big success. 105 | 106 | ## Tables 107 | 108 | Tables aren't part of the core Markdown spec, but Hugo supports them. 109 | 110 | | ID | Make | Model | Year | 111 | | --- | --------- | ------- | ---- | 112 | | 1 | Honda | Accord | 2009 | 113 | | 2 | Toyota | Camry | 2012 | 114 | | 3 | Hyundai | Elantra | 2010 | 115 | 116 | Colons can be used to align columns. 117 | 118 | | Tables | Are | Cool | 119 | |:----------- |:-------------:| ------------:| 120 | | align: left | align: center | align: right | 121 | | align: left | align: center | align: right | 122 | | align: left | align: center | align: right | 123 | 124 | You can also use inline Markdown. 125 | 126 | | Inline | Markdown | In | Table | 127 | | ---------- | --------- | ----------------- | ---------- | 128 | | *italics* | **bold** | ~~strikethrough~~ | `code` | 129 | 130 | ## Code 131 | 132 | ```html 133 | 134 | 135 | 136 | 137 | Example HTML5 Document 138 | 139 | 140 |

Test

141 | 142 | 143 | ``` 144 | 145 | {{< highlight html >}} 146 | 147 | 148 | 149 | 150 | Example HTML5 Document 151 | 152 | 153 |

Test

154 | 155 | 156 | {{< /highlight >}} 157 | 158 | ## Other stuff — abbr, sub, sup, kbd, etc. 159 | 160 | GIF is a bitmap image format. 161 | 162 | H2O 163 | 164 | C6H12O6 165 | 166 | Xn + Yn = Zn 167 | 168 | Press X to win. Or press CTRL+ALT+F to show FPS counter. 169 | 170 | As a unit of information in information theory, the bit has alternatively been called a shannon, named after Claude Shannon, the founder of field of information theory. 171 | -------------------------------------------------------------------------------- /exampleSite/content/post/getting-started-with-hugo.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting Started with Hugo 3 | date: 2014-04-02 4 | tags: 5 | - "go" 6 | - "golang" 7 | - "hugo" 8 | - "development" 9 | categories: 10 | - "Development" 11 | - "golang" 12 | --- 13 | 14 | ## Step 1. Install Hugo 15 | 16 | Go to [Hugo releases](https://github.com/spf13/hugo/releases) and download the 17 | appropriate version for your OS and architecture. 18 | 19 | Save it somewhere specific as we will be using it in the next step. 20 | 21 | More complete instructions are available at [Install Hugo](https://gohugo.io/getting-started/installing/) 22 | 23 | ## Step 2. Build the Docs 24 | 25 | Hugo has its own example site which happens to also be the documentation site 26 | you are reading right now. 27 | 28 | Follow the following steps: 29 | 30 | 1. Clone the [Hugo repository](https://github.com/spf13/hugo) 31 | 2. Go into the repo 32 | 3. Run hugo in server mode and build the docs 33 | 4. Open your browser to http://localhost:1313 34 | 35 | Corresponding pseudo commands: 36 | 37 | git clone https://github.com/spf13/hugo 38 | cd hugo 39 | /path/to/where/you/installed/hugo server --source=./docs 40 | > 29 pages created 41 | > 0 tags index created 42 | > in 27 ms 43 | > Web Server is available at http://localhost:1313 44 | > Press ctrl+c to stop 45 | 46 | Once you've gotten here, follow along the rest of this page on your local build. 47 | 48 | ## Step 3. Change the docs site 49 | 50 | Stop the Hugo process by hitting Ctrl+C. 51 | 52 | Now we are going to run hugo again, but this time with hugo in watch mode. 53 | 54 | /path/to/hugo/from/step/1/hugo server --source=./docs --watch 55 | > 29 pages created 56 | > 0 tags index created 57 | > in 27 ms 58 | > Web Server is available at http://localhost:1313 59 | > Watching for changes in /Users/spf13/Code/hugo/docs/content 60 | > Press ctrl+c to stop 61 | 62 | 63 | Open your [favorite editor](http://vim.spf13.com) and change one of the source 64 | content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*. 65 | 66 | Content files are found in `docs/content/`. Unless otherwise specified, files 67 | are located at the same relative location as the url, in our case 68 | `docs/content/overview/quickstart.md`. 69 | 70 | Change and save this file.. Notice what happened in your terminal. 71 | 72 | > Change detected, rebuilding site 73 | 74 | > 29 pages created 75 | > 0 tags index created 76 | > in 26 ms 77 | 78 | Refresh the browser and observe that the typo is now fixed. 79 | 80 | Notice how quick that was. Try to refresh the site before it's finished building. I double dare you. 81 | Having nearly instant feedback enables you to have your creativity flow without waiting for long builds. 82 | 83 | ## Step 4. Have fun 84 | 85 | The best way to learn something is to play with it. 86 | -------------------------------------------------------------------------------- /exampleSite/content/post/hugo-template-primer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "(Hu)go Template Primer" 3 | date: 2014-04-02 4 | thumbnail: "img/placeholder.png" 5 | tags: 6 | - "go" 7 | - "golang" 8 | - "templates" 9 | - "themes" 10 | - "development" 11 | categories: 12 | - "Development" 13 | - "golang" 14 | --- 15 | 16 | Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for 17 | its template engine. It is an extremely lightweight engine that provides a very 18 | small amount of logic. In our experience that it is just the right amount of 19 | logic to be able to create a good static website. If you have used other 20 | template systems from different languages or frameworks you will find a lot of 21 | similarities in Go templates. 22 | 23 | 24 | 25 | This document is a brief primer on using Go templates. The [Go docs][gohtmltemplate] 26 | provide more details. 27 | 28 | ## Introduction to Go Templates 29 | 30 | Go templates provide an extremely simple template language. It adheres to the 31 | belief that only the most basic of logic belongs in the template or view layer. 32 | One consequence of this simplicity is that Go templates parse very quickly. 33 | 34 | A unique characteristic of Go templates is they are content aware. Variables and 35 | content will be sanitized depending on the context of where they are used. More 36 | details can be found in the [Go docs][gohtmltemplate]. 37 | 38 | ## Basic Syntax 39 | 40 | Golang templates are HTML files with the addition of variables and 41 | functions. 42 | 43 | **Go variables and functions are accessible within {{ }}** 44 | 45 | Accessing a predefined variable "foo": 46 | 47 | {{ foo }} 48 | 49 | **Parameters are separated using spaces** 50 | 51 | Calling the add function with input of 1, 2: 52 | 53 | {{ add 1 2 }} 54 | 55 | **Methods and fields are accessed via dot notation** 56 | 57 | Accessing the Page Parameter "bar" 58 | 59 | {{ .Params.bar }} 60 | 61 | **Parentheses can be used to group items together** 62 | 63 | {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} 64 | 65 | 66 | ## Variables 67 | 68 | Each Go template has a struct (object) made available to it. In hugo each 69 | template is passed either a page or a node struct depending on which type of 70 | page you are rendering. More details are available on the 71 | [variables](/layout/variables) page. 72 | 73 | A variable is accessed by referencing the variable name. 74 | 75 | {{ .Title }} 76 | 77 | Variables can also be defined and referenced. 78 | 79 | {{ $address := "123 Main St."}} 80 | {{ $address }} 81 | 82 | 83 | ## Functions 84 | 85 | Go template ship with a few functions which provide basic functionality. The Go 86 | template system also provides a mechanism for applications to extend the 87 | available functions with their own. [Hugo template 88 | functions](/layout/functions) provide some additional functionality we believe 89 | are useful for building websites. Functions are called by using their name 90 | followed by the required parameters separated by spaces. Template 91 | functions cannot be added without recompiling hugo. 92 | 93 | **Example:** 94 | 95 | {{ add 1 2 }} 96 | 97 | ## Includes 98 | 99 | When including another template you will pass to it the data it will be 100 | able to access. To pass along the current context please remember to 101 | include a trailing dot. The templates location will always be starting at 102 | the /layout/ directory within Hugo. 103 | 104 | **Example:** 105 | 106 | {{ template "chrome/header.html" . }} 107 | 108 | 109 | ## Logic 110 | 111 | Go templates provide the most basic iteration and conditional logic. 112 | 113 | ### Iteration 114 | 115 | Just like in Go, the Go templates make heavy use of range to iterate over 116 | a map, array or slice. The following are different examples of how to use 117 | range. 118 | 119 | **Example 1: Using Context** 120 | 121 | {{ range array }} 122 | {{ . }} 123 | {{ end }} 124 | 125 | **Example 2: Declaring value variable name** 126 | 127 | {{range $element := array}} 128 | {{ $element }} 129 | {{ end }} 130 | 131 | **Example 2: Declaring key and value variable name** 132 | 133 | {{range $index, $element := array}} 134 | {{ $index }} 135 | {{ $element }} 136 | {{ end }} 137 | 138 | ### Conditionals 139 | 140 | If, else, with, or, & and provide the framework for handling conditional 141 | logic in Go Templates. Like range, each statement is closed with `end`. 142 | 143 | 144 | Go Templates treat the following values as false: 145 | 146 | * false 147 | * 0 148 | * any array, slice, map, or string of length zero 149 | 150 | **Example 1: If** 151 | 152 | {{ if isset .Params "title" }}

{{ index .Params "title" }}

{{ end }} 153 | 154 | **Example 2: If -> Else** 155 | 156 | {{ if isset .Params "alt" }} 157 | {{ index .Params "alt" }} 158 | {{else}} 159 | {{ index .Params "caption" }} 160 | {{ end }} 161 | 162 | **Example 3: And & Or** 163 | 164 | {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} 165 | 166 | **Example 4: With** 167 | 168 | An alternative way of writing "if" and then referencing the same value 169 | is to use "with" instead. With rebinds the context `.` within its scope, 170 | and skips the block if the variable is absent. 171 | 172 | The first example above could be simplified as: 173 | 174 | {{ with .Params.title }}

{{ . }}

{{ end }} 175 | 176 | **Example 5: If -> Else If** 177 | 178 | {{ if isset .Params "alt" }} 179 | {{ index .Params "alt" }} 180 | {{ else if isset .Params "caption" }} 181 | {{ index .Params "caption" }} 182 | {{ end }} 183 | 184 | ## Pipes 185 | 186 | One of the most powerful components of Go templates is the ability to 187 | stack actions one after another. This is done by using pipes. Borrowed 188 | from unix pipes, the concept is simple, each pipeline's output becomes the 189 | input of the following pipe. 190 | 191 | Because of the very simple syntax of Go templates, the pipe is essential 192 | to being able to chain together function calls. One limitation of the 193 | pipes is that they only can work with a single value and that value 194 | becomes the last parameter of the next pipeline. 195 | 196 | A few simple examples should help convey how to use the pipe. 197 | 198 | **Example 1 :** 199 | 200 | {{ if eq 1 1 }} Same {{ end }} 201 | 202 | is the same as 203 | 204 | {{ eq 1 1 | if }} Same {{ end }} 205 | 206 | It does look odd to place the if at the end, but it does provide a good 207 | illustration of how to use the pipes. 208 | 209 | **Example 2 :** 210 | 211 | {{ index .Params "disqus_url" | html }} 212 | 213 | Access the page parameter called "disqus_url" and escape the HTML. 214 | 215 | **Example 3 :** 216 | 217 | {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} 218 | Stuff Here 219 | {{ end }} 220 | 221 | Could be rewritten as 222 | 223 | {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }} 224 | Stuff Here 225 | {{ end }} 226 | 227 | 228 | ## Context (aka. the dot) 229 | 230 | The most easily overlooked concept to understand about Go templates is that {{ . }} 231 | always refers to the current context. In the top level of your template this 232 | will be the data set made available to it. Inside of a iteration it will have 233 | the value of the current item. When inside of a loop the context has changed. . 234 | will no longer refer to the data available to the entire page. If you need to 235 | access this from within the loop you will likely want to set it to a variable 236 | instead of depending on the context. 237 | 238 | **Example:** 239 | 240 | {{ $title := .Site.Title }} 241 | {{ range .Params.tags }} 242 |
  • {{ . }} - {{ $title }}
    • 243 | {{ end }} 244 | 245 | Notice how once we have entered the loop the value of {{ . }} has changed. We 246 | have defined a variable outside of the loop so we have access to it from within 247 | the loop. 248 | 249 | # Hugo Parameters 250 | 251 | Hugo provides the option of passing values to the template language 252 | through the site configuration (for sitewide values), or through the meta 253 | data of each specific piece of content. You can define any values of any 254 | type (supported by your front matter/config format) and use them however 255 | you want to inside of your templates. 256 | 257 | 258 | ## Using Content (page) Parameters 259 | 260 | In each piece of content you can provide variables to be used by the 261 | templates. This happens in the [front matter](/content/front-matter). 262 | 263 | An example of this is used in this documentation site. Most of the pages 264 | benefit from having the table of contents provided. Sometimes the TOC just 265 | doesn't make a lot of sense. We've defined a variable in our front matter 266 | of some pages to turn off the TOC from being displayed. 267 | 268 | Here is the example front matter: 269 | 270 | ``` 271 | --- 272 | title: "Permalinks" 273 | date: "2013-11-18" 274 | aliases: 275 | - "/doc/permalinks/" 276 | groups: ["extras"] 277 | groups_weight: 30 278 | notoc: true 279 | --- 280 | ``` 281 | 282 | Here is the corresponding code inside of the template: 283 | 284 | {{ if not .Params.notoc }} 285 |
    286 | {{ .TableOfContents }} 287 |
    288 | {{ end }} 289 | 290 | 291 | 292 | ## Using Site (config) Parameters 293 | In your top-level configuration file (eg, `config.yaml`) you can define site 294 | parameters, which are values which will be available to you in chrome. 295 | 296 | For instance, you might declare: 297 | 298 | ```yaml 299 | params: 300 | CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved." 301 | TwitterUser: "spf13" 302 | SidebarRecentLimit: 5 303 | ``` 304 | 305 | Within a footer layout, you might then declare a `