diff --git a/README.md b/README.md index 6934e36..33e01ab 100644 --- a/README.md +++ b/README.md @@ -199,7 +199,7 @@ Check out [shortcodes](https://ntk148v.github.io/hugo-toigian/posts/shortcodes). | ----------------------- | -------------------------------- | | `assets/css/custom.css` | Customize or override css styles | -- For example, you don't like the chosen fonts (Roboto Mono and Barlow fonts), and you want to use your own choice, follow these steps: +- For example, you don't like the chosen font (Inconsolata), and you want to use your own choice, follow these steps: - Create `layouts/partials/font.html` to import your fonts: @@ -230,7 +230,7 @@ As you already known, I'm not front-end developer. Therefore, if you find anythi Primary goals are: - Keep it simple. -- Avoid using JS if it can be solved by CSS> +- Avoid using JS if it can be solved by CSS. Feel free to open issues if you find missing configuration or customization options. diff --git a/exampleSite/content/posts/welcome-to-hugo-toigian.md b/exampleSite/content/posts/welcome-to-hugo-toigian.md index c3cb961..d5a3402 100644 --- a/exampleSite/content/posts/welcome-to-hugo-toigian.md +++ b/exampleSite/content/posts/welcome-to-hugo-toigian.md @@ -15,8 +15,8 @@ tags: ["hugo", "tech", "toigian"] Take a look at [demo site](https://ntk148v.github.io/hugo-toigian). -| Dark | Light | -| --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| Dark | Light | +| ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/dark-home.png" class="figure" >}} | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/light-home.png" class="figure" >}} | | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/dark-list.png" class="figure" >}} | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/light-list.png" class="figure" >}} | | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/dark-post.png" class="figure" >}} | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/light-post.png" class="figure" >}} | @@ -40,6 +40,8 @@ Take a look at [demo site](https://ntk148v.github.io/hugo-toigian). snap install hugo --channel=extended ``` +- Hugo Pipe’s PostCSS requires the `postcss-cli` JavaScript package to be installed in the environment (`npm install -g postcss postcss-cli`) along with any PostCSS plugin(s) used (e.g., `npm install -g autoprefixer`). If you are using the Hugo Snap package, PostCSS and plugin(s) need to be installed locally within your Hugo site directory, e.g., `npm install postcss-cli` without the -g flag. + ## 3. Installation - Go to root directory of your Hugo website, or create a new site with: @@ -66,7 +68,7 @@ npm install - Finally, update theme in your configuration `config.toml` file in the root directory of your Hugo website. ```toml -theme: "hugo-toigian" +theme = "hugo-toigian" ``` - Run server to see a live preview of it. @@ -88,58 +90,58 @@ hugo --environment production --minify There are a few configuration options that you can add to [config.toml](./exampleSite/config.toml) file. ```toml -baseURL: 'http://example.org/' -languageCode: 'en-us' -title: 'Toigian' -theme: "hugo-toigian" -themesDir: "../.." +baseURL = 'http://example.org/' +languageCode = 'en-us' +title = 'Toigian' +theme = "hugo-toigian" +themesDir = "../.." # (Optional) If you provide a Disqus shortname, comments will be enabled on # all pages. -# disqusShortname: "my-site" +# disqusShortname = "my-site" [params] # (Optional, default true): Controls table of contents visibility on right side of pages. # Start and end levels can be controlled with markup.tableOfContents setting. -toc: true +toc = true # (Optional, default true) Enables comments template on pages # By default partials/docs/comments.html includes Disqus template # See https://gohugo.io/content-management/comments/#configure-disqus # Can be overwritten by same param in page frontmatter -comments: true +comments = true [params.author] -name: "Kien Nguyen-Tuan" -email: "kiennt2609@gmail.com" +name = "Kien Nguyen-Tuan" +email = "kiennt2609@gmail.com" [markup] - defaultMarkdownHandler: "goldmark" + defaultMarkdownHandler = "goldmark" # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering. # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems. [markup.goldmark] [markup.goldmark.renderer] - unsafe: true # Enable user to embed HTML snippets in Markdown content. + unsafe = true # Enable user to embed HTML snippets in Markdown content. [markup.highlight] - codeFences: true - guessSyntax: true - lineNos: false - noClasses: false - tabWidth: 4 + codeFences = true + guessSyntax = true + lineNos = false + noClasses = false + tabWidth = 4 [markup.tableOfContents] - startLevel: 2 - endLevel: 4 - ordered: true + startLevel = 2 + endLevel = 4 + ordered = true # The left side navbar at the top [menu] [[menu.nav]] - name: "About" - url: "/about" - weight: 2 + name = "About" + url = "/about" + weight = 2 [[menu.nav]] - name: "Posts" - url: "/posts" - weight: 3 + name = "Posts" + url = "/posts" + weight = 3 ``` ### 3.2. Page configuration @@ -148,9 +150,12 @@ You can specify additional params in the front matter of individual pages. ```md # Your posts tags -tags: [] + +tags = [] + # If you have enabled comments for the site, you can disable it for specific pages -comment: true + +comment = true ``` ## 4. Shortcodes @@ -161,11 +166,12 @@ Check out [shortcodes](https://ntk148v.github.io/hugo-toigian/posts/shortcodes). - Partials: There are layout partials available for you to easily override components of the theme in `layouts/partials/`. -| Empty partial | Placement | Usage | -| --------------------------------------------- | --------------------------- | ----------------- | -| `layouts/partials/custom/head.html` | Before closing `` tag | Add custom css/js | -| `layouts/partials/custom/content-before.html` | Before page content | | -| `layouts/partials/custom/content-after.html` | After page content | | +| Empty partial | Placement | Usage | +| --------------------------------------------- | --------------------------- | ------------------- | +| `layouts/partials/custom/head.html` | Before closing `` tag | Add custom css/js | +| `layouts/partials/custom/content-before.html` | Before page content | | +| `layouts/partials/custom/content-after.html` | After page content | | +| `layouts/partials/font.html` | | Import custom fonts | - Extra customization: @@ -173,6 +179,30 @@ Check out [shortcodes](https://ntk148v.github.io/hugo-toigian/posts/shortcodes). | ----------------------- | -------------------------------- | | `assets/css/custom.css` | Customize or override css styles | +- For example, you don't like the chosen font (Inconsolata), and you want to use your own choice, follow these steps: + + - Create `layouts/partials/font.html` to import your fonts: + + ```html + + + + + ``` + + - Create `assets/css/custom.css`: + + ```scss + // change the default mono font to Overpass + :root { + --font-mono: "Overpass"; + --font-serif: "Inter"; + } + ``` + ## 6. Contributing As you already known, I'm not front-end developer. Therefore, if you find anything wrong or want to make improvement, don't hesitate to open an issue/pull request. @@ -180,7 +210,7 @@ As you already known, I'm not front-end developer. Therefore, if you find anythi Primary goals are: - Keep it simple. -- Avoid using JS if it can be solved by CSS> +- Avoid using JS if it can be solved by CSS. Feel free to open issues if you find missing configuration or customization options.