mirror of https://github.com/thangisme/notes.git
Initial Draft
This commit is contained in:
Quang Thang
parent
e842498637
commit
20213e4da7
|
|
@ -13,10 +13,10 @@
|
|||
# you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
|
||||
# You can create any custom variable you would like, and they will be accessible
|
||||
# in the templates via {{ site.myvariable }}.
|
||||
title: Just the Docs
|
||||
title: Quang Thắng
|
||||
description: A Jekyll theme for documentation
|
||||
baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
|
||||
url: "https://pmarsceill.github.io" # the base hostname & protocol for your site, e.g. http://example.com
|
||||
baseurl: "" # the subpath of your site, e.g. /blog
|
||||
url: "" # the base hostname & protocol for your site, e.g. http://example.com
|
||||
|
||||
permalink: pretty
|
||||
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"
|
||||
|
|
|
|||
|
|
@ -1,198 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Configuration
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Configuration
|
||||
{: .no_toc }
|
||||
|
||||
|
||||
Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's _config.yml file.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
|
||||
View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
|
||||
|
||||
|
||||
## Site logo
|
||||
|
||||
```yaml
|
||||
# Set a path/url to a logo that will be displayed instead of the title
|
||||
logo: "/assets/images/just-the-docs.png"
|
||||
```
|
||||
|
||||
## Search
|
||||
|
||||
```yaml
|
||||
# Enable or disable the site search
|
||||
# Supports true (default) or false
|
||||
search_enabled: true
|
||||
|
||||
search:
|
||||
# Split pages into sections that can be searched individually
|
||||
# Supports 1 - 6, default: 2
|
||||
heading_level: 2
|
||||
# Maximum amount of previews per search result
|
||||
# Default: 3
|
||||
previews: 3
|
||||
# Maximum amount of words to display before a matched word in the preview
|
||||
# Default: 5
|
||||
preview_words_before: 5
|
||||
# Maximum amount of words to display after a matched word in the preview
|
||||
# Default: 10
|
||||
preview_words_after: 10
|
||||
# Set the search token separator
|
||||
# Default: /[\s\-/]+/
|
||||
# Example: enable support for hyphenated search words
|
||||
tokenizer_separator: /[\s/]+/
|
||||
# Display the relative url in search results
|
||||
# Supports true (default) or false
|
||||
rel_url: true
|
||||
# Enable or disable the search button that appears in the bottom right corner of every page
|
||||
# Supports true or false (default)
|
||||
button: false
|
||||
```
|
||||
|
||||
## Aux links
|
||||
|
||||
```yaml
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
|
||||
# Makes Aux links open in a new tab. Default is false
|
||||
aux_links_new_tab: false
|
||||
```
|
||||
|
||||
## Heading anchor links
|
||||
|
||||
```yaml
|
||||
# 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
|
||||
heading_anchors: true
|
||||
```
|
||||
|
||||
## Footer content
|
||||
|
||||
```yaml
|
||||
# Footer content
|
||||
# appears at the bottom of every page's main content
|
||||
# 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
|
||||
markup / liquid-based content.
|
||||
footer_content: "Copyright © 2017-2020 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_source: docs # the source that your files originate from
|
||||
gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
|
||||
```
|
||||
|
||||
_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._
|
||||
|
||||
- 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_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/))
|
||||
- `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 supports "light" (default) and "dark"
|
||||
color_scheme: dark
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<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.
|
||||
|
||||
## Google Analytics
|
||||
|
||||
```yaml
|
||||
# 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)
|
||||
```
|
||||
|
||||
## Document collections
|
||||
|
||||
By default, the navigation and search include normal [pages](https://jekyllrb.com/docs/pages/).
|
||||
Instead, you can also use [Jekyll collections](https://jekyllrb.com/docs/collections/) which group documents semantically together.
|
||||
|
||||
For example, put all your documentation files in the `_docs` folder and create the `docs` collection:
|
||||
```yaml
|
||||
# Define Jekyll collections
|
||||
collections:
|
||||
# Define a collection named "docs", its documents reside in the "_docs" directory
|
||||
docs:
|
||||
permalink: "/:collection/:path/"
|
||||
output: true
|
||||
|
||||
just_the_docs:
|
||||
# Define which collections are used in just-the-docs
|
||||
collections:
|
||||
# Reference the "docs" collection
|
||||
docs:
|
||||
# Give the collection a name
|
||||
name: Documentation
|
||||
# Exclude the collection from the navigation
|
||||
# Supports true or false (default)
|
||||
nav_exclude: false
|
||||
# Exclude the collection from the search
|
||||
# Supports true or false (default)
|
||||
search_exclude: false
|
||||
```
|
||||
|
||||
You can reference multiple collections.
|
||||
This creates categories in the navigation with the configured names.
|
||||
```yaml
|
||||
collections:
|
||||
docs:
|
||||
permalink: "/:collection/:path/"
|
||||
output: true
|
||||
tutorials:
|
||||
permalink: "/:collection/:path/"
|
||||
output: true
|
||||
|
||||
just_the_docs:
|
||||
collections:
|
||||
docs:
|
||||
name: Documentation
|
||||
tutorials:
|
||||
name: Tutorials
|
||||
```
|
||||
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Customization
|
||||
nav_order: 6
|
||||
---
|
||||
|
||||
# Customization
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Color schemes
|
||||
{: .d-inline-block }
|
||||
|
||||
New
|
||||
{: .label .label-green }
|
||||
|
||||
Just the Docs supports two color schemes: light (default), and dark.
|
||||
|
||||
To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file:
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
# Color scheme supports "light" (default) and "dark"
|
||||
color_scheme: dark
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<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>
|
||||
|
||||
## Custom schemes
|
||||
|
||||
### 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
|
||||
$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.
|
||||
|
||||
### Use a custom scheme
|
||||
|
||||
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.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```scss
|
||||
// Print-only styles.
|
||||
@media print {
|
||||
.side-bar, .page-header { display: none; }
|
||||
.main-content { max-width: auto; margin: 1em;}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: default
|
||||
title: Hóa học
|
||||
has_children: true
|
||||
permalink: hoa-hoc
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Hóa học
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: default
|
||||
title: Hóa học 10
|
||||
has_children: true
|
||||
permalink: hoa-hoc/lop-10
|
||||
parent: Hóa học
|
||||
---
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Markdown kitchen sink
|
||||
nav_order: 99
|
||||
---
|
||||
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](another-page).
|
||||
|
||||
There should be whitespace between paragraphs.
|
||||
|
||||
There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
|
||||
|
||||
# [](#header-1)Header 1
|
||||
|
||||
This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
|
||||
|
||||
## [](#header-2)Header 2
|
||||
|
||||
> This is a blockquote following a header.
|
||||
>
|
||||
> When something is important enough, you do it even if the odds are not in your favor.
|
||||
|
||||
### [](#header-3)Header 3
|
||||
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
```ruby
|
||||
# Ruby code with syntax highlighting
|
||||
GitHubPages::Dependencies.gems.each do |gem, version|
|
||||
s.add_dependency(gem, "= #{version}")
|
||||
end
|
||||
```
|
||||
|
||||
#### [](#header-4)Header 4 `with code not transformed`
|
||||
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
|
||||
##### [](#header-5)Header 5
|
||||
|
||||
1. This is an ordered list following a header.
|
||||
2. This is an ordered list following a header.
|
||||
3. This is an ordered list following a header.
|
||||
|
||||
###### [](#header-6)Header 6
|
||||
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
### There's a horizontal rule below this.
|
||||
|
||||
* * *
|
||||
|
||||
### Here is an unordered list:
|
||||
|
||||
* Item foo
|
||||
* Item bar
|
||||
* Item baz
|
||||
* Item zip
|
||||
|
||||
### And an ordered list:
|
||||
|
||||
1. Item one
|
||||
1. Item two
|
||||
1. Item three
|
||||
1. Item four
|
||||
|
||||
### And a nested list:
|
||||
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 3 item
|
||||
- level 3 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
|
||||
### Nesting an ol in ul in an ol
|
||||
|
||||
- level 1 item (ul)
|
||||
1. level 2 item (ol)
|
||||
1. level 2 item (ol)
|
||||
- level 3 item (ul)
|
||||
- level 3 item (ul)
|
||||
- level 1 item (ul)
|
||||
1. level 2 item (ol)
|
||||
1. level 2 item (ol)
|
||||
- level 3 item (ul)
|
||||
- level 3 item (ul)
|
||||
1. level 4 item (ol)
|
||||
1. level 4 item (ol)
|
||||
- level 3 item (ul)
|
||||
- level 3 item (ul)
|
||||
- level 1 item (ul)
|
||||
|
||||
### And a task list
|
||||
|
||||
- [ ] Hello, this is a TODO item
|
||||
- [ ] Hello, this is another TODO item
|
||||
- [x] Goodbye, this item is done
|
||||
|
||||
### Small image
|
||||
|
||||
|
||||
|
||||
### Large image
|
||||
|
||||
|
||||
|
||||
|
||||
### Definition lists can be used with HTML syntax.
|
||||
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
|
||||
#### Multiple description terms and values
|
||||
|
||||
Term
|
||||
: Brief description of Term
|
||||
|
||||
Longer Term
|
||||
: Longer description of Term,
|
||||
possibly more than one line
|
||||
|
||||
Term
|
||||
: First description of Term,
|
||||
possibly more than one line
|
||||
|
||||
: Second description of Term,
|
||||
possibly more than one line
|
||||
|
||||
Term1
|
||||
Term2
|
||||
: Single description of Term1 and Term2,
|
||||
possibly more than one line
|
||||
|
||||
Term1
|
||||
Term2
|
||||
: First description of Term1 and Term2,
|
||||
possibly more than one line
|
||||
|
||||
: Second description of Term1 and Term2,
|
||||
possibly more than one line
|
||||
|
||||
### More code
|
||||
|
||||
```
|
||||
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||
```
|
||||
|
||||
```
|
||||
The final element.
|
||||
```
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Navigation Structure
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# Navigation Structure
|
||||
{: .no_toc }
|
||||
|
||||
<details open markdown="block">
|
||||
<summary>
|
||||
Table of contents
|
||||
</summary>
|
||||
{: .text-delta }
|
||||
1. TOC
|
||||
{:toc}
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
## Main navigation
|
||||
|
||||
The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren).
|
||||
|
||||
By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)).
|
||||
|
||||
---
|
||||
|
||||
## Ordering pages
|
||||
|
||||
To specify a page order, you can use the `nav_order` parameter in your pages' YAML front matter.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Customization
|
||||
nav_order: 4
|
||||
---
|
||||
```
|
||||
|
||||
The parameter values determine the order of the top-level pages, and of child pages with the same parent. You can reuse the same parameter values (e.g., integers starting from 1) for the child pages of different parents.
|
||||
|
||||
The parameter values can be numbers (integers, floats) and/or strings. When you omit `nav_order` parameters, they default to the titles of the pages, which are ordered alphabetically. Pages with numerical `nav_order` parameters always come before those with strings or default `nav_order` parameters. If you want to make the page order independent of the page titles, you can set explicit `nav_order` parameters on all pages.
|
||||
|
||||
By default, all Capital letters come before all lowercase letters; you can add `nav_sort: case_insensitive` in the configuration file to ignore the case. Enclosing strings in quotation marks is optional.
|
||||
|
||||
> *Note for users of previous versions:* `nav_sort: case_insensitive` previously affected the ordering of numerical `nav_order` parameters: e.g., `10` came before `2`. Also, all pages with explicit `nav_order` parameters previously came before all pages with default parameters. Both were potentially confusing, and they have now been eliminated.
|
||||
|
||||
---
|
||||
|
||||
## Excluding pages
|
||||
|
||||
For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page, use the `nav_exclude: true` parameter in the YAML front matter for that page.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: 404
|
||||
nav_exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
The `nav_exclude` parameter does not affect the [auto-generating list of child pages](#auto-generating-table-of-contents), which you can use to access pages excluded from the main navigation.
|
||||
|
||||
Pages with no `title` are automatically excluded from the navigation.
|
||||
|
||||
---
|
||||
|
||||
## Pages with children
|
||||
|
||||
Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives us an organization like:
|
||||
|
||||
```
|
||||
+-- ..
|
||||
|-- (Jekyll files)
|
||||
|
|
||||
|-- docs
|
||||
| |-- ui-components
|
||||
| | |-- index.md (parent page)
|
||||
| | |-- buttons.md
|
||||
| | |-- code.md
|
||||
| | |-- labels.md
|
||||
| | |-- tables.md
|
||||
| | +-- typography.md
|
||||
| |
|
||||
| |-- utilities
|
||||
| | |-- index.md (parent page)
|
||||
| | |-- color.md
|
||||
| | |-- layout.md
|
||||
| | |-- responsive-modifiers.md
|
||||
| | +-- typography.md
|
||||
| |
|
||||
| |-- (other md files, pages with no children)
|
||||
| +-- ..
|
||||
|
|
||||
|-- (Jekyll files)
|
||||
+-- ..
|
||||
```
|
||||
|
||||
On the parent pages, add this YAML front matter parameter:
|
||||
- `has_children: true` (tells us that this is a parent page)
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: UI Components
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
---
|
||||
```
|
||||
|
||||
Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, which has children and is ordered second in the main nav.
|
||||
|
||||
### Child pages
|
||||
{: .text-gamma }
|
||||
|
||||
On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section).
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
---
|
||||
```
|
||||
|
||||
The Buttons page appears as a child of UI Components and appears second in the UI Components section.
|
||||
|
||||
### Auto-generating Table of Contents
|
||||
|
||||
By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` in the parent page's YAML front matter.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: UI Components
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
has_toc: false
|
||||
---
|
||||
```
|
||||
|
||||
### Children with children
|
||||
{: .text-gamma }
|
||||
|
||||
Child pages can also have children (grandchildren). This is achieved by using a similar pattern on the child and grandchild pages.
|
||||
|
||||
1. Add the `has_children` attribute to the child
|
||||
1. Add the `parent` and `grand_parent` attribute to the grandchild
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
---
|
||||
```
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Buttons Child Page
|
||||
parent: Buttons
|
||||
grand_parent: UI Components
|
||||
nav_order: 1
|
||||
---
|
||||
```
|
||||
|
||||
This would create the following navigation structure:
|
||||
|
||||
```
|
||||
+-- ..
|
||||
|
|
||||
|-- UI Components
|
||||
| |-- ..
|
||||
| |
|
||||
| |-- Buttons
|
||||
| | |-- Button Child Page
|
||||
| |
|
||||
| |-- ..
|
||||
|
|
||||
+-- ..
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Auxiliary Links
|
||||
|
||||
To add auxiliary links to your site (in the upper right on all pages), add it to the `aux_links` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-links) in your site's `_config.yml` file.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## In-page navigation with Table of Contents
|
||||
|
||||
To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in Markdown. This will automatically generate an ordered list of anchor links to various sections of the page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, so to skip a particular heading use the `{: .no_toc }` CSS class.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
# Navigation Structure
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
```
|
||||
|
||||
This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself. To get an unordered list, replace `1. TOC` above by `- TOC`.
|
||||
|
||||
### Collapsible Table of Contents
|
||||
|
||||
The Table of Contents can be made collapsible using the `<details>` and `<summary>` elements , as in the following example. The attribute `open` (expands the Table of Contents by default) and the styling with `{: .text-delta }` are optional.
|
||||
|
||||
```markdown
|
||||
<details open markdown="block">
|
||||
<summary>
|
||||
Table of contents
|
||||
</summary>
|
||||
{: .text-delta }
|
||||
1. TOC
|
||||
{:toc}
|
||||
</details>
|
||||
```
|
||||
|
||||
The result is shown at [the top of this page](#navigation-structure) (`{:toc}` can be used only once on each page).
|
||||
127
docs/search.md
127
docs/search.md
|
|
@ -1,127 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Search
|
||||
nav_order: 7
|
||||
---
|
||||
|
||||
# Search
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates.
|
||||
All search results are shown in an auto-complete style interface (there is no search results page).
|
||||
By default, all generated HTML pages are indexed using the following data points:
|
||||
|
||||
- Page title
|
||||
- Page content
|
||||
- Page URL
|
||||
|
||||
## Enable search in configuration
|
||||
|
||||
In your site's `_config.yml`, enable search:
|
||||
|
||||
```yaml
|
||||
# Enable or disable the site search
|
||||
# Supports true (default) or false
|
||||
search_enabled: true
|
||||
```
|
||||
|
||||
### Search granularity
|
||||
|
||||
Pages are split into sections that can be searched individually.
|
||||
The sections are defined by the headings on the page.
|
||||
Each section is displayed in a separate search result.
|
||||
|
||||
```yaml
|
||||
# Split pages into sections that can be searched individually
|
||||
# Supports 1 - 6, default: 2
|
||||
search.heading_level: 2
|
||||
```
|
||||
|
||||
### Search previews
|
||||
|
||||
A search result can contain previews that show where the search words are found in the specific section.
|
||||
|
||||
```yaml
|
||||
# Maximum amount of previews per search result
|
||||
# Default: 3
|
||||
search.previews: 3
|
||||
|
||||
# Maximum amount of words to display before a matched word in the preview
|
||||
# Default: 5
|
||||
search.preview_words_before: 5
|
||||
|
||||
# Maximum amount of words to display after a matched word in the preview
|
||||
# Default: 10
|
||||
search.preview_words_after: 10
|
||||
```
|
||||
|
||||
### Search tokenizer
|
||||
|
||||
The default is for hyphens to separate tokens in search terms:
|
||||
`gem-based` is equivalent to `gem based`, matching either word.
|
||||
To allow search for hyphenated words:
|
||||
|
||||
```yaml
|
||||
# Set the search token separator
|
||||
# Default: /[\s\-/]+/
|
||||
# Example: enable support for hyphenated search words
|
||||
search.tokenizer_separator: /[\s/]+/
|
||||
```
|
||||
|
||||
### Display URL in search results
|
||||
|
||||
```yaml
|
||||
# Display the relative url in search results
|
||||
# Supports true (default) or false
|
||||
search.rel_url: false
|
||||
```
|
||||
|
||||
### Display search button
|
||||
|
||||
The search button displays in the bottom right corner of the screen and triggers the search input when clicked.
|
||||
|
||||
```yaml
|
||||
# Enable or disable the search button that appears in the bottom right corner of every page
|
||||
# Supports true or false (default)
|
||||
search.button: true
|
||||
```
|
||||
|
||||
|
||||
## Hiding pages from search
|
||||
|
||||
Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page.
|
||||
To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Page not found
|
||||
nav_exclude: true
|
||||
search_exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
## Generate search index when used as a gem
|
||||
|
||||
If you use Just the Docs as a remote theme, you do not need the following steps.
|
||||
|
||||
If you use the theme as a gem, you must initialize the search by running this `rake` command that comes with `just-the-docs`:
|
||||
|
||||
```bash
|
||||
$ bundle exec just-the-docs rake search:init
|
||||
```
|
||||
|
||||
This command creates the `assets/js/zzzz-search-data.json` file that Jekyll uses to create your search index.
|
||||
Alternatively, you can create the file manually with [this content]({{ site.github.repository_url }}/blob/master/assets/js/zzzz-search-data.json).
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
layout: default
|
||||
title: Tiếng Anh
|
||||
has_children: true
|
||||
permalink: tieng-anh
|
||||
---
|
||||
|
||||
# Tiếng Anh
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: default
|
||||
title: Toán 10
|
||||
parent: Toán
|
||||
has_children: true
|
||||
permalink: toan/lop-10
|
||||
---
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: default
|
||||
title: Toán
|
||||
nav_order: 1
|
||||
has_children: true
|
||||
permalink: toan
|
||||
---
|
||||
|
||||
# Toán
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Buttons
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Basic button styles
|
||||
|
||||
### Links that look like buttons
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
[Link button](http://example.com/){: .btn .btn-blue }
|
||||
[Link button](http://example.com/){: .btn .btn-green }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-outline }
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
[Link button](http://example.com/){: .btn .btn-blue }
|
||||
[Link button](http://example.com/){: .btn .btn-green }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-outline }
|
||||
```
|
||||
|
||||
### Button element
|
||||
|
||||
GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this:
|
||||
|
||||
<div class="code-example">
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
</div>
|
||||
```html
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Using utilities with buttons
|
||||
|
||||
### Button size
|
||||
|
||||
Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
<span class="fs-6">
|
||||
[Big ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
</div>
|
||||
```markdown
|
||||
<span class="fs-8">
|
||||
[Link button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
```
|
||||
|
||||
### Spacing between buttons
|
||||
|
||||
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
|
||||
|
||||
[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
</div>
|
||||
```markdown
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
|
||||
[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
```
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Code
|
||||
parent: UI Components
|
||||
has_children: true
|
||||
nav_order: 6
|
||||
---
|
||||
|
||||
# Code
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Inline code
|
||||
|
||||
Code can be rendered inline by wrapping it in single back ticks.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
## Heading with `<inline code snippet>` in it.
|
||||
{: .no_toc }
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
## Heading with `<inline code snippet>` in it.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Syntax highlighted code blocks
|
||||
|
||||
Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
</div>
|
||||
{% highlight markdown %}
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
|
||||
---
|
||||
|
||||
## Code blocks with rendered examples
|
||||
|
||||
To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `<div>` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](http://example.com/){: .btn }
|
||||
```
|
||||
|
||||
</div>
|
||||
{% highlight markdown %}
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](http://example.com/){: .btn }
|
||||
```
|
||||
{% endhighlight %}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Labels
|
||||
parent: UI Components
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Labels
|
||||
|
||||
Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue }
|
||||
|
||||
Stable
|
||||
{: .label .label-green }
|
||||
|
||||
New release
|
||||
{: .label .label-purple }
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow }
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
</div>
|
||||
```markdown
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue }
|
||||
|
||||
Stable
|
||||
{: .label .label-green }
|
||||
|
||||
New release
|
||||
{: .label .label-purple }
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow }
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
```
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Code with line numbers
|
||||
parent: Code
|
||||
grand_parent: UI Components
|
||||
permalink: /docs/ui-components/code/line-numbers/
|
||||
---
|
||||
|
||||
# Code snippets with line numbers
|
||||
|
||||
The default settings for HTML compression are incompatible with the HTML
|
||||
produced by Jekyll (4.1.1 or earlier) for line numbers from highlighted code
|
||||
-- both when using Kramdown code fences and when using Liquid highlight tags.
|
||||
|
||||
To avoid non-conforming HTML and unsatisfactory layout, HTML compression
|
||||
can be turned off by using the following configuration option:
|
||||
|
||||
{% highlight yaml %}
|
||||
compress_html:
|
||||
ignore:
|
||||
envs: all
|
||||
{% endhighlight %}
|
||||
|
||||
When using Kramdown code fences, line numbers are turned on globally by the
|
||||
following configuration option:
|
||||
|
||||
{% highlight yaml %}
|
||||
kramdown:
|
||||
syntax_highlighter_opts:
|
||||
block:
|
||||
line_numbers: true
|
||||
{% endhighlight %}
|
||||
|
||||
Line numbers can then be suppressed locally using Liquid tags (_without_ the
|
||||
`linenos` option) instead of fences:
|
||||
|
||||
{% highlight yaml %}
|
||||
{% raw %}{% highlight some_language %}
|
||||
Some code
|
||||
{% endhighlight %}{% endraw %}
|
||||
{% endhighlight %}
|
||||
|
||||
## Workarounds
|
||||
|
||||
To use HTML compression together with line numbers, all highlighted code
|
||||
needs to be wrapped using one of the following workarounds.
|
||||
(The variable name `some_var` can be changed to avoid clashes; it can also
|
||||
be replaced by `code` -- but note that `code=code` cannot be removed).
|
||||
|
||||
### Code fences (three backticks)
|
||||
|
||||
{% highlight default %}
|
||||
{% raw %}{% capture some_var %}
|
||||
```some_language
|
||||
Some code
|
||||
```
|
||||
{% endcapture %}
|
||||
{% assign some_var = some_var | markdownify %}
|
||||
{% include fix_linenos.html code=some_var %}{% endraw %}
|
||||
{% endhighlight %}
|
||||
|
||||
### Liquid highlighting
|
||||
|
||||
{% highlight default %}
|
||||
{% raw %}{% capture some_var %}
|
||||
{% highlight some_language linenos %}
|
||||
Some code
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
{% include fix_linenos.html code=some_var %}{% endraw %}
|
||||
{% endhighlight %}
|
||||
|
||||
_Credit:_ The original version of the above workaround was suggested by
|
||||
Dmitry Hrabrov at
|
||||
<https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901>.
|
||||
|
||||
## Examples
|
||||
|
||||
✅ Using code fences + workaround (will only show line numbers if enabled globally in `_config.yml`):
|
||||
|
||||
{% capture code_fence %}
|
||||
```js
|
||||
// Javascript code with syntax highlighting in fences
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
{% endcapture %}
|
||||
{% assign code_fence = code_fence | markdownify %}
|
||||
{% include fix_linenos.html code=code_fence %}
|
||||
|
||||
✅ Using liquid highlighting + workaround:
|
||||
|
||||
{% capture code %}
|
||||
{% highlight ruby linenos %}
|
||||
# Ruby code with syntax highlighting and fixed line numbers using Liquid
|
||||
GitHubPages::Dependencies.gems.each do |gem, version|
|
||||
s.add_dependency(gem, "= #{version}")
|
||||
end
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
{% include fix_linenos.html code=code %}
|
||||
{% assign code = nil %}
|
||||
|
||||
❌ With the default configuration options, the following example illustrates
|
||||
the **incorrect** formatting arising from the incompatibility of HTML compression
|
||||
and the non-conforming HTML produced by Jekyll for line numbers:
|
||||
|
||||
{% highlight ruby linenos %}
|
||||
# Ruby code with syntax highlighting and unfixed line numbers using Liquid
|
||||
GitHubPages::Dependencies.gems.each do |gem, version|
|
||||
s.add_dependency(gem, "= #{version}")
|
||||
end
|
||||
{% endhighlight %}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Lists
|
||||
parent: UI Components
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# Lists
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
Most lists can be rendered with pure Markdown.
|
||||
|
||||
## Unordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
_or_
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
</div>
|
||||
```markdown
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
_or_
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
```
|
||||
|
||||
## Ordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
</div>
|
||||
```markdown
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
```
|
||||
|
||||
## Task list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
- [ ] hello, this is a todo item
|
||||
- [ ] hello, this is another todo item
|
||||
- [x] goodbye, this item is done
|
||||
</div>
|
||||
```markdown
|
||||
- [ ] hello, this is a todo item
|
||||
- [ ] hello, this is another todo item
|
||||
- [x] goodbye, this item is done
|
||||
```
|
||||
|
||||
## Definition list
|
||||
|
||||
Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
</div>
|
||||
```html
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
```
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Tables
|
||||
parent: UI Components
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Tables
|
||||
|
||||
Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
```
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Typography
|
||||
parent: UI Components
|
||||
nav_order: 1
|
||||
---
|
||||
|
||||
# Typography
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font stack
|
||||
|
||||
By default, Just the Docs uses a native system font stack for sans-serif fonts:
|
||||
|
||||
```scss
|
||||
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
|
||||
```
|
||||
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
{: .fs-5 .ls-10 .code-example }
|
||||
|
||||
For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
|
||||
|
||||
```scss
|
||||
"SFMono-Regular", Menlo, Consolas, Monospace
|
||||
```
|
||||
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
{: .fs-5 .ls-10 .text-mono .code-example }
|
||||
|
||||
---
|
||||
|
||||
## Responsive type scale
|
||||
|
||||
Just the Docs uses a responsive type scale that shifts depending on the viewport size.
|
||||
|
||||
| Selector | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:----------------------|:---------------------------------|:------------------------------|
|
||||
| `h1`, `.text-alpha` | 32px | 36px |
|
||||
| `h2`, `.text-beta` | 18px | 24px |
|
||||
| `h3`, `.text-gamma` | 16px | 18px |
|
||||
| `h4`, `.text-delta` | 14px | 16px |
|
||||
| `h5`, `.text-epsilon` | 16px | 18px |
|
||||
| `h6`, `.text-zeta` | 18px | 24px |
|
||||
| `body` | 14px | 16px |
|
||||
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
Headings are rendered like this:
|
||||
|
||||
<div class="code-example">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
```markdown
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Body text
|
||||
|
||||
Default body text is rendered like this:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Inline elements
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](another-page).
|
||||
</div>
|
||||
```markdown
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](another-page).
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typographic Utilities
|
||||
|
||||
There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
|
||||
|
||||
[View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: UI Components
|
||||
nav_order: 3
|
||||
has_children: true
|
||||
permalink: /docs/ui-components
|
||||
---
|
||||
|
||||
# UI Components
|
||||
|
||||
To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Color
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Color Utilities
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes.
|
||||
|
||||
## Light Greys
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-000"></span> `grey-lt-000` | `.text-grey-lt-000` | `.bg-grey-lt-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-100"></span> `grey-lt-100` | `.text-grey-lt-100` | `.bg-grey-lt-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-200"></span> `grey-lt-200` | `.text-grey-lt-200` | `.bg-grey-lt-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-300"></span> `grey-lt-300` | `.text-grey-lt-300` | `.bg-grey-lt-300` |
|
||||
|
||||
## Dark Greys
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-250"></span> `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
|
||||
|
||||
## Purples
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-000"></span> `purple-000` | `.text-purple-000` | `.bg-purple-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-100"></span> `purple-100` | `.text-purple-100` | `.bg-purple-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-200"></span> `purple-200` | `.text-purple-200` | `.bg-purple-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-300"></span> `purple-300` | `.text-purple-300` | `.bg-purple-300` |
|
||||
|
||||
## Blues
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-000"></span> `blue-000` | `.text-blue-000` | `.bg-blue-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-100"></span> `blue-100` | `.text-blue-100` | `.bg-blue-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-200"></span> `blue-200` | `.text-blue-200` | `.bg-blue-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-300"></span> `blue-300` | `.text-blue-300` | `.bg-blue-300` |
|
||||
|
||||
## Greens
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"></span> `green-000` | `.text-green-000` | `.bg-green-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-100"></span> `green-100` | `.text-green-100` | `.bg-green-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-200"></span> `green-200` | `.text-green-200` | `.bg-green-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-300"></span> `green-300` | `.text-green-300` | `.bg-green-300` |
|
||||
|
||||
## Yellows
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"></span> `yellow-000` | `.text-yellow-000` | `.bg-yellow-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-100"></span> `yellow-100` | `.text-yellow-100` | `.bg-yellow-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-200"></span> `yellow-200` | `.text-yellow-200` | `.bg-yellow-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-300"></span> `yellow-300` | `.text-yellow-300` | `.bg-yellow-300` |
|
||||
|
||||
## Reds
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-000"></span> `red-000` | `.text-red-000` | `.bg-red-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-100"></span> `red-100` | `.text-red-100` | `.bg-red-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-200"></span> `red-200` | `.text-red-200` | `.bg-red-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-300"></span> `red-300` | `.text-red-300` | `.bg-red-300` |
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Layout
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Layout Utilities
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Spacing
|
||||
|
||||
These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:------------------------------|
|
||||
| `.m-` | `margin` |
|
||||
| `.mx-` | `margin-left`, `margin-right` |
|
||||
| `.my-` | `margin top`, `margin bottom` |
|
||||
| `.mt-` | `margin-top` |
|
||||
| `.mr-` | `margin-right` |
|
||||
| `.mb-` | `margin-bottom` |
|
||||
| `.ml-` | `margin-left` |
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:--------------------------------|
|
||||
| `.p-` | `padding` |
|
||||
| `.px-` | `padding-left`, `padding-right` |
|
||||
| `.py-` | `padding top`, `padding bottom` |
|
||||
| `.pt-` | `padding-top` |
|
||||
| `.pr-` | `padding-right` |
|
||||
| `.pb-` | `padding-bottom` |
|
||||
| `.pl-` | `padding-left` |
|
||||
|
||||
Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units:
|
||||
|
||||
| Spacer/suffix | Size in rems | Rem converted to px |
|
||||
|:---------------|:--------------|:--------------------|
|
||||
| `1` | 0.25rem | 4px |
|
||||
| `2` | 0.5rem | 8px |
|
||||
| `3` | 0.75rem | 12px |
|
||||
| `4` | 1rem | 16px |
|
||||
| `5` | 1.5rem | 24px |
|
||||
| `6` | 2rem | 32px |
|
||||
| `7` | 2.5rem | 40px |
|
||||
| `8` | 3rem | 48px |
|
||||
| `auto` | auto | auto |
|
||||
|
||||
Use `mx-auto` to horizontally center elements.
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
```markdown
|
||||
This paragraph will have a margin bottom of 1rem/16px at large screens.
|
||||
{: .mb-lg-4 }
|
||||
|
||||
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
|
||||
{: .px-6 }
|
||||
```
|
||||
|
||||
## Horizontal Alignment
|
||||
|
||||
| Classname | What it does |
|
||||
|:------------------------|:---------------------------------|
|
||||
| `.float-left` | `float: left` |
|
||||
| `.float-right` | `float: right` |
|
||||
| `.flex-justify-start` | `justify-content: flex-start` |
|
||||
| `.flex-justify-end` | `justify-content: flex-end` |
|
||||
| `.flex-justify-between` | `justify-content: space-between` |
|
||||
| `.flex-justify-around` | `justify-content: space-around` |
|
||||
|
||||
_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._
|
||||
|
||||
## Vertical Alignment
|
||||
|
||||
| Classname | What it does |
|
||||
|:-----------------------|:--------------------------------|
|
||||
| `.v-align-baseline` | `vertical-align: baseline` |
|
||||
| `.v-align-bottom` | `vertical-align: bottom` |
|
||||
| `.v-align-middle` | `vertical-align: middle` |
|
||||
| `.v-align-text-bottom` | `vertical-align: text-bottom` |
|
||||
| `.v-align-text-top` | `vertical-align: text-top` |
|
||||
| `.v-align-top` | `vertical-align: top` |
|
||||
|
||||
## Display
|
||||
|
||||
Display classes aid in adapting the layout of the elements on a page:
|
||||
|
||||
| Class | |
|
||||
|:------------------|:------------------------|
|
||||
| `.d-block` | `display: block` |
|
||||
| `.d-flex` | `display: flex` |
|
||||
| `.d-inline` | `display: inline` |
|
||||
| `.d-inline-block` | `display: inline-block` |
|
||||
| `.d-none` | `display: none` |
|
||||
|
||||
Use these classes in conjunction with the responsive modifiers.
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
```markdown
|
||||
This button will be hidden until medium screen sizes:
|
||||
|
||||
[ A button ](#url)
|
||||
{: .d-none .d-md-inline-block }
|
||||
|
||||
These headings will be `inline-block`:
|
||||
|
||||
### heading 3
|
||||
{: .d-inline-block }
|
||||
|
||||
### heading 3
|
||||
{: .d-inline-block }
|
||||
```
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Responsive Modifiers
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Responsive modifiers
|
||||
|
||||
Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes.
|
||||
|
||||
| Modifier | Screen size |
|
||||
|:----------|:-------------------------------------|
|
||||
| (none) | All screens until the next modifier |
|
||||
| `xs` | 320px (20rem) and up |
|
||||
| `sm` | 500px (31.25rem) and up |
|
||||
| `md` | 740px (46.25rem) and up |
|
||||
| `lg` | 1120px (70rem) and up |
|
||||
| `xl` | 1400px (87.5rem) and up |
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Typography
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Typography Utilities
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font size
|
||||
|
||||
Use the `.fs-1` - `.fs-10` to set an explicit font-size.
|
||||
|
||||
| Class | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:--------|:-------------------------------|:------------------------------|
|
||||
| `.fs-1` | 9px | 10px |
|
||||
| `.fs-2` | 11px | 12px |
|
||||
| `.fs-3` | 12px | 14px |
|
||||
| `.fs-4` | 14px | 16px |
|
||||
| `.fs-5` | 16px | 18px |
|
||||
| `.fs-6` | 18px | 24px |
|
||||
| `.fs-7` | 24px | 32px |
|
||||
| `.fs-8` | 32px | 38px |
|
||||
| `.fs-9` | 38px | 42px |
|
||||
| `.fs-10`| 42px | 48px |
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
```
|
||||
|
||||
## Font weight
|
||||
|
||||
Use the `.fw-300` - `.fw-700` to set an explicit font-size.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
```
|
||||
|
||||
## Line height
|
||||
|
||||
Use the `lh-` classes to explicitly apply line height to text.
|
||||
|
||||
| Class | `line-height` value | Notes |
|
||||
|:--------------|:---------------------|:------------------------------|
|
||||
| `.lh-0` | 0 | |
|
||||
| `.lh-tight` | 1.1 | Default for headings |
|
||||
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
```
|
||||
|
||||
## Text justification
|
||||
|
||||
By default text is justified left. Use these `text-` classes to override settings:
|
||||
|
||||
| Class | What it does |
|
||||
|:---------------|:---------------------|
|
||||
| `.text-left` | `text-align: left` |
|
||||
| `.text-right` | `text-align: right` |
|
||||
| `.text-center` | `text-align: center` |
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Utilities
|
||||
nav_order: 4
|
||||
has_children: true
|
||||
permalink: docs/utilities
|
||||
---
|
||||
|
||||
# Utilities
|
||||
{: .no_toc }
|
||||
|
||||
CSS utility classes come in handy when you to want to override default styles to create additional whitespace (margins/padding), correct unexpected shifts in font size or weight, add color, or hide (or show) something at a specific screen size.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
layout: default
|
||||
title: Vật lí 10
|
||||
has_children: true
|
||||
nav_order: 1
|
||||
parent: Vật lí
|
||||
permalink: vat-li/lop-10
|
||||
---
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: default
|
||||
title: Vật lí
|
||||
nav_order: 3
|
||||
has_children: true
|
||||
permalink: vat-li
|
||||
---
|
||||
|
||||
# Vật lí
|
||||
85
index.md
85
index.md
|
|
@ -6,91 +6,12 @@ description: "Just the Docs is a responsive Jekyll theme with built-in search th
|
|||
permalink: /
|
||||
---
|
||||
|
||||
# Focus on writing good documentation
|
||||
# Chia sẻ kiến thức cá nhân
|
||||
{: .fs-9 }
|
||||
|
||||
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub Pages.
|
||||
Đây là nơi tổng hợp những kiến thức mình học được. Một số nội dung mang tính cá nhân và có thể có sai sót.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 .mb-4 .mb-md-0 }
|
||||
[Khám phá](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 .mb-4 .mb-md-0 }
|
||||
|
||||
---
|
||||
|
||||
## Getting started
|
||||
|
||||
### Dependencies
|
||||
|
||||
Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/) for more information. Just the Docs requires no special plugins and can run on GitHub Pages' standard Jekyll compiler. The [Jekyll SEO Tag plugin](https://github.com/jekyll/jekyll-seo-tag) is included by default (no need to run any special installation) to inject SEO and open graph metadata on docs pages. For information on how to configure SEO and open graph metadata visit the [Jekyll SEO Tag usage guide](https://jekyll.github.io/jekyll-seo-tag/usage/).
|
||||
|
||||
### Quick start: Use as a GitHub Pages remote theme
|
||||
|
||||
1. Add Just the Docs to your Jekyll site's `_config.yml` as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/)
|
||||
```yaml
|
||||
remote_theme: pmarsceill/just-the-docs
|
||||
```
|
||||
<small>You must have GitHub Pages enabled on your repo, one or more Markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote)</small>
|
||||
|
||||
### Local installation: Use the gem-based theme
|
||||
|
||||
1. Install the Ruby Gem
|
||||
```bash
|
||||
$ gem install just-the-docs
|
||||
```
|
||||
```yaml
|
||||
# .. or add it to your your Jekyll site’s Gemfile
|
||||
gem "just-the-docs"
|
||||
```
|
||||
2. Add Just the Docs to your Jekyll site’s `_config.yml`
|
||||
```yaml
|
||||
theme: "just-the-docs"
|
||||
```
|
||||
3. _Optional:_ Initialize search data (creates `search-data.json`)
|
||||
```bash
|
||||
$ bundle exec just-the-docs rake search:init
|
||||
```
|
||||
3. Run you local Jekyll server
|
||||
```bash
|
||||
$ jekyll serve
|
||||
```
|
||||
```bash
|
||||
# .. or if you're using a Gemfile (bundler)
|
||||
$ bundle exec jekyll serve
|
||||
```
|
||||
4. Point your web browser to [http://localhost:4000](http://localhost:4000)
|
||||
|
||||
If you're hosting your site on GitHub Pages, [set up GitHub Pages and Jekyll locally](https://help.github.com/en/articles/setting-up-your-github-pages-site-locally-with-jekyll) so that you can more easily work in your development environment.
|
||||
|
||||
### Configure Just the Docs
|
||||
|
||||
- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
|
||||
|
||||
---
|
||||
|
||||
## About the project
|
||||
|
||||
Just the Docs is © 2017-{{ "now" | date: "%Y" }} by [Patrick Marsceill](http://patrickmarsceill.com).
|
||||
|
||||
### License
|
||||
|
||||
Just the Docs is distributed by an [MIT license](https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt).
|
||||
|
||||
### Contributing
|
||||
|
||||
When contributing to this repository, please first discuss the change you wish to make via issue,
|
||||
email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in [our GitHub repo](https://github.com/pmarsceill/just-the-docs#contributing).
|
||||
|
||||
#### Thank you to the contributors of Just the Docs!
|
||||
|
||||
<ul class="list-style-none">
|
||||
{% for contributor in site.github.contributors %}
|
||||
<li class="d-inline-block mr-1">
|
||||
<a href="{{ contributor.html_url }}"><img src="{{ contributor.avatar_url }}" width="32" height="32" alt="{{ contributor.login }}"/></a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
### Code of Conduct
|
||||
|
||||
Just the Docs is committed to fostering a welcoming community.
|
||||
|
||||
[View our Code of Conduct](https://github.com/pmarsceill/just-the-docs/tree/master/CODE_OF_CONDUCT.md) on our GitHub repository.
|
||||
|
|
|
|||
Loading…
Reference in New Issue