|
| 1 | +--- |
| 2 | +title: Configuration |
| 3 | +nav_order: 2 |
| 4 | +--- |
| 5 | + |
| 6 | +# Configuration |
| 7 | +{: .no_toc } |
| 8 | + |
| 9 | +Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's \_config.yml file. |
| 10 | +{: .fs-6 .fw-300 } |
| 11 | + |
| 12 | +## Table of contents |
| 13 | +{: .no_toc .text-delta } |
| 14 | + |
| 15 | +1. TOC |
| 16 | +{:toc} |
| 17 | + |
| 18 | +--- |
| 19 | + |
| 20 | +View this site's [\_config.yml](https://github.com/just-the-docs/just-the-docs/tree/main/_config.yml) file as an example. |
| 21 | + |
| 22 | +## Site logo |
| 23 | + |
| 24 | +```yaml |
| 25 | +# Set a path/url to a logo that will be displayed instead of the title |
| 26 | +logo: "/assets/images/just-the-docs.png" |
| 27 | +``` |
| 28 | +
|
| 29 | +## Site favicon |
| 30 | +
|
| 31 | +```yaml |
| 32 | +# Set a path/url to a favicon that will be displayed by the browser |
| 33 | +favicon_ico: "/assets/images/favicon.ico" |
| 34 | +``` |
| 35 | +
|
| 36 | +If the path to your favicon is `/favicon.ico`, you can leave `favicon_ico` unset. |
| 37 | + |
| 38 | +## Search |
| 39 | + |
| 40 | +```yaml |
| 41 | +# Enable or disable the site search |
| 42 | +# Supports true (default) or false |
| 43 | +search_enabled: true |
| 44 | +
|
| 45 | +search: |
| 46 | + # Split pages into sections that can be searched individually |
| 47 | + # Supports 1 - 6, default: 2 |
| 48 | + heading_level: 2 |
| 49 | + # Maximum amount of previews per search result |
| 50 | + # Default: 3 |
| 51 | + previews: 3 |
| 52 | + # Maximum amount of words to display before a matched word in the preview |
| 53 | + # Default: 5 |
| 54 | + preview_words_before: 5 |
| 55 | + # Maximum amount of words to display after a matched word in the preview |
| 56 | + # Default: 10 |
| 57 | + preview_words_after: 10 |
| 58 | + # Set the search token separator |
| 59 | + # Default: /[\s\-/]+/ |
| 60 | + # Example: enable support for hyphenated search words |
| 61 | + tokenizer_separator: /[\s/]+/ |
| 62 | + # Display the relative url in search results |
| 63 | + # Supports true (default) or false |
| 64 | + rel_url: true |
| 65 | + # Enable or disable the search button that appears in the bottom right corner of every page |
| 66 | + # Supports true or false (default) |
| 67 | + button: false |
| 68 | + # Focus the search input by pressing `ctrl + focus_shortcut_key` (or `cmd + focus_shortcut_key` on macOS) |
| 69 | + focus_shortcut_key: 'k' |
| 70 | +``` |
| 71 | +
|
| 72 | +## Mermaid Diagrams |
| 73 | +{: .d-inline-block } |
| 74 | +
|
| 75 | +New (v0.4.0) |
| 76 | +{: .label .label-green } |
| 77 | +
|
| 78 | +The minimum configuration requires the key for `version` ([from jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)) in `_config.yml`: |
| 79 | + |
| 80 | +```yaml |
| 81 | +mermaid: |
| 82 | + # Version of mermaid library |
| 83 | + # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/ |
| 84 | + version: "9.1.3" |
| 85 | +``` |
| 86 | + |
| 87 | +Provide a `path` instead of a `version` key to load the mermaid library from a local file. |
| 88 | + |
| 89 | +See [the Code documentation]({% link docs/ui-components/code/index.md %}#mermaid-diagram-code-blocks) for more configuration options and information. |
| 90 | + |
| 91 | +## Aux links |
| 92 | + |
| 93 | +```yaml |
| 94 | +# Aux links for the upper right navigation |
| 95 | +aux_links: |
| 96 | + "Just the Docs on GitHub": |
| 97 | + - "//github.com/just-the-docs/just-the-docs" |
| 98 | +
|
| 99 | +# Makes Aux links open in a new tab. Default is false |
| 100 | +aux_links_new_tab: false |
| 101 | +``` |
| 102 | + |
| 103 | +## Navigation sidebar |
| 104 | + |
| 105 | +```yaml |
| 106 | +# Enable or disable the side/mobile menu globally |
| 107 | +# Nav menu can also be selectively enabled or disabled using page variables or the minimal layout |
| 108 | +nav_enabled: true |
| 109 | +``` |
| 110 | + |
| 111 | +## Heading anchor links |
| 112 | + |
| 113 | +```yaml |
| 114 | +# Heading anchor links appear on hover over h1-h6 tags in page content |
| 115 | +# allowing users to deep link to a particular heading on a page. |
| 116 | +# |
| 117 | +# Supports true (default) or false |
| 118 | +heading_anchors: true |
| 119 | +``` |
| 120 | + |
| 121 | +## External navigation links |
| 122 | +{: .d-inline-block } |
| 123 | + |
| 124 | +New (v0.4.0) |
| 125 | +{: .label .label-green } |
| 126 | + |
| 127 | +External links can be added to the navigation through the `nav_external_links` option. |
| 128 | +See [Navigation Structure]({% link docs/navigation/main/external.md %}) for more details. |
| 129 | + |
| 130 | +## Footer content |
| 131 | + |
| 132 | +```yaml |
| 133 | +# Footer content |
| 134 | +# appears at the bottom of every page's main content |
| 135 | +# Note: The footer_content option is deprecated and will be removed in a future major release. Please use `_includes/footer_custom.html` for more robust |
| 136 | +markup / liquid-based content. |
| 137 | +footer_content: "Copyright © 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/just-the-docs/just-the-docs/tree/main/LICENSE.txt\">MIT license.</a>" |
| 138 | + |
| 139 | +# Footer last edited timestamp |
| 140 | +last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter |
| 141 | +last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html |
| 142 | + |
| 143 | +# Footer "Edit this page on GitHub" link text |
| 144 | +gh_edit_link: true # show or hide edit this page link |
| 145 | +gh_edit_link_text: "Edit this page on GitHub." |
| 146 | +gh_edit_repository: "https://github.com/just-the-docs/just-the-docs" # the github URL for your repo |
| 147 | +gh_edit_branch: "main" # the branch that your docs is served from |
| 148 | +# gh_edit_source: docs # the source that your files originate from |
| 149 | +gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately |
| 150 | +``` |
| 151 | +
|
| 152 | +_note: `footer_content` is deprecated, but still supported. For a better experience we have moved this into an include called `_includes/footer_custom.html` which will allow for robust markup / liquid-based content._ |
| 153 | + |
| 154 | +- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format |
| 155 | +- `last_edit_time_format` uses Ruby's DateTime formatter; for examples and information, please refer to the [official Ruby docs on `strftime` formatting](https://docs.ruby-lang.org/en/master/strftime_formatting_rdoc.html) |
| 156 | +- `gh_edit_repository` is the URL of the project's GitHub repository |
| 157 | +- `gh_edit_branch` is the branch that the docs site is served from; defaults to `main` |
| 158 | +- `gh_edit_source` is the source directory that your project files are stored in (should be the same as [site.source](https://jekyllrb.com/docs/configuration/options/)) |
| 159 | +- `gh_edit_view_mode` is `"tree"` by default, which brings the user to the github page; switch to `"edit"` to bring the user directly into editing mode |
| 160 | + |
| 161 | +## Color scheme |
| 162 | + |
| 163 | +```yaml |
| 164 | +# Color scheme supports "light" (default) and "dark" |
| 165 | +color_scheme: dark |
| 166 | +``` |
| 167 | + |
| 168 | +<button class="btn js-toggle-dark-mode">Preview dark color scheme</button> |
| 169 | + |
| 170 | +<script> |
| 171 | +const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); |
| 172 | + |
| 173 | +jtd.addEvent(toggleDarkMode, 'click', function(){ |
| 174 | + if (jtd.getTheme() === 'dark') { |
| 175 | + jtd.setTheme('light'); |
| 176 | + toggleDarkMode.textContent = 'Preview dark color scheme'; |
| 177 | + } else { |
| 178 | + jtd.setTheme('dark'); |
| 179 | + toggleDarkMode.textContent = 'Return to the light side'; |
| 180 | + } |
| 181 | +}); |
| 182 | +</script> |
| 183 | + |
| 184 | +See [Customization]({% link docs/customization.md %}) for more information. |
| 185 | + |
| 186 | +## Callouts |
| 187 | +{: .d-inline-block } |
| 188 | + |
| 189 | +New (v0.4.0) |
| 190 | +{: .label .label-green } |
| 191 | + |
| 192 | +To use this feature, you need to configure a `color` and (optionally) `title` for each kind of callout you want to use, e.g.: |
| 193 | + |
| 194 | +```yaml |
| 195 | +callouts: |
| 196 | + warning: |
| 197 | + title: Warning |
| 198 | + color: red |
| 199 | +``` |
| 200 | + |
| 201 | +This uses the color `$red-000` for the background of the callout, and `$red-300` for the title and box decoration.[^dark] You can then style a paragraph as a `warning` callout like this: |
| 202 | + |
| 203 | +```markdown |
| 204 | +{: .warning } |
| 205 | +A paragraph... |
| 206 | +``` |
| 207 | + |
| 208 | +[^dark]: |
| 209 | + If you use the `dark` color scheme, this callout uses `$red-300` for the background, and `$red-000` for the title. |
| 210 | + |
| 211 | +The colors `grey-lt`, `grey-dk`, `purple`, `blue`, `green`, `yellow`, and `red` are predefined; to use a custom color, you need to define its `000` and `300` levels in your SCSS files. For example, to use `pink`, add the following to your `_sass/custom/setup.scss` file: |
| 212 | + |
| 213 | +```scss |
| 214 | +$pink-000: #f77ef1; |
| 215 | +$pink-100: #f967f1; |
| 216 | +$pink-200: #e94ee1; |
| 217 | +$pink-300: #dd2cd4; |
| 218 | +``` |
| 219 | + |
| 220 | +You can override the default `opacity` of the background for a particular callout, e.g.: |
| 221 | + |
| 222 | +```yaml |
| 223 | +callouts: |
| 224 | + custom: |
| 225 | + color: pink |
| 226 | + opacity: 0.3 |
| 227 | +``` |
| 228 | + |
| 229 | +You can change the default opacity (`0.2`) for all callouts, e.g.: |
| 230 | + |
| 231 | +```yaml |
| 232 | +callouts_opacity: 0.3 |
| 233 | +``` |
| 234 | + |
| 235 | +You can also adjust the overall level of callouts. |
| 236 | +The value of `callouts_level` is either `quiet` or `loud`; |
| 237 | +`loud` increases the saturation and lightness of the backgrounds. |
| 238 | +The default level is `quiet` when using the `light` or custom color schemes, |
| 239 | +and `loud` when using the `dark color scheme.` |
| 240 | + |
| 241 | +See [Callouts]({% link docs/ui-components/callouts.md %}) for more information. |
| 242 | + |
| 243 | +## Google Analytics |
| 244 | + |
| 245 | +{: .warning } |
| 246 | +> [Google Analytics 4 will replace Universal Analytics](https://support.google.com/analytics/answer/11583528). On **July 1, 2023**, standard Universal Analytics properties will stop processing new hits. The earlier you migrate, the more historical data and insights you will have in Google Analytics 4. |
| 247 | + |
| 248 | +Universal Analytics (UA) and Google Analytics 4 (GA4) properties are supported. |
| 249 | + |
| 250 | +```yaml |
| 251 | +# Google Analytics Tracking (optional) |
| 252 | +# Supports a CSV of tracking ID strings (eg. "UA-1234567-89,G-1AB234CDE5") |
| 253 | +ga_tracking: UA-2709176-10 |
| 254 | +ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true/nil by default) |
| 255 | +``` |
| 256 | + |
| 257 | +### Multiple IDs |
| 258 | +{: .d-inline-block .no_toc } |
| 259 | + |
| 260 | +New (v0.4.0) |
| 261 | +{: .label .label-green } |
| 262 | + |
| 263 | +This theme supports multiple comma-separated tracking IDs. This helps seamlessly transition UA properties to GA4 properties by tracking both for a while. |
| 264 | + |
| 265 | +```yaml |
| 266 | +ga_tracking: "UA-1234567-89,G-1AB234CDE5" |
| 267 | +``` |
| 268 | + |
| 269 | +## Document collections |
| 270 | + |
| 271 | +By default, the navigation and search include normal [pages](https://jekyllrb.com/docs/pages/). |
| 272 | +You can also use [Jekyll collections](https://jekyllrb.com/docs/collections/) which group documents semantically together. |
| 273 | + |
| 274 | +{: .warning } |
| 275 | +> Collection folders always start with an underscore (`_`), e.g. `_tests`. You won't see your collections if you omit the prefix. |
| 276 | + |
| 277 | +For example, put all your test files in the `_tests` folder and create the `tests` collection: |
| 278 | + |
| 279 | +```yaml |
| 280 | +# Define Jekyll collections |
| 281 | +collections: |
| 282 | + # Define a collection named "tests", its documents reside in the "_tests" directory |
| 283 | + tests: |
| 284 | + permalink: "/:collection/:path/" |
| 285 | + output: true |
| 286 | +
|
| 287 | +just_the_docs: |
| 288 | + # Define which collections are used in just-the-docs |
| 289 | + collections: |
| 290 | + # Reference the "tests" collection |
| 291 | + tests: |
| 292 | + # Give the collection a name |
| 293 | + name: Tests |
| 294 | + # Exclude the collection from the navigation |
| 295 | + # Supports true or false (default) |
| 296 | + # nav_exclude: true |
| 297 | + # Fold the collection in the navigation |
| 298 | + # Supports true or false (default) |
| 299 | + # nav_fold: true # note: this option is new in v0.4 |
| 300 | + # Exclude the collection from the search |
| 301 | + # Supports true or false (default) |
| 302 | + # search_exclude: true |
| 303 | +``` |
| 304 | + |
| 305 | +The navigation for all your normal pages (if any) is displayed before those in collections. |
| 306 | + |
| 307 | +<span>New (v0.4.0)</span>{: .label .label-green } |
| 308 | +Including `nav_fold: true` in a collection configuration *folds* that collection: |
| 309 | +an expander symbol appears next to the collection name, |
| 310 | +and clicking it displays/hides the links to the top-level pages of the collection.[^js-disabled] |
| 311 | + |
| 312 | +[^js-disabled]: <span>New (v0.6.0)</span>{: .label .label-green } |
| 313 | + When JavaScript is disabled in the browser, all folded collections are automatically expanded, |
| 314 | + since clicking expander symbols has no effect. |
| 315 | + (In previous releases, navigation into folded collections required JavaScript to be enabled.) |
| 316 | + |
| 317 | +You can reference multiple collections. |
| 318 | +This creates categories in the navigation with the configured names. |
| 319 | + |
| 320 | +```yaml |
| 321 | +collections: |
| 322 | + tests: |
| 323 | + permalink: "/:collection/:path/" |
| 324 | + output: true |
| 325 | + tutorials: |
| 326 | + permalink: "/:collection/:path/" |
| 327 | + output: true |
| 328 | +
|
| 329 | +just_the_docs: |
| 330 | + collections: |
| 331 | + tests: |
| 332 | + name: Tests |
| 333 | + tutorials: |
| 334 | + name: Tutorials |
| 335 | +``` |
| 336 | + |
| 337 | +When *all* your pages are in a single collection, its name is not displayed. |
| 338 | + |
| 339 | +The navigation for each collection is a separate name space for page titles: a page in one collection cannot be a child of a page in a different collection, or of a normal page. |
0 commit comments