diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 148 |
1 files changed, 80 insertions, 68 deletions
@@ -1,25 +1,38 @@ # 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. + +    + +## 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/) - +<!--more--> + + -## 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 ```<!--more-->``` 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 + ``` -```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 ``````, 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 <a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a> ``` -## 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) |