search

thingsym / hugo-theme-techdoc

The Techdoc is a Hugo Theme for technical documentation.
https://themes.gohugo.io/hugo-theme-techdoc/
MIT License
213 stars 146 forks source link
hugo hugo-theme theme

readme

Hugo Theme Techdoc

The Techdoc is a Hugo Theme for technical documentation.

The Techdoc screenshot

Features

Screenshot

Theme color

Theme color

Menu style

Open Menu

Open Menu

Slide Menu

Slide Menu

Edit link

Edit link

Getting Started

Requirement

Hugo minimum version: 0.120.0

Default Markdown parser library Goldmark compatible

Install Hugo theme on your project as a git submodule

If you have git installed, you can include hugo-theme-techdoc repository into your core repository as submodule using git submodule within your project directory.

cd your_project
git submodule add https://github.com/thingsym/hugo-theme-techdoc.git themes/hugo-theme-techdoc

For more information read the Hugo documentation.

Or install Hugo theme on your project as a Hugo module

If you have Go installed, you can add hugo-theme-techdoc to your site as a Hugo module instead of a git submodule. Navigate to your Hugo project root and edit your hugo.toml:

[module]
[[module.imports]]
path = 'github.com/thingsym/hugo-theme-techdoc'

Then, to install/update the hugo-theme-techdoc module, run:

hugo mod get -u

Or download Hugo theme on your project

If you have git installed, you can do the following at the command-line-interface within your project directory.

cd your_project/themes
git clone https://github.com/thingsym/hugo-theme-techdoc.git

Configure

You may specify options in hugo.toml (or hugo.yaml/hugo.json) of your site to make use of this theme's features.

For an example of hugo.toml, hugo.toml in exampleSite.

Update Hugo theme for git submodule

git submodule update --remote
git add themes/hugo-theme-techdoc
git commit

Directory layout

tree . -I node_modules

.
├── LICENSE.md
├── README.md
├── archetypes
│   └── default.md
├── compose.yml
├── exampleSite
│   └── ..
├── gulpfile.js
├── images
│   └── ..
├── layouts
│   ├── 404.html
│   ├── blog
│   │   ├── li.html
│   │   ├── list.html
│   │   ├── single.html
│   │   └── summary.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.algolia.json
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   ├── partials
│   │   ├── content-footer.html
│   │   ├── custom-css.html
│   │   ├── custom-head.html
│   │   ├── edit-meta.html
│   │   ├── edit-page.html
│   │   ├── footer.html
│   │   ├── global-menu.html
│   │   ├── head.html
│   │   ├── last-updated.html
│   │   ├── menu
│   │   │   ├── open-menu.html
│   │   │   └── slide-menu.html
│   │   ├── meta
│   │   │   ├── chroma.html
│   │   │   ├── google-analytics-async.html
│   │   │   ├── google-site-verification.html
│   │   │   └── tag-manager.html
│   │   ├── notification.html
│   │   ├── pagination.html
│   │   ├── powered.html
│   │   ├── prepend-body.html
│   │   ├── search.html
│   │   ├── sidebar-footer.html
│   │   ├── sidebar.html
│   │   ├── site-header.html
│   │   └── table-of-contents.html
│   ├── posts
│   │   ├── list.html
│   │   └── single.html
│   ├── shortcodes
│       ├── button.html
│       ├── code.html
│       ├── panel.html
│       └── search.html
├── package-lock.json
├── package.json
├── resources
├── src
│   ├── js
│   │   ├── code.js
│   │   ├── headerlink.js
│   │   ├── jquery.backtothetop
│   │   │   ├── jquery.backtothetop.js
│   │   │   └── jquery.backtothetop.min.js
│   │   ├── keydown-nav.js
│   │   ├── main.js
│   │   └── sidebar-menu.js
│   └── scss
│       ├── _component.scss
│       ├── _project.scss
│       ├── _structure.scss
│       ├── _variable.scss
│       ├── chroma.scss
│       ├── foundation
│       │   ├── _element.scss
│       │   ├── _index.scss
│       │   ├── _normalize.scss
│       │   ├── _reset.scss
│       │   └── _stack.scss
│       ├── function
│       │   ├── _calc-font-size.scss
│       │   ├── _calc-stack.scss
│       │   ├── _contrast-color.scss
│       │   ├── _index.scss
│       │   └── _strip-unit.scss
│       └── theme.scss
├── static
│   ├── css
│   │   ├── chroma.css
│   │   ├── chroma.min.css
│   │   ├── theme.css
│   │   └── theme.min.css
│   ├── images
│   └── js
│       └── bundle.js
├── theme.toml
└── webpack.config.js

Preview site

To preview your site, run Hugo's built-in local server.

hugo server -t hugo-theme-techdoc

Browse site on http://localhost:1313

Deploy Site to public_html directory

hugo -t hugo-theme-techdoc -d public_html

Local development environment

Preview exampleSite

cd /path/to/dir/themes/hugo-theme-techdoc/exampleSite

hugo server --themesDir ../..

Browse site on http://localhost:1313

Build development

cd /path/to/hugo-theme-techdoc
npm install
npm run gulp watch

Docker development environment

Run Docker and Preview exampleSite

cd /path/to/hugo-theme-techdoc
docker compose up -d

Browse site on http://localhost:1313

Build development

cd /path/to/hugo-theme-techdoc
docker compose run --rm node npm install
docker compose run --rm node npm run watch

Contribution

Patches and Bug Fixes

Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.

  1. Fork Hugo Theme Techdoc from GitHub repository
  2. Create a feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Create new Pull Request

Changelog

License

Techdoc is licensed under the MIT License.

Techdoc bundles the following third-party resources:

Author

thingsym

Copyright (c) 2017-2020 by thingsym