From dfb6e1f80754c1c8f2d4d332c5292319f008a67b Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 27 May 2020 22:53:13 +0800 Subject: v2 original port --- README.md | 148 +++++++++++++++++++++++++++++++++----------------------------- 1 file changed, 80 insertions(+), 68 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index c536e83..7647786 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,38 @@ # Fuji -![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji) - -A minimal Hugo theme inspired by Hexo theme [Murasaki](https://github.com/printempw/hexo-theme-murasaki/), with responsive grid system and markdown style, powered by GitHub Primer CSS. +Fuji is a minimal Hugo theme inspired by Hexo theme [Murasaki](https://github.com/printempw/hexo-theme-murasaki/), with responsive grid system and GitHub Primer markdown style. + +![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square) + +## Table of contents + +- [Live demos](#live-demos) +- [Notice](#notice) +- [Getting started](#getting-started) +- [Update the theme](#update-the-theme) +- [Configration](#configration) + - [In-post license & comments](#in-post-license--comments) + - [APlayer](#aplayer) + - [Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) + - [Markdown render hook](#markdown-render-hook) + - [Custom fonts](#custom-fonts) +- [Contributing](#contributing) +- [License](#license) +- [Annotations](#annotations) ## Live demos [**Demo on gohugo.io (en)**](https://themes.gohugo.io/theme/hugo-theme-fuji/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/) -![Screenshot of the theme](https://raw.githubusercontent.com/amzrk2/hugo-theme-fuji/master/images/screenshot.png) + + +![Screenshot of Fuji](https://raw.githubusercontent.com/amzrk2/hugo-theme-fuji/master/images/screenshot.png) -## Todo +## Notice -- [x] Custom pagination -- [x] Archive page -- [x] Analytics -- [x] SEO optimization -- [x] Better mobile devices support -- [ ] Multilingual +Remember to add [summary divider](https://gohugo.io/content-management/summaries/#manual-summary-splitting) to your post `.md` files to show blockquotes, links and codes with proper style in list pages' summary part. -## Installation +## Getting started Inside the folder of your Hugo site run: @@ -29,13 +42,7 @@ $ git submodule add https://github.com/amzrk2/hugo-theme-fuji.git themes/fuji For more information read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo. -## Notice - -Remember to add `````` code to your post ```.md``` files to show blockquotes, links and codes with proper style in list pages' summary part. - -## Getting started - -Copy the ```config.toml``` in the ```exampleSite```to the root of your Hugo site. Change strings as you like. +Then copy the `config.toml` in the `exampleSite`to the root of your Hugo site. Change strings as you like. Run Hugo's built-in local server: @@ -43,9 +50,17 @@ Run Hugo's built-in local server: $ hugo server ``` -If you want to generate your site, just run ```hugo``` or ```hugo --minify```. +If you want to generate your site, just run `hugo` or `hugo --minify`. + +## Update the theme + +Inside the folder of your Hugo site run: + +```bash +$ git submodule update --remote --merge +``` -## Advance configration +## Configration ### In-post license & comments @@ -58,7 +73,7 @@ noComments = true # Do not show comments in this post ### APlayer -APlayer support both global left-bottom-fixed or in-post, you can set these variables in site's ```config.toml``` or in post's front matter: +In-post APlayer supported, you can set these variables in post's front matter: ```toml playerName = "..." # Audio title or name @@ -67,72 +82,65 @@ playerURL = "..." # Audio URL, support aac, mp3, wav and ogg playerCover = "..." # Audio cover ``` -### Lazyload images +### Image zoom and lazyload settings -Lazyload images in posts, for example in ```[SITEROOT]/content/post/test.md```: +Zoomable, not lazyloaded: -```go-html-template -{{< lazyimg "This is alt text" "/img/sample.png" >}} -{{< lazyimg-row "This is alt text" "/img/sample.png" >}} -{{< lazyimg-col "This is alt text" "/img/sample.png" >}} +```markdown +![Alt text](test/example.png) ``` -```lazyimg``` will show a 16x9 placeholder before image is loaded, so ```lazyimg-row``` will show a 32x9 placeholder and ```lazyimg-col``` will show a 8x9 placeholder. You can choose different aspect ratios you want for different images. The placeholder image can be set in site's ```config.toml```. - -Note that if you use the origin markdown syntax to add images such as ```![This is alt text](/img/sample.png)```, it will not become a lazy image. - -### Custom CSS (need extended version of Hugo) - -You can create ```[SITEROOT]/assets/sass/custom.sass``` to cover sass variables of the theme. Just copy the variable which you need into it, check available variables below: +Zoomable, lazyloaded: -```sass -// colors -$color-primary: #8AA2D3; // apply to titles and icons -$color-primary-dark: #3B469B; // apply to links:hover and pagination:current -$color-secondary: #8F82BC; // apply to titles:hover, normal links, tags, pagination and sidebars -$color-mute: #9EA1A3; // apply to sub-title and post metadata -$color-spliter: #E5E2E4; // apply to divider and button background -$color-bg: #FFFFFD !default; // https://irocore.com/shiro/ +```html +{{< img-lazy "Alt text" "test/example.png" >}} +{{< img-lazy "row" "Alt text" "test/example.png" >}} +{{< img-lazy "col" "Alt text" "test/example.png" >}} +``` -// font size list -$font-size-logo: 2.5rem; // Logo Only -$font-size-l1: 1.75rem; // Primer CSS H1 -$font-size-l2: 1.5rem; // Primer CSS H2 -$font-size-l3: 1.25rem; // Primer CSS H3 -$font-size-l4: 1rem; // Primer CSS H4 & Normal Text +Not zoomable, not lazyloaded, optional ext link: -// divider css -$spliter: 2px solid $color-spliter; +```html +{{< img-nz "Alt text" "test/example.png" ["https://example.com"] >}} +``` -// fixed-width container variables -$container-width: 900px; -// large screen / desktop (900 + (16 * 2)) <= container + gutters -$width-lg: 932px; +Not zoomable, lazyloaded, optional ext link: -// font stacks -$body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; -// monospace font stack -$mono-font: "Cascadia Code", "SF Mono", "Fira Code", "Consolas", $body-font; -// the base text size -$body-font-size: $font-size-l4; +```html +{{< img-nz-lazy "Alt text" "test/example.png" ["https://example.com"] >}} +{{< img-nz-lazy "row" "Alt text" "test/example.png" ["https://example.com"] >}} +{{< img-nz-lazy "col" "Alt text" "test/example.png" ["https://example.com"] >}} ``` +`img-lazy` will show a 16x9 placeholder before image is loaded, so `img-lazy-row` will show a 32x9 placeholder and `img-lazy-col` will show a 8x9 placeholder. You can choose different aspect ratios you want for different images. The placeholder image can be set in site's `config.toml`. + ### Markdown render hook You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks). -You can use ```[SITEROOT]/layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab: +You can use `[SITEROOT]/layouts/_default/_markup/render-link.html` to decide whether or not links in the markdown content will open in new tab: ```html {{ .Text | safeHTML }} ``` -## Update the theme +### Custom fonts -Inside the folder of your Hugo site run: +**Hugo Extended version needed.** -```bash -$ git submodule update --remote --merge +You can create `[SITEROOT]/assets/_custom.sass` to cover sass variables of the theme. Just copy the variable which you need into it, check available variables below: + +```scss +$font-size-0: 2rem; // 16px->32px +$font-size-1: 1.75rem; // 16px->28px # +$font-size-2: 1.5rem; // 16px->24px ## +$font-size-3: 1.25rem; // 16px->20px ### +$font-size-4: 1rem; // 16px->16px #### + +$body-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', + 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; +$mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font; +$body-font-size: 16px; ``` ## Contributing @@ -141,10 +149,14 @@ Did you found a bug or got an idea for a new feature? Feel free to use the [issu ## License -The theme is released under the ```GNU General Public License v3.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE). +The theme is released under the ```Apache License 2.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE). ## Annotations Thanks to [community contributors](https://github.com/amzrk2/hugo-theme-fuji/graphs/contributors) for great help. -Thanks to developers for creating Hugo, Primer CSS, Font Awesome, APlayer and Lazysizes with the awesome community around these project. +- [Hugo](https://gohugo.io/) +- [Primer CSS](https://primer.style/css/) +- [APlayer](https://github.com/MoePlayer/APlayer) +- [lazysizes](https://github.com/aFarkas/lazysizes) +- [medium-zoom](https://github.com/francoischalifour/medium-zoom) -- cgit v1.2.3 From 594655b050145b7c3beab06166678940e613a79a Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Fri, 29 May 2020 16:55:27 +0800 Subject: Disqus support --- README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index 7647786..b0fef40 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Fuji -Fuji is a minimal Hugo theme inspired by Hexo theme [Murasaki](https://github.com/printempw/hexo-theme-murasaki/), with responsive grid system and GitHub Primer markdown style. +Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markdown style. ![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square) @@ -11,11 +11,13 @@ Fuji is a minimal Hugo theme inspired by Hexo theme [Murasaki](https://github.co - [Getting started](#getting-started) - [Update the theme](#update-the-theme) - [Configration](#configration) + - [Favicon](#favicon) - [In-post license & comments](#in-post-license--comments) - [APlayer](#aplayer) - [Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) - [Markdown render hook](#markdown-render-hook) - [Custom fonts](#custom-fonts) + - [Disqus identifier](#disqus-identifier) - [Contributing](#contributing) - [License](#license) - [Annotations](#annotations) @@ -62,6 +64,12 @@ $ git submodule update --remote --merge ## Configration +### Favicon + +Create `[SITEROOT]/layouts/partials/favicon.html` to cover theme's favicon. + +You can generate your favicons in [realfavicongenerator.net](https://realfavicongenerator.net/). + ### In-post license & comments You can set variables below in post's front matter to disable them: @@ -143,6 +151,10 @@ $mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font; $body-font-size: 16px; ``` +## Disqus identifier + +Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/layouts/partials/comment-disqus.html`. + ## Contributing Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](https://github.com/amzrk2/hugo-theme-fuji/issues) to let me know. -- cgit v1.2.3 From cf395763b26103b1b147bc40d8a3126e92996b97 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Sat, 30 May 2020 12:36:29 +0800 Subject: Update cfga --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index b0fef40..3345517 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd ![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square) +[English](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README.md) | [真正的白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) + ## Table of contents - [Live demos](#live-demos) @@ -32,7 +34,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd ## Notice -Remember to add [summary divider](https://gohugo.io/content-management/summaries/#manual-summary-splitting) to your post `.md` files to show blockquotes, links and codes with proper style in list pages' summary part. +Remember to add [summary divider](https://gohugo.io/content-management/summaries/#manual-summary-splitting) `` to your post `.md` files to show blockquotes, links and codes with proper style in list pages' summary part. ## Getting started @@ -157,12 +159,16 @@ Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/ ## Contributing -Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](https://github.com/amzrk2/hugo-theme-fuji/issues) to let me know. +Note that to keep the `master` branch clean, the main development work is made under `dev` branch. Please set base branch to `dev`, then make commitment or pull request. + +Feel free to use the [issue tracker](https://github.com/amzrk2/hugo-theme-fuji/issues). The theme has only been fully tested on Firefox, so if there are some problems when accessing with Chrome or others please also report an issue. ## License The theme is released under the ```Apache License 2.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE). +> © 2020 DSRKafuU(amzrk2) Twitter[@amzrk2](https://twitter.com/amzrk2) + ## Annotations Thanks to [community contributors](https://github.com/amzrk2/hugo-theme-fuji/graphs/contributors) for great help. -- cgit v1.2.3 From f14d5fa8f78a5756866002591aa479f8ccf5b582 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Sat, 30 May 2020 12:54:18 +0800 Subject: Custom highlight.js support --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 3345517..e67c1ba 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd ![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square) -[English](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README.md) | [真正的白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) +[English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) ## Table of contents @@ -153,7 +153,13 @@ $mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font; $body-font-size: 16px; ``` -## Disqus identifier +### Custom highlight.js language support + +Set `customHighlight` to `true` in `config.toml`, then set `customHighlightURL` to the path of your own `highlight.js`. + +Check [Getting highlight.js](https://highlightjs.org/download/) to download you own bundle of highlight.js. + +### Disqus identifier Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/layouts/partials/comment-disqus.html`. -- cgit v1.2.3 From ac62cbd84fc67401f4014b6e9d8ed6c6b175503e Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Sat, 30 May 2020 14:02:20 +0800 Subject: Update fa --- README.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'README.md') diff --git a/README.md b/README.md index e67c1ba..74d3ca2 100644 --- a/README.md +++ b/README.md @@ -173,6 +173,8 @@ Feel free to use the [issue tracker](https://github.com/amzrk2/hugo-theme-fuji/i The theme is released under the ```Apache License 2.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE). +- [Font Awesome - Creative Commons Attribution 4.0 International](https://fontawesome.com/license) + > © 2020 DSRKafuU(amzrk2) Twitter[@amzrk2](https://twitter.com/amzrk2) ## Annotations -- cgit v1.2.3 From 8009dfd8f5d33211a07d01319715fc3993979138 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Sun, 31 May 2020 16:31:27 +0800 Subject: Scripts adjustment --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index 74d3ca2..093748a 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markdown style. -![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square) +![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![CODE SIZE](https://img.shields.io/github/languages/code-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square) [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) -- cgit v1.2.3 From da23836b5dfe2d39cda0d89768dadd59b22a9baf Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Mon, 1 Jun 2020 21:49:10 +0800 Subject: DisqusJS support added --- README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 093748a..84df2dd 100644 --- a/README.md +++ b/README.md @@ -159,9 +159,16 @@ Set `customHighlight` to `true` in `config.toml`, then set `customHighlightURL` Check [Getting highlight.js](https://highlightjs.org/download/) to download you own bundle of highlight.js. -### Disqus identifier +### Disqus -Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/layouts/partials/comment-disqus.html`. +By default theme use these as identifier: + +```js +this.page.url = {{ $.Permalink }}; +this.page.identifier = {{ $.File.ContentBaseName }}; +``` + +Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/layouts/partials/comment-disqus.html`. Then you can customize the url and identifier, or switch to DisqusJS for accessing from Mainland China. If you want to use DisqusJS, please also remember to set `useDisqusJS = true` in your `config.toml` to load CSS. ## Contributing -- cgit v1.2.3 From c126016197296cbaa70c015849fa3005e67a2388 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Tue, 2 Jun 2020 11:33:28 +0800 Subject: Update README --- README.md | 76 ++++++++++++++++++++++++++++++--------------------------------- 1 file changed, 36 insertions(+), 40 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 84df2dd..fbb4f1d 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd ![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![CODE SIZE](https://img.shields.io/github/languages/code-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square) -[English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) +[English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [简体中文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) ## Table of contents @@ -18,17 +18,15 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd - [APlayer](#aplayer) - [Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) - [Markdown render hook](#markdown-render-hook) - - [Custom fonts](#custom-fonts) - - [Disqus identifier](#disqus-identifier) -- [Contributing](#contributing) + - [Disqus](#disqus) + - [Advanced configuration](#advanced-configuration) +- [Report und contributing](#report-und-contributing) - [License](#license) - [Annotations](#annotations) ## Live demos -[**Demo on gohugo.io (en)**](https://themes.gohugo.io/theme/hugo-theme-fuji/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/) - - +[**Live Demo (en)**](https://themes.gohugo.io/theme/hugo-theme-fuji/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/) ![Screenshot of Fuji](https://raw.githubusercontent.com/amzrk2/hugo-theme-fuji/master/images/screenshot.png) @@ -134,31 +132,6 @@ You can use `[SITEROOT]/layouts/_default/_markup/render-link.html` to decide whe {{ .Text | safeHTML }} ``` -### Custom fonts - -**Hugo Extended version needed.** - -You can create `[SITEROOT]/assets/_custom.sass` to cover sass variables of the theme. Just copy the variable which you need into it, check available variables below: - -```scss -$font-size-0: 2rem; // 16px->32px -$font-size-1: 1.75rem; // 16px->28px # -$font-size-2: 1.5rem; // 16px->24px ## -$font-size-3: 1.25rem; // 16px->20px ### -$font-size-4: 1rem; // 16px->16px #### - -$body-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', - 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; -$mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font; -$body-font-size: 16px; -``` - -### Custom highlight.js language support - -Set `customHighlight` to `true` in `config.toml`, then set `customHighlightURL` to the path of your own `highlight.js`. - -Check [Getting highlight.js](https://highlightjs.org/download/) to download you own bundle of highlight.js. - ### Disqus By default theme use these as identifier: @@ -170,26 +143,49 @@ this.page.identifier = {{ $.File.ContentBaseName }}; Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/layouts/partials/comment-disqus.html`. Then you can customize the url and identifier, or switch to DisqusJS for accessing from Mainland China. If you want to use DisqusJS, please also remember to set `useDisqusJS = true` in your `config.toml` to load CSS. -## Contributing +### Advanced configuration + +See [Report und contributing](#report-und-contributing). + +## Report und contributing Note that to keep the `master` branch clean, the main development work is made under `dev` branch. Please set base branch to `dev`, then make commitment or pull request. Feel free to use the [issue tracker](https://github.com/amzrk2/hugo-theme-fuji/issues). The theme has only been fully tested on Firefox, so if there are some problems when accessing with Chrome or others please also report an issue. +Inside the folder of theme root run: + +```bash +npm install +``` + +Dev: + +```bash +npm run dev +``` + +Build: + +```bash +npm run build +``` + ## License The theme is released under the ```Apache License 2.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE). -- [Font Awesome - Creative Commons Attribution 4.0 International](https://fontawesome.com/license) +- [Primer CSS - MIT](https://github.com/primer/css/blob/master/LICENSE) +- [APlayer - MIT](https://github.com/MoePlayer/APlayer/blob/master/LICENSE) +- [lazysizes - MIT](https://github.com/aFarkas/lazysizes/blob/gh-pages/LICENSE) +- [medium-zoom - MIT](https://github.com/francoischalifour/medium-zoom/blob/master/LICENSE) +- [DisqusJS - MIT](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE) +- [Font Awesome - CC 4.0](https://fontawesome.com/license) -> © 2020 DSRKafuU(amzrk2) Twitter[@amzrk2](https://twitter.com/amzrk2) +> © 2020 DSRKafuU(amzrk2) [Twitter](https://twitter.com/amzrk2) [GitHub]() ## Annotations Thanks to [community contributors](https://github.com/amzrk2/hugo-theme-fuji/graphs/contributors) for great help. -- [Hugo](https://gohugo.io/) -- [Primer CSS](https://primer.style/css/) -- [APlayer](https://github.com/MoePlayer/APlayer) -- [lazysizes](https://github.com/aFarkas/lazysizes) -- [medium-zoom](https://github.com/francoischalifour/medium-zoom) +Learned a lot in [Sukka's Blog](https://blog.skk.moe/). -- cgit v1.2.3 From e6afd04368f56af57b77f71be4dda5a4d9279a64 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Tue, 2 Jun 2020 12:57:59 +0800 Subject: CDN support added --- README.md | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'README.md') diff --git a/README.md b/README.md index fbb4f1d..27a93f5 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd - [Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) - [Markdown render hook](#markdown-render-hook) - [Disqus](#disqus) + - [Load main CSS und JS from CDN](#load-main-css-und-js-from-cdn) - [Advanced configuration](#advanced-configuration) - [Report und contributing](#report-und-contributing) - [License](#license) @@ -143,6 +144,10 @@ this.page.identifier = {{ $.File.ContentBaseName }}; Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/layouts/partials/comment-disqus.html`. Then you can customize the url and identifier, or switch to DisqusJS for accessing from Mainland China. If you want to use DisqusJS, please also remember to set `useDisqusJS = true` in your `config.toml` to load CSS. +### Load main CSS und JS from CDN + +Without the demand of custmize the CSS, you can uncomment `mainAssetsCDN = true` in `config.toml` to load `fuji.min.css` and `fuji.min.js` from jsDelivr. + ### Advanced configuration See [Report und contributing](#report-und-contributing). -- cgit v1.2.3 From 3df71601ae866aff9c2ae060ed1ac7407807fcc4 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 3 Jun 2020 13:58:49 +0800 Subject: New comment area & opt out of font awesome --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 27a93f5..a274f7c 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd - [APlayer](#aplayer) - [Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) - [Markdown render hook](#markdown-render-hook) - - [Disqus](#disqus) + - [Comments area](#comments-area) - [Load main CSS und JS from CDN](#load-main-css-und-js-from-cdn) - [Advanced configuration](#advanced-configuration) - [Report und contributing](#report-und-contributing) @@ -133,16 +133,18 @@ You can use `[SITEROOT]/layouts/_default/_markup/render-link.html` to decide whe {{ .Text | safeHTML }} ``` -### Disqus +### Comments area -By default theme use these as identifier: +主题支持三种评论系统，Disqus、utterances 和 DisqusJS (给大陆用户的)。 -```js -this.page.url = {{ $.Permalink }}; -this.page.identifier = {{ $.File.ContentBaseName }}; -``` +对于 Disqus 默认情况下使用 `{{ .Permalink }}` 作为 `url`，使用 `{{ .File.ContentBaseName }}` 作为 `identifier`。 + +Use the `[SITEROOT]/layouts/partials/comment-*.html` to cover `themes/fuji/layouts/partials/comment-*.html`. Then you can customize the url and identifier, or set multiple api key for using DisqusJS. If you want to use DisqusJS, please remember to set `disqusJSApi` to anything in your `config.toml` to load CSS. + +You can check my blog for example of using DisqusJS, remember to set to your own key when deploing: -Use the `[SITEROOT]/layouts/partials/comment-disqus.html` to cover `themes/fuji/layouts/partials/comment-disqus.html`. Then you can customize the url and identifier, or switch to DisqusJS for accessing from Mainland China. If you want to use DisqusJS, please also remember to set `useDisqusJS = true` in your `config.toml` to load CSS. +- [`config.toml`]() +- [`comment-disqusjs.html`]() ### Load main CSS und JS from CDN -- cgit v1.2.3 From 63433dd64a35ef1a45301849ee9550b1f74fefd4 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 3 Jun 2020 14:04:29 +0800 Subject: Update DisqusJS default settings --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index a274f7c..910bee8 100644 --- a/README.md +++ b/README.md @@ -139,9 +139,9 @@ You can use `[SITEROOT]/layouts/_default/_markup/render-link.html` to decide whe 对于 Disqus 默认情况下使用 `{{ .Permalink }}` 作为 `url`，使用 `{{ .File.ContentBaseName }}` 作为 `identifier`。 -Use the `[SITEROOT]/layouts/partials/comment-*.html` to cover `themes/fuji/layouts/partials/comment-*.html`. Then you can customize the url and identifier, or set multiple api key for using DisqusJS. If you want to use DisqusJS, please remember to set `disqusJSApi` to anything in your `config.toml` to load CSS. +Use the `[SITEROOT]/layouts/partials/comment-*.html` to cover `themes/fuji/layouts/partials/comment-*.html`. Then you can customize the url and identifier, or set multiple api key, add more settings for using DisqusJS. If you want to use DisqusJS, please remember to set `disqusJSApi` to anything in your `config.toml` to load CSS. -You can check my blog for example of using DisqusJS, remember to set to your own key when deploing: +You can check my blog for example of using DisqusJS and add more settings and api keys, remember to set to your own key when deploing: - [`config.toml`]() - [`comment-disqusjs.html`]() -- cgit v1.2.3 From 64b7d0f09832c7e0a74584be7a620adfef03093f Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 3 Jun 2020 14:05:59 +0800 Subject: Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index 910bee8..a8e5b0f 100644 --- a/README.md +++ b/README.md @@ -187,7 +187,7 @@ The theme is released under the ```Apache License 2.0```, for more information r - [lazysizes - MIT](https://github.com/aFarkas/lazysizes/blob/gh-pages/LICENSE) - [medium-zoom - MIT](https://github.com/francoischalifour/medium-zoom/blob/master/LICENSE) - [DisqusJS - MIT](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE) -- [Font Awesome - CC 4.0](https://fontawesome.com/license) +- [ionicons - MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE) > © 2020 DSRKafuU(amzrk2) [Twitter](https://twitter.com/amzrk2) [GitHub]() -- cgit v1.2.3 From d185ecccaabcaf4a9cced394d5b72f246bc2e5e7 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 15:56:03 +0800 Subject: Allow disable license globally --- README.md | 78 ++++++++++++++++++++++++++++++++++----------------------------- 1 file changed, 42 insertions(+), 36 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index a8e5b0f..8d0283c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Fuji +# 🍥 Fuji 🍥 Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markdown style. @@ -6,36 +6,36 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [简体中文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) -## Table of contents - -- [Live demos](#live-demos) -- [Notice](#notice) -- [Getting started](#getting-started) -- [Update the theme](#update-the-theme) -- [Configration](#configration) - - [Favicon](#favicon) - - [In-post license & comments](#in-post-license--comments) - - [APlayer](#aplayer) - - [Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) - - [Markdown render hook](#markdown-render-hook) - - [Comments area](#comments-area) - - [Load main CSS und JS from CDN](#load-main-css-und-js-from-cdn) - - [Advanced configuration](#advanced-configuration) -- [Report und contributing](#report-und-contributing) -- [License](#license) -- [Annotations](#annotations) - -## Live demos +## 📑 Table of contents + +- [💻 Live demos](#live-demos) +- [❗ Notice](#notice) +- [🐣 Getting started](#getting-started) +- [🆕 Update the theme](#update-the-theme) +- [⚙️ Configration](#configration) + - [🎨 Favicon](#favicon) + - [❌ In-post license & comments](#in-post-license--comments) + - [🎵 APlayer](#aplayer) + - [📷 Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) + - [⚓ Markdown render hook](#markdown-render-hook) + - [📨 Comments area](#comments-area) + - [⏱️ Load main CSS und JS from CDN](#load-main-css-und-js-from-cdn) + - [🔧 Advanced configuration](#advanced-configuration) +- [✏️ Report und contributing](#report-und-contributing) +- [📝 License](#license) +- [🤝 Annotations](#annotations) + +## 💻 Live demos [**Live Demo (en)**](https://themes.gohugo.io/theme/hugo-theme-fuji/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/) ![Screenshot of Fuji](https://raw.githubusercontent.com/amzrk2/hugo-theme-fuji/master/images/screenshot.png) -## Notice +## ❗ Notice Remember to add [summary divider](https://gohugo.io/content-management/summaries/#manual-summary-splitting) `` to your post `.md` files to show blockquotes, links and codes with proper style in list pages' summary part. -## Getting started +## 🐣 Getting started Inside the folder of your Hugo site run: @@ -55,7 +55,7 @@ $ hugo server If you want to generate your site, just run `hugo` or `hugo --minify`. -## Update the theme +## 🆕 Update the theme Inside the folder of your Hugo site run: @@ -63,15 +63,15 @@ Inside the folder of your Hugo site run: $ git submodule update --remote --merge ``` -## Configration +## ⚙️ Configration -### Favicon +### 🎨 Favicon Create `[SITEROOT]/layouts/partials/favicon.html` to cover theme's favicon. You can generate your favicons in [realfavicongenerator.net](https://realfavicongenerator.net/). -### In-post license & comments +### ❌ In-post license & comments You can set variables below in post's front matter to disable them: @@ -80,7 +80,13 @@ noLicense = true # Do not show license in this post noComments = true # Do not show comments in this post ``` -### APlayer +Or you can disable the license globally, set this below to false or comment it in your `config.toml`: + +```toml +showLicense = false +``` + +### 🎵 APlayer In-post APlayer supported, you can set these variables in post's front matter: @@ -91,7 +97,7 @@ playerURL = "..." # Audio URL, support aac, mp3, wav and ogg playerCover = "..." # Audio cover ``` -### Image zoom and lazyload settings +### 📷 Image zoom and lazyload settings Zoomable, not lazyloaded: @@ -123,7 +129,7 @@ Not zoomable, lazyloaded, optional ext link: `img-lazy` will show a 16x9 placeholder before image is loaded, so `img-lazy-row` will show a 32x9 placeholder and `img-lazy-col` will show a 8x9 placeholder. You can choose different aspect ratios you want for different images. The placeholder image can be set in site's `config.toml`. -### Markdown render hook +### ⚓ Markdown render hook You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks). @@ -133,7 +139,7 @@ You can use `[SITEROOT]/layouts/_default/_markup/render-link.html` to decide whe {{ .Text | safeHTML }} ``` -### Comments area +### 📨 Comments area 主题支持三种评论系统，Disqus、utterances 和 DisqusJS (给大陆用户的)。 @@ -146,15 +152,15 @@ You can check my blog for example of using DisqusJS and add more settings and ap - [`config.toml`]() - [`comment-disqusjs.html`]() -### Load main CSS und JS from CDN +### ⏱️ Load main CSS und JS from CDN Without the demand of custmize the CSS, you can uncomment `mainAssetsCDN = true` in `config.toml` to load `fuji.min.css` and `fuji.min.js` from jsDelivr. -### Advanced configuration +### 🔧 Advanced configuration See [Report und contributing](#report-und-contributing). -## Report und contributing +## ✏️ Report und contributing Note that to keep the `master` branch clean, the main development work is made under `dev` branch. Please set base branch to `dev`, then make commitment or pull request. @@ -178,7 +184,7 @@ Build: npm run build ``` -## License +## 📝 License The theme is released under the ```Apache License 2.0```, for more information read the [License](https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE). @@ -191,7 +197,7 @@ The theme is released under the ```Apache License 2.0```, for more information r > © 2020 DSRKafuU(amzrk2) [Twitter](https://twitter.com/amzrk2) [GitHub]() -## Annotations +## 🤝 Annotations Thanks to [community contributors](https://github.com/amzrk2/hugo-theme-fuji/graphs/contributors) for great help. -- cgit v1.2.3 From 8cd169db2d0d4306434894e7eeaa41ef906515f2 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 16:10:11 +0800 Subject: Allow disable toc globally --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 8d0283c..573140b 100644 --- a/README.md +++ b/README.md @@ -71,19 +71,21 @@ Create `[SITEROOT]/layouts/partials/favicon.html` to cover theme's favicon. You can generate your favicons in [realfavicongenerator.net](https://realfavicongenerator.net/). -### ❌ In-post license & comments +### ❌ In-post license, comments und toc You can set variables below in post's front matter to disable them: ```toml noLicense = true # Do not show license in this post noComments = true # Do not show comments in this post +noToc = true # Do not show toc in this post ``` -Or you can disable the license globally, set this below to false or comment it in your `config.toml`: +Or you can disable these globally, set these below to false or comment it in your `config.toml`: ```toml showLicense = false +showToc = false ``` ### 🎵 APlayer -- cgit v1.2.3 From 71c55c745781d27973526587b7124e0f292bf649 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 16:33:24 +0800 Subject: Update README --- README.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 573140b..bdd486a 100644 --- a/README.md +++ b/README.md @@ -8,26 +8,26 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd ## 📑 Table of contents -- [💻 Live demos](#live-demos) -- [❗ Notice](#notice) -- [🐣 Getting started](#getting-started) -- [🆕 Update the theme](#update-the-theme) -- [⚙️ Configration](#configration) - - [🎨 Favicon](#favicon) - - [❌ In-post license & comments](#in-post-license--comments) - - [🎵 APlayer](#aplayer) - - [📷 Image zoom and lazyload settings](#image-zoom-and-lazyload-settings) - - [⚓ Markdown render hook](#markdown-render-hook) - - [📨 Comments area](#comments-area) - - [⏱️ Load main CSS und JS from CDN](#load-main-css-und-js-from-cdn) - - [🔧 Advanced configuration](#advanced-configuration) -- [✏️ Report und contributing](#report-und-contributing) -- [📝 License](#license) -- [🤝 Annotations](#annotations) +- [💻 Live demos](#user-content--live-demos) +- [❗ Notice](#user-content--notice) +- [🐣 Getting started](#user-content--getting-started) +- [🆕 Update the theme](#user-content--update-the-theme) +- [⚙️ Configration](#user-content--configration) + - [🎨 Favicon](#user-content--favicon) + - [❌ In-post license, comments und toc](#user-content--in-post-license-comments-und-toc) + - [🎵 APlayer](#user-content--aplayer) + - [📷 Image zoom and lazyload settings](#user-content--image-zoom-and-lazyload-settings) + - [⚓ Markdown render hook](#user-content--markdown-render-hook) + - [📨 Comments area](#user-content--comments-area) + - [⏱️ Load main CSS und JS from CDN](#user-content--load-main-css-und-js-from-cdn) + - [🔧 Advanced configuration](#user-content--advanced-configuration) +- [✏️ Report und contributing](#user-content--report-und-contributing) +- [📝 License](#user-content--license) +- [🤝 Annotations](#user-content--annotations) ## 💻 Live demos -[**Live Demo (en)**](https://themes.gohugo.io/theme/hugo-theme-fuji/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/) +[**Live Demo (en)**](https://fuji.amzrk2.cc/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/) ![Screenshot of Fuji](https://raw.githubusercontent.com/amzrk2/hugo-theme-fuji/master/images/screenshot.png) -- cgit v1.2.3 From 8e1c40916aa880388fbac104641f3e7c84335847 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 18:10:44 +0800 Subject: Update metadata & fix comment checker --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index bdd486a..6ccce0f 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd ## 💻 Live demos -[**Live Demo (en)**](https://fuji.amzrk2.cc/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/) +[**Live Demo by Vercel (en)**](https://fuji.amzrk2.cc/) | [My Blog by Coding (zh-Hans)](https://blog.amzrk2.cc/) ![Screenshot of Fuji](https://raw.githubusercontent.com/amzrk2/hugo-theme-fuji/master/images/screenshot.png) -- cgit v1.2.3 From 03ecbe07ba8149d144fbb369dc13ab0a6a7519cb Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 18:16:21 +0800 Subject: Update live demo link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index 6ccce0f..e2e33b8 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd ## 💻 Live demos -[**Live Demo by Vercel (en)**](https://fuji.amzrk2.cc/) | [My Blog by Coding (zh-Hans)](https://blog.amzrk2.cc/) +[**Live Demo by Vercel (en)**](https://hugo-theme-fuji-demo.now.sh/) | [My Blog by Coding (zh-Hans)](https://blog.amzrk2.cc/) ![Screenshot of Fuji](https://raw.githubusercontent.com/amzrk2/hugo-theme-fuji/master/images/screenshot.png) -- cgit v1.2.3 From 914bf54c493b299268c293be33a8babf99b1cce2 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 20:08:43 +0800 Subject: Custom scss variable support --- README.md | 80 ++++++++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 27 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index e2e33b8..1a5505c 100644 --- a/README.md +++ b/README.md @@ -6,24 +6,25 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [简体中文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) +After the release of v2, **there may be major changes in the image lazyload shortcode** to make it easier to use.If you want to change the color scheme, please check [🔧 Advanced configuration](#-advanced-configuration). + ## 📑 Table of contents -- [💻 Live demos](#user-content--live-demos) -- [❗ Notice](#user-content--notice) -- [🐣 Getting started](#user-content--getting-started) -- [🆕 Update the theme](#user-content--update-the-theme) -- [⚙️ Configration](#user-content--configration) - - [🎨 Favicon](#user-content--favicon) - - [❌ In-post license, comments und toc](#user-content--in-post-license-comments-und-toc) - - [🎵 APlayer](#user-content--aplayer) - - [📷 Image zoom and lazyload settings](#user-content--image-zoom-and-lazyload-settings) - - [⚓ Markdown render hook](#user-content--markdown-render-hook) - - [📨 Comments area](#user-content--comments-area) - - [⏱️ Load main CSS und JS from CDN](#user-content--load-main-css-und-js-from-cdn) - - [🔧 Advanced configuration](#user-content--advanced-configuration) -- [✏️ Report und contributing](#user-content--report-und-contributing) -- [📝 License](#user-content--license) -- [🤝 Annotations](#user-content--annotations) +- [💻 Live demos](#-live-demos) +- [❗ Notice](#-notice) +- [🐣 Getting started](#-getting-started) +- [🆕 Update the theme](#-update-the-theme) +- [⚙️ Configration](#%EF%B8%8F-configration) + - [🎨 Favicon](#-favicon) + - [❌ In-post license, comments und toc](#-in-post-license-comments-und-toc) + - [🎵 APlayer](#-aplayer) + - [📷 Image zoom and lazyload settings](#-image-zoom-and-lazyload-settings) + - [⚓ Markdown render hook](#-markdown-render-hook) + - [📨 Comments area](#-comments-area) + - [🔧 Advanced configuration](#-advanced-configuration) +- [✏️ Issue und contributing](#%EF%B8%8F-issue-und-contributing) +- [📝 License](#-license) +- [🤝 Annotations](#-annotations) ## 💻 Live demos @@ -57,6 +58,8 @@ If you want to generate your site, just run `hugo` or `hugo --minify`. ## 🆕 Update the theme +You can watch (release only) this repo to receive update notifications. + Inside the folder of your Hugo site run: ```bash @@ -143,24 +146,47 @@ You can use `[SITEROOT]/layouts/_default/_markup/render-link.html` to decide whe ### 📨 Comments area -主题支持三种评论系统，Disqus、utterances 和 DisqusJS (给大陆用户的)。 +Theme supports Disqus, utterances and DisqusJS (for Mainland China user)。 -对于 Disqus 默认情况下使用 `{{ .Permalink }}` 作为 `url`，使用 `{{ .File.ContentBaseName }}` 作为 `identifier`。 +by default, disqus uses `{{ .Permalink }}` as `url`, `{{ .File.ContentBaseName }}` as `identifier`. Use the `[SITEROOT]/layouts/partials/comment-*.html` to cover `themes/fuji/layouts/partials/comment-*.html`. Then you can customize the url and identifier, or set multiple api key, add more settings for using DisqusJS. If you want to use DisqusJS, please remember to set `disqusJSApi` to anything in your `config.toml` to load CSS. -You can check my blog for example of using DisqusJS and add more settings and api keys, remember to set to your own key when deploing: - -- [`config.toml`]() -- [`comment-disqusjs.html`]() +### 🔧 Advanced configuration -### ⏱️ Load main CSS und JS from CDN +See [Report und contributing](#report-und-contributing). -Without the demand of custmize the CSS, you can uncomment `mainAssetsCDN = true` in `config.toml` to load `fuji.min.css` and `fuji.min.js` from jsDelivr. +If you just simply want to change the color scheme, set this in your `config.toml`: -### 🔧 Advanced configuration +```toml +useHugoPipes = true +``` -See [Report und contributing](#report-und-contributing). +This will make the theme use Hugo Pipes provided by Hugo Extended Vesion to compile the SCSS, then you can cover theme's internal SCSS with your own. Then create `[SITEROOT]/assets/scss/_custom.scss` cover variables in SCSS: + +```scss +$body-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; +$mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font; +$body-font-size: 16px; + +$light-color-primary: #8aa2d3; // https://irocore.com/aofuji/ +$light-color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/ +$light-color-focus: #3b469b; // https://irocore.com/aomurasaki/ +$light-color-mute: #9ea1a3; // https://irocore.com/suzu-iro/ +$light-color-font: #3f4551; // https://irocore.com/konnezu/ +$light-color-divider: #e5e2e4; // https://irocore.com/komachinezu/ +$light-color-bg: #fffffd; // https://irocore.com/shiro/ +$light-color-codebg: #f6f8fa; // GitHub + +$dark-color-primary: #8aa2d3; // https://irocore.com/aofuji/ +$dark-color-secondary: #bab1df; // https://irocore.com/fujimurasaki/ +$dark-color-focus: #e6e6e6; // https://irocore.com/shironezumi/ +$dark-color-mute: #9ea1a3; // https://irocore.com/suzu-iro/ +$dark-color-font: #c0c0c0; // https://irocore.com/gin-iro/ +$dark-color-divider: #4d5158; // Discord +$dark-color-bg: #2f3136; // Discord +$dark-color-codebg: #414449; // GitHub +``` ## ✏️ Report und contributing @@ -197,7 +223,7 @@ The theme is released under the ```Apache License 2.0```, for more information r - [DisqusJS - MIT](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE) - [ionicons - MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE) -> © 2020 DSRKafuU(amzrk2) [Twitter](https://twitter.com/amzrk2) [GitHub]() +> © 2020 DSRKafuU(amzrk2) [Twitter @amzrk2](https://twitter.com/amzrk2) [GitHub @amzrk2](https://github.com/amzrk2) ## 🤝 Annotations -- cgit v1.2.3