Skip to content

wujunze/hugo-theme-geek

master
Switch branches/tags
Code
This branch is 7 commits ahead, 35 commits behind mogeko:master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

mogege

Hugo License: MIT

A blog theme for Hugo.

Screenshot

This project is based on LeaveIt

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.

Features

  • Images lazy loading (Can I use?)
  • Automatically highlighting code (Support by highlight.js)
  • Dark/Light Mode
  • Support for embedded BiliBili video
  • Support hidden text ...

Requirements

Hugo 0.68.3 or higher

Hugo extended version, read more here

Installation

Navigate to your hugo project root and run:

git submodule add https://github.com/Mogeko/mogege themes/mogege

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

hugo server --minify --theme mogege

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/Mogeko/mogege  themes/mogege
cp -R themes/mogege/exampleSite/content .
hugo server --minify --theme mogege

Lazy loading

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

Make sure your browser version:

  • Chrome > 76
  • Firefox > 75

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

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

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.

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 = "mogege" # 主题

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


preserveTaxonomyNames = true

[blackfriday]
  hrefTargetBlank = true
  nofollowLinks = true
  noreferrerLinks = true

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

[menu]
  [[menu.main]]
    name = "Blog"
    url = "/post/"
    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 =
    author = ""                         # Author's name
    avatar = "/images/me/avatar.jpg"    # Author's avatar
    subtitle = ""                       # Subtitle
    home_mode = ""                      # post or other
    enableGitalk = true                 # gitalk 评论系统

    google_verification = ""

    description = "" # (Meta) 描述
    keywords = "" # site keywords

    beian = ""
    baiduAnalytics = ""
    googleAnalytics = "" # Google 统计 id

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

[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= 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.

The name of this project comes from the game Mogeko Castle, and the author's name also comes from this game. (this is another story)

About

A blog theme for hugo

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • SCSS 53.1%
  • HTML 39.4%
  • JavaScript 7.5%