nicesima(偽島, ニセシマ)

A blog theme for Hugo.

This project is based on mogege which based on LeaveIt

By Mogeko, the author of mogege:

Because the author of LeaveIt seems to have abandoned this project, but I prefer this theme, so I simply reopened a new project.

At this stage, I mainly integrate the part I modified with LeaveIt, and will add more features in the future.

I like this theme named mogege, but some features is modified for complying with my habits. So that maybe not fit the others.

Features

• Images lazy loading (Can I use?)
• Automatically highlighting code (Support by highlight.js)
• TeX Functions (Support by KaTeX)
• PlantUML (Sequence diagram, Usecase diagram, Class diagram ...)
• Dark/Light Mode
• Support for embedded BiliBili video
• Support hidden text ...

Here is a table showing the similarities and differences between nicesima and mogege and LeaveIt:

Features	nicesima	mogege(81e57f)	LeaveIt
Categories	Optimization	Yes	Yes
Tags	inherit	Yes	Yes
RSS support	inherit	Yes	Yes
sitemap.xml	inherit	Yes	Yes
robots.txt	inherit	Yes	Yes
Quote	inherit	Optimization	Yes
Images lazy loading	inherit	Optimization*	Yes
Dark/Light Mode	inherit	Optimization	Yes
Highlighting code	Optimization	Optimization	Yes
Comment area	Optimization	Optimization	Yes
TeX Functions	inherit	Yes
PlantUML	inherit	Yes
BiliBili video (shortcodes)	inherit	Yes
Hidden text (shortcodes)	Optimization	Yes
Easy-searched text (shortcodes)	Yes
Social button	Optimization	Yes	Yes
TOC	Yes
lightGallery			Yes

Requirements

Hugo-extended 0.80.0 or higher

Hugo extended version, read more here

Installation

Navigate to your hugo project root and run:

git submodule add https://github.com/niceRAM/nicesima themes/nicesima

Then run hugo (or set theme: nicesima in configuration file)

hugo server --minify --theme nicesima

Creating site from scratch

Below is example how to create new site from scratch

hugo new site mydocs; cd mydocs
git init
git submodule add https://github.com/niceRAM/nicesima  themes/nicesima
cp -R themes/nicesima/exampleSite/content .

hugo server --minify --theme nicesima

Lazy loading

If your browser is supported, we will lazy loading <img> and <iframes>

Make sure your browser version:

• Chrome > 76
• Firefox > 75

TeX Functions

Note: list of TeX functions supported by KaTeX

To enable KaTex globally set the parameter math to true in a project's config.toml

To enable KaTex on a per page basis include the parameter math: true in content files.

Example

% Inline math:
$$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$

% or
% Block math:
$$
 \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$

PlantUML

PlantUML is supported by the official server

To enable KaTex globally set the parameter plantuml to true in a project's config.toml

To enable KaTex on a per page basis include the parameter plantuml: true in content files.

You can insert PlantUML in the post by:

```plantuml
PlantUML syntax
```

For example:

@startuml
Bob -> Alice : hello

create Other
Alice -> Other : new

create control String
Alice -> String
note right : You can also put notes!

Alice --> Bob : ok

@enduml

Embedded BiliBili video

You can embed BiliBili videos via Shortcodes, just provide the AV 号/BV 号 of the bilibili video

You can also use the PV 号 to control the 分 P (default: 1)

{{< bilibili [AV号/BV号] [PV号] >}}

Click here for examples

Hidden text

You can use "hidden text" to hide spoiler content

{{< spoiler >}} HIDDEN TEXT {{< /spoiler >}}

Click here for examples

Easy-searched text

You can use "Easy-searched text" to set as a link for proper nouns that only need to search to find relevant explanations. For readers, just click on the links to search easily.

{{< es Easy-searched-text >}}

You can also use the search-engine to choose which engine to use.

{{< es Easy-searched-text search-engine >}}

By default, Google will be used. You can change it to others by the following.

# Use "Bing"
{{< es Easy-searched-text bing >}}

# Use "GitHub"
{{< es Easy-searched-text github >}}
or
{{< es Easy-searched-text gh >}}

# Use "Bilibili"
{{< es Easy-searched-text bilibili >}}
or
{{< es Easy-searched-text blbl >}}

# Use "Baidu"
{{< es Easy-searched-text baidu >}}
or
{{< es Easy-searched-text bd >}}

And you can set any of the above search engines as the default in config.toml by the following:

[params]
  easySearchedEngine = "github"

TOC

The TOC can be enabled by the following config.

[params]
  toc = true

And you can fold inactive TOC automatically:

[params]
autoCollapseToc = true

utteranc comment system

This blog supports the utteranc comment system.

It is lighter and more powerful than Gitalk.

To use utteranc, you need make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.

Then enable utteranc in config.toml

[params]
    enableUtteranc = true

Then Configuration: (For more settings, please refer to HomePage)

[params.utteranc] # Homepage: https://utteranc.es
    repo = "" # The repo to store comments
    issueTerm = "title" # the mapping between blog posts and GitHub issues. 
    theme = "preferred-color-scheme" # Theme
    crossorigin = "anonymous" # default: anonymous

Gitalk comment system

This blog supports the gitalk comment system. To use gitalk, you need to apply for a Github Application. For details, please refer to here.

Then enable gitalk in config.toml

[params]
    enableGitalk = true

Notice: The demo server of CORS Anywhere has been very limited by January 2021, 31st. If you'd like to enable Gitalk, you should build a personal proxy server by cors-anywhere, then set the url in proxy like the following.

Then provide your Client ID and Client Secret from Github Application in config.toml

[params.gitalk] # Github: https://github.com/gitalk/gitalk
    clientID = "[Client ID]" # Your client ID
    clientSecret = "[Client Secret]" # Your client secret
    repo = "" # The repo to store comments
    owner = "" # Your GitHub ID
    admin = "" # Required. Github repository owner and collaborators. (Users who having write access to this repository)
    id = "location.pathname" # The unique id of the page.
    labels = "gitalk" # Github issue labels. If you used to use Gitment, you can change it
    perPage = 15 # Pagination size, with maximum 100.
    pagerDirection = "last" # Comment sorting direction, available values are 'last' and 'first'.
    createIssueManually = true # If it is 'false', it is auto to make a Github issue when the administrators login.
    distractionFreeMode = false # Enable hot key (cmd|ctrl + enter) submit comment.
    proxy = "" # the proxy built by cors-anywhere,.etc.

Custom CSS/JavaScript

Support custom CSS or JavaScript

Place your custom CSS and JavaScript files in the /static/css and /static/js directories of your blog, respectively

static
├── css
│   └── _custom.css
└── js
    └── _custom.js

Then edit in config.toml:

[params.custom]
    css = ["css/_custom.css"]
    js = ["js/_custom.js"]

Currently only supports CSS does not support Sass

Configuration

There are few configuration options you can add to your config.toml file.

baseURL = ""            # <head> 里面的 baseurl 信息，填你的博客地址
title = ""              # 浏览器的标题
languageCode = "zh-cn"  # 语言
hasCJKLanguage = true   # 开启可以让「字数统计」统计汉字
theme = "nicesima"      # 主题

paginate = 11           # 每页的文章数
enableEmoji = true      # 支持 Emoji
enableRobotsTXT = true  # 支持 robots.txt

# Chroma 代码高亮 http://gohugo.io/content-management/syntax-highlighting/
pygmentsUseClasses=true # 使用自定义的代码高亮样式
[markup]
  [markup.highlight]
    codeFences = true
    anchorLineNos = false
    guessSyntax = false
    hl_Lines = ""
    lineAnchors = ""
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = false
    noClasses = true
    style = "monokai"
    tabWidth = 4

[Permalinks]
 posts = "/:year/:filename"

[menu]
  [[menu.main]]
    name = "Blog"
    url = "/posts/"
    weight = 1

  [[menu.main]]
    name = "Categories"
    url = "/categories/"
    weight = 2

  [[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 3

  [[menu.main]]
    name = "About"
    url = "/about/"
    weight = 4

[params]
  since = 2020
  author = ""                         # Author's name
  avatar = "/images/me/avatar.jpg"    # Author's avatar
  subtitle = ""                       # Subtitle
  home_mode = ""                      # post or other
  enableGitalk = true                 # gitalk 评论系统

  description = ""                    # (Meta) 描述
  keywords = ""                       # site keywords
  license = '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'

  toc = true                          # switch catalog
  autoCollapseToc = false             # auto expand and collapse toc

  [params.gitalk] # Github: https://github.com/gitalk/gitalk
    clientId = "" # Your client ID
    clientSecret = "" # Your client secret
    repo = "" # The repo to store comments
    owner = "" # Your GitHub ID
    admin = "" # Required. Github repository owner and collaborators. (Users who having write access to this repository)
    id = "location.pathname" # The unique id of the page.
    labels = "gitalk" # Github issue labels. If you used to use Gitment, you can change it
    perPage = 15 # Pagination size, with maximum 100.
    pagerDirection = "last" # Comment sorting direction, available values are 'last' and 'first'.
    createIssueManually = false # If it is 'false', it is auto to make a Github issue when the administrators login.
    distractionFreeMode = true # Enable hot key (cmd|ctrl + enter) submit comment.
    proxy = "" # the proxy built by cors-anywhere,.etc.