Convert docdock theme from submodule to native files and fix Hugo compatibility
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
+++
|
||||
title = "Content Organisation"
|
||||
description = ""
|
||||
weight = 20
|
||||
+++
|
||||
|
||||
With **Hugo**, pages are the core of your site. Organize your site like any other Hugo project. **Magic occurs with the nested sections implemention done in v0.22 of hugo (congrats @bep)**.
|
||||
|
||||
With docdock, **Each content page composes the menu**, they shape the structure of your website.
|
||||
|
||||
To link pages to each other, place them in a folders hierarchy
|
||||
|
||||
```
|
||||
content
|
||||
├── level-one
|
||||
│ ├── level-two
|
||||
│ │ ├── level-three
|
||||
│ │ │ ├── level-four
|
||||
│ │ │ │ ├── _index.md
|
||||
│ │ │ │ ├── page-4-a.md
|
||||
│ │ │ │ ├── page-4-b.md
|
||||
│ │ │ │ └── page-4-c.md
|
||||
│ │ │ ├── _index.md
|
||||
│ │ │ ├── page-3-a.md
|
||||
│ │ │ ├── page-3-b.md
|
||||
│ │ │ └── page-3-c.md
|
||||
│ │ ├── _index.md
|
||||
│ │ ├── page-2-a.md
|
||||
│ │ ├── page-2-b.md
|
||||
│ │ └── page-2-c.md
|
||||
│ ├── _index.md
|
||||
│ ├── page-1-a.md
|
||||
│ ├── page-1-b.md
|
||||
│ └── page-1-c.md
|
||||
├── _index.md
|
||||
└── page-top.md
|
||||
```
|
||||
|
||||
|
||||
{{%alert info %}} **_index.md** is required in each folder, it's your "folder home page"{{%/alert%}}
|
||||
|
||||
### Add header to a menu entry
|
||||
|
||||
in the page frontmatter, add a `head` param to insert any HTML code before the menu entry:
|
||||
|
||||
example to display a "Hello"
|
||||
|
||||
+++
|
||||
title = "Github repo"
|
||||
head ="<label>Hello</label> "
|
||||
+++
|
||||
|
||||
|
||||
|
||||
### Add icon to a menu entry
|
||||
|
||||
in the page frontmatter, add a `pre` param to insert any HTML code before the menu label:
|
||||
|
||||
example to display a github icon
|
||||
|
||||
+++
|
||||
title = "Github repo"
|
||||
pre ="<i class='fa fa-github'></i> "
|
||||
+++
|
||||
|
||||
|
||||
|
||||
<!-- ### Customize menu entry label
|
||||
|
||||
Add a `name` param next to `[menu.main]`
|
||||
|
||||
+++
|
||||
[menu.main]
|
||||
parent = ""
|
||||
identifier = "repo"
|
||||
pre ="<i class='fa fa-github'></i> "
|
||||
name = "Github repo"
|
||||
+++ -->
|
||||
|
||||
<!-- ### Create a page redirector
|
||||
Add a `url` param next to `[menu.main]`
|
||||
|
||||
+++
|
||||
[menu.main]
|
||||
parent = "page"
|
||||
identifier = "page-images"
|
||||
weight = 23
|
||||
url = "/shortcode/image/"
|
||||
+++
|
||||
|
||||
{{%alert info%}}Look at the menu "Create Page/About images" which redirects to "Shortcodes/image{{%/alert%}}
|
||||
-->
|
||||
### Order sibling menu/page entries
|
||||
|
||||
in your frontmatter add `weight` param with a number to order.
|
||||
|
||||
+++
|
||||
title="My page"
|
||||
weight = 4
|
||||
+++
|
||||
|
||||
{{%info%}}add `ordersectionsby = "title"` in your config.toml to order menu entries by title{{%/info%}}
|
||||
|
||||
|
||||
### Hide a menu entry
|
||||
|
||||
in your frontmatter add `hidden=true` param.
|
||||
|
||||
+++
|
||||
title="My page"
|
||||
hidden = true
|
||||
+++
|
||||
|
||||
|
||||
### Unfolded menu entry by default
|
||||
|
||||
One or more menuentries can be displayed unfolded by default. (like the "Getting start" menu entry in this website)
|
||||
|
||||
in your frontmatter add `alwaysopen=true` param.
|
||||
example :
|
||||
|
||||
```
|
||||
title = "Getting start"
|
||||
description = ""
|
||||
weight = 1
|
||||
alwaysopen = true
|
||||
```
|
||||
|
||||
### Folder structure and file name
|
||||
|
||||
Content organization **is** your `content` folder structure.
|
||||
|
||||
### Homepage
|
||||
|
||||
Find out how to [customize homepage]({{%relref "homepage.md"%}})
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
+++
|
||||
title = "Customize website look and feel"
|
||||
Weight=3
|
||||
+++
|
||||
|
||||
You can change the style and behavior of the theme without touching it.
|
||||
|
||||
* inject your own html, css or js into the page
|
||||
* overide existing css or js with your own files
|
||||
|
||||
{{%notice note %}}
|
||||
No needs to copy the entire theme to customize some parts
|
||||
Bellow are solutions to avoid copying the entire theme into your own codebase.
|
||||
{{%/notice%}}
|
||||
|
||||
## Add custom CSS and JS or HTML into the \<head\> part of each page :
|
||||
|
||||
Create a custom header partial `layouts/partials/custom-head.html`
|
||||
|
||||
> * content/
|
||||
> * layouts/
|
||||
> * partials/
|
||||
> * custom-head.html
|
||||
|
||||
write your own content like (an example from @nzbart):
|
||||
```html
|
||||
<link rel="stylesheet" href="/css/custom.css">
|
||||
<script src="/js/custom.js"></script>
|
||||
```
|
||||
|
||||
Then overrode the style your want to change in `static/css/custom.css` (in this case, to avoid altering the casing of titles):
|
||||
```css
|
||||
h2 {
|
||||
text-transform: none;
|
||||
}
|
||||
```
|
||||
|
||||
And executed some additional JavaScript from `static/js/custom.js` (note that jQuery is already loaded by the theme):
|
||||
```javascript
|
||||
function tweakPage() {
|
||||
// make some changes here
|
||||
}
|
||||
|
||||
$(tweakPage)
|
||||
```
|
||||
|
||||
|
||||
now feel free to add the JS, CSS, HTML code you want :)
|
||||
|
||||
## Add custom HTML at the end of the body part of each page :
|
||||
|
||||
Create a `custom-footer.html` into a `layouts/partials` folder next to the content folder
|
||||
|
||||
> * content/
|
||||
> * layouts/
|
||||
> * partials/
|
||||
> * custom-footer.html
|
||||
|
||||
now feel free to add the JS, CSS, HTML code you want :)
|
||||
|
||||
## Overide existing CSS or JS
|
||||
|
||||
Create the matching file in your static folder, hugo will use yours instead of the theme's one.
|
||||
Example :
|
||||
|
||||
create a theme.css and place it into `static/css/` to fully overide docdock's theme.css
|
||||
@@ -0,0 +1,24 @@
|
||||
+++
|
||||
title = "Disable features"
|
||||
+++
|
||||
|
||||
You can disable feature in docdock by changing some params in `config.toml`
|
||||
|
||||
|
||||
## hide Next / Prev Chevrons
|
||||
```
|
||||
[params]
|
||||
disableNavChevron = true
|
||||
```
|
||||
|
||||
## hide Search box in side menu
|
||||
```
|
||||
[params]
|
||||
disableSearch = true
|
||||
```
|
||||
|
||||
## hide the {{%icon fa-home%}} icon in side bar
|
||||
```
|
||||
[params]
|
||||
disableHomeIcon = true
|
||||
```
|
||||
@@ -0,0 +1,35 @@
|
||||
+++
|
||||
title = "Theme variants"
|
||||
description = "change theme style/colors"
|
||||
+++
|
||||
|
||||
In site configuration file, you can set a variant name of this theme to load a specific css, with different color specifications.
|
||||
|
||||
add a param `themeVariant = "VARIANT_NAME"` in the `[params]` part of config.toml file.
|
||||
|
||||
{{%info%}}Available variants change only colors at this moment{{%/info%}}
|
||||
|
||||
|
||||
## Variant "gray"
|
||||
```
|
||||
[params]
|
||||
themeVariant = "gray"
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Variant "gold"
|
||||
```
|
||||
[params]
|
||||
themeVariant = "gold"
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Variant "green"
|
||||
```
|
||||
[params]
|
||||
themeVariant = "green"`
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
+++
|
||||
title = "Theme styles"
|
||||
description = "change theme style"
|
||||
+++
|
||||
|
||||
In site configuration file, you can set a subtheme name of this theme to load a specific css.
|
||||
|
||||
add a param `themeStyle = "STYLE_NAME"` in the `[params]` part of config.toml file.
|
||||
|
||||
|
||||
## Style "original"
|
||||
```
|
||||
[params]
|
||||
themeStyle = "original"
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Style "flex" (work in progress)
|
||||
```
|
||||
[params]
|
||||
themeStyle = "flex"
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
+++
|
||||
title = "Extra menu entries"
|
||||
date = "2017-04-29T18:36:24+02:00"
|
||||
Weight=2
|
||||
+++
|
||||
|
||||
You can define additional menu entries in the navigation menu without any link to content.
|
||||
|
||||
Edit the website configuration `config.toml` and add a `[[menu.shortcuts]]` entry for each link your want to add.
|
||||
|
||||
|
||||
Example from the current website, **note the `pre` param** which allows you to insert HTML code and used here to separate content's menu from this "static" menu
|
||||
|
||||
[[menu.shortcuts]]
|
||||
pre = "<h3>More</h3>"
|
||||
name = "<i class='fa fa-github'></i> Github repo"
|
||||
identifier = "ds"
|
||||
url = "https://github.com/vjeantet/hugo-theme-docdock"
|
||||
weight = 1
|
||||
|
||||
[[menu.shortcuts]]
|
||||
name = "<i class='fa fa-bookmark'></i> Hugo Documentation"
|
||||
identifier = "hugodoc"
|
||||
url = "https://gohugo.io/"
|
||||
weight = 2
|
||||
|
||||
|
||||
[{{%icon circle-arrow-right%}} Read more about hugo and menu here](https://gohugo.io/extras/menus/)
|
||||
@@ -0,0 +1,12 @@
|
||||
+++
|
||||
title = "Logo placeholder"
|
||||
description = ""
|
||||
date = "2017-04-24T18:36:24+02:00"
|
||||
Weight=1
|
||||
+++
|
||||
|
||||
Create a `_header.md` page in content folder. Its content is what you get in the logo placeholder (top left of the screen).
|
||||
|
||||
{{%alert info%}}**Tip :** you can add a image, a combobox with links to other documentation....{{%/alert%}}
|
||||
|
||||
{{%alert info%}}**Tip 2 :** look at [ extra static menu]({{%relref "extramenu.md"%}}) if you want to add links to other website in this sidebar{{%/alert%}}
|
||||
Reference in New Issue
Block a user