mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 05:13:33 -06:00
Merge branch 'v0.2.9' into aux-links-new-tab
This commit is contained in:
@@ -38,7 +38,6 @@ search_enabled: true
|
||||
|
||||
# Enable support for hyphenated search words:
|
||||
search_tokenizer_separator: /[\s/]+/
|
||||
|
||||
```
|
||||
|
||||
## Aux links
|
||||
@@ -59,26 +58,56 @@ aux_links_new_tab: false
|
||||
# Heading anchor links appear on hover over h1-h6 tags in page content
|
||||
# allowing users to deep link to a particular heading on a page.
|
||||
#
|
||||
# Supports true (default) or false/nil
|
||||
# Supports true (default) or false
|
||||
heading_anchors: true
|
||||
```
|
||||
|
||||
## Footer content
|
||||
|
||||
```yaml
|
||||
# Footer content appears at the bottom of every page's main content
|
||||
# Footer content
|
||||
# appears at the bottom of every page's main content
|
||||
footer_content: "Copyright © 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
|
||||
|
||||
# Footer last edited timestamp
|
||||
last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
|
||||
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
|
||||
|
||||
# Footer "Edit this page on GitHub" link text
|
||||
gh_edit_link: true # show or hide edit this page link
|
||||
gh_edit_link_text: "Edit this page on GitHub."
|
||||
gh_edit_repository: "https://github.com/pmarsceill/just-the-docs" # the github URL for your repo
|
||||
gh_edit_branch: "master" # the branch that your docs is served from
|
||||
gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
|
||||
```
|
||||
|
||||
- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format
|
||||
- `last_edit_time_format` uses Ruby's DateTime formatter; see examples and more information [at this link.](https://apidock.com/ruby/DateTime/strftime)
|
||||
- `gh_edit_repository` is the URL of the project's GitHub repository
|
||||
- `gh_edit_branch` is the branch that the docs site is served from; defaults to `master`
|
||||
- `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
|
||||
|
||||
## Color scheme
|
||||
|
||||
```yaml
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
color_scheme: "dark"
|
||||
# Color scheme supports "light" (default) and "dark"
|
||||
color_scheme: dark
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
|
||||
<script>
|
||||
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
|
||||
|
||||
jtd.addEvent(toggleDarkMode, 'click', function(){
|
||||
if (jtd.getTheme() === 'dark') {
|
||||
jtd.setTheme('light');
|
||||
toggleDarkMode.textContent = 'Preview dark color scheme';
|
||||
} else {
|
||||
jtd.setTheme('dark');
|
||||
toggleDarkMode.textContent = 'Return to the light side';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
|
||||
|
||||
@@ -88,4 +117,5 @@ See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more
|
||||
# Google Analytics Tracking (optional)
|
||||
# e.g, UA-1234567-89
|
||||
ga_tracking: UA-5555555-55
|
||||
ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true by default)
|
||||
```
|
||||
|
@@ -29,37 +29,77 @@ To enable a color scheme, set the `color_scheme` parameter in your site's `_conf
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
color_scheme: "dark"
|
||||
# Color scheme supports "light" (default) and "dark"
|
||||
color_scheme: dark
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
|
||||
<script>
|
||||
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
|
||||
|
||||
## Specific visual customization
|
||||
jtd.addEvent(toggleDarkMode, 'click', function(){
|
||||
if (jtd.getTheme() === 'dark') {
|
||||
jtd.setTheme('light');
|
||||
toggleDarkMode.textContent = 'Preview dark color scheme';
|
||||
} else {
|
||||
jtd.setTheme('dark');
|
||||
toggleDarkMode.textContent = 'Return to the light side';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value.
|
||||
## Custom schemes
|
||||
|
||||
For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing.
|
||||
### Define a custom scheme
|
||||
|
||||
You can add custom schemes.
|
||||
If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name)
|
||||
where you override theme variables to change colors, fonts, spacing, etc.
|
||||
|
||||
Available variables are listed in the [_variables.scss](https://github.com/pmarsceill/just-the-docs/tree/master/_sass/support/_variables.scss) file.
|
||||
|
||||
For example, to change the link color from the purple default to blue, include the following inside your scheme file:
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```scss
|
||||
// ...
|
||||
//
|
||||
// $body-text-color: $grey-dk-100;
|
||||
// $body-heading-color: $grey-dk-300;
|
||||
$link-color: $blue-000;
|
||||
//
|
||||
// ...
|
||||
```
|
||||
|
||||
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
|
||||
Please use scheme files.
|
||||
|
||||
## Override styles
|
||||
### Use a custom scheme
|
||||
|
||||
For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit `_sass/overrides.scss`. This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
|
||||
To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file:
|
||||
```yaml
|
||||
color_scheme: foo
|
||||
```
|
||||
|
||||
### Switchable custom scheme
|
||||
|
||||
If you want to be able to change the scheme dynamically, for example via javascript, just add a file `assets/css/just-the-docs-foo.scss` (replace `foo` by your scheme name)
|
||||
with the following content:`
|
||||
|
||||
{% raw %}
|
||||
---
|
||||
---
|
||||
{% include css/just-the-docs.scss.liquid color_scheme="foo" %}
|
||||
{% endraw %}
|
||||
|
||||
This allows you to switch the scheme via the following javascript.
|
||||
|
||||
```js
|
||||
jtd.setTheme('foo');
|
||||
```
|
||||
|
||||
## Override and completely custom styles
|
||||
|
||||
For styles that aren't defined as variables, you may want to modify specific CSS classes.
|
||||
Additionally, you may want to add completely custom CSS specific to your content.
|
||||
To do this, put your styles in the file `_sass/custom/custom.scss`.
|
||||
This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
|
||||
|
||||
For example, if you'd like to add your own styles for printing a page, you could add the following styles.
|
||||
|
||||
|
@@ -38,6 +38,12 @@ nav_order: 4
|
||||
---
|
||||
```
|
||||
|
||||
The specified `nav_order` parameters on a site should be all integers or all strings.
|
||||
Pages without a `nav_order` parameter are ordered alphabetically by their `title`,
|
||||
and appear after the explicitly-ordered pages at each level.
|
||||
To sort all Capital letters before lowercase letters,
|
||||
add `nav_sort: case_sensitive` in the configuration file.
|
||||
|
||||
---
|
||||
|
||||
## Excluding pages
|
||||
|
@@ -2,7 +2,6 @@
|
||||
layout: default
|
||||
title: Color
|
||||
parent: Utilities
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Color Utilities
|
||||
|
@@ -2,7 +2,6 @@
|
||||
layout: default
|
||||
title: Layout
|
||||
parent: Utilities
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Layout Utilities
|
||||
|
@@ -2,7 +2,6 @@
|
||||
layout: default
|
||||
title: Responsive Modifiers
|
||||
parent: Utilities
|
||||
nav_order: 1
|
||||
---
|
||||
|
||||
# Responsive modifiers
|
||||
|
@@ -2,7 +2,6 @@
|
||||
layout: default
|
||||
title: Typography
|
||||
parent: Utilities
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Typography Utilities
|
||||
|
Reference in New Issue
Block a user