A elegance, clean Hugo Theme with high interaction for blogger

  • By xioyito
  • Last update: Dec 13, 2022
  • Comments: 4

English | 简体中文

Preview

NewBee Preview

Demo Site

You can see this theme in action on demo site.

Browser support

These browsers support NewBee perfectly now：

  • Chrome
  • Edge

More browser supports are coming.

Features

  • Functions
    • Syntax Highlight
    • Custom Header
    • Custom footer
    • A sidebar can be open or close at all times
    • Back top
    • Extended Shortcodes
    • Valine comment
    • Music player based on Aplayer and MetingJS
    • Count of Visitor and views
  • Components
    • Archive(posts) page
    • Categories terms and taxonomies
    • Tags terms and taxonomies
    • Author card
    • Pre and Next button
    • sponsor
  • Other
    • Responsive
    • Light Neumorphism style
    • High interaction
    • Smooth transitions

Quick Start

For more information, please go to: https://gohugo.io/getting-started/quick-start/

Install Hugo(extended version)

The following is For macOS system, other systems see: https://gohugo.io/getting-started/installing/

Homebrew

~ % brew install hugo

MacPorts

~ % port install hugo

install NewBee

First, you need to create a new site(e.g. my-blog) by Hugo:

~ % hugo new site my-blog

You have 3 methods to install NewBee after creating a new site:

Method 1

download the theme manually by going to https://github.com/xioyito/NewBee and pasting it to themes in your root directory.

Method 2

clone it directly to themes:

my-blog % git clone https://github.com/xioyito/NewBee.git themes/NewBee

Method 3

To update theme easily, you can include it as a git submodule:

~ % cd my-blog
my-blog % git init
my-blog % git submodule add https://github.com/xioyito/NewBee.git themes/NewBee

configuration

That's simple, just copy:

baseURL = 'http://www.example.com'
languageCode = 'en-us'

# website title
# 网站标题
title = 'NewBee'
# theme
# 主题
theme = "NewBee"
# i18n
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false
# whether to use robots.txt
# 是否使用 robots.txt
enableRobotsTXT = true
# length of summary
# 摘要的字数限制
summaryLength = 50

hasCJKLanguage = true
[author]
    name = "xioyito"
    description = "Be Water, My Friend"
    # profile photo of author in author card
    # 作者头像
    image = "/images/author.jpeg"
    # link of followme in author card and footer
    # 作者卡片里 followme 和页脚作者的链接
    link = "https://example.com"

# Taxonomies
[taxonomies]
    category = "categories"
    tag = "tags"
    
[params]

    # page configuration
    # 页面配置  
    [params.page]
        # site font
        # 网站字体
        font = "sans-serif"

        # top image in home page, note that the "/" in path is necessary, the same applies below
        # 主页的顶部图，路径开头的”/“是必需的。下同
        homeTopImg = "/images/home.jpg"
        # title in home top image, support Markdown
        # 主页标题，支持Markdown语法
        homeTitle = "XIOYITO"
        # font size(px)
        # 主页标题字号（单位：px）
        homeTitleFontSize = 40
        # content in home top image, support Markdown
        # 主页内容，支持Markdown语法
        homeContent = "Be Water, My Friend"
        # font size(px)
        # 主页内容字号（单位：px）
        homeContentFontSize = 20

        # top image in categories terms page
        # 分类页面的顶部图
        categoryTopImg = "/images/categories.jpg"
        # description of categories terms page
        # 分类的描述
        categoryDes = "description of categories page"

        # top image in tags terms page
        # 标签页面的顶部图
        tagTopImg = "/images/tag.jpg"
        # description of tags terms page
        # 标签页面的描述
        tagDes = "description of tags page"

        # top image in archives(posts) page
        # 归档（所有文章）页面的顶部图
        archivesTopImg = "/images/archive.jpg"
        # description of archives(posts) page
        # 归档（所有文章）页面的描述
        archivesDes = "description of archives(posts) page"

        # top image in about page
        # 关于页面的顶部图
        aboutTopImg = "/images/about.jpg"
        # description of about page
        # 关于页面的描述
        aboutDes = "description of about page"

        # default image for a post without "image" param
        # 当文章没有设置图片时，将用此图来替代
        postsTopImg = "/images/default.jpg"
        
        # 主页文章显示数量
        maxHomePostCount = 3
        # 相关文章显示数量
        maxPageRelatedCount = 5
        # 最新文章显示数量
        maxPageNewestCount = 5

    # Valine comment
    # Valine评论（详情请移步：https://valine.js.org/）
    [params.valine]
        # 是否开启Valine评论系统
        enable = false
        # appid，具体请参考：https://valine.js.org/configuration.html#appId
        appid = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
        # appKey，具体请参考：https://valine.js.org/configuration.html#appKey
        appkey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
        # 输入框提示文字
        placeholder = 'input your comment'
        # 头像，具体请参考：https://valine.js.org/avatar.html
        avatar = 'robohash'
        # 评论时要求的必须填写项，可选值：['nick']或['nick','mail']
        requiredFields = ['nick']
        # 文章访问量统计
        visitor = true
        # 单页最大评论数目
        pageSize = 10

    # footer
    # 页面底部配置
    [params.footer]
        # whether to enable footer
        enable = true
        # copyright
        copyRight = true
        from = 2022
        # wheher to enable count of visitor and view
        visitor = true
        # wheher to enable theme information
        themeAndHugo = true

    # aplayer, se  more: https://aplayer.js.org/#/zh-Hans/
    # 音乐播放器配置，详情请移步：https://aplayer.js.org/#/zh-Hans/
    [params.aplayer]
        enable = false
        server = "netease"
        type = "playlist"
        id = 752439587
        fixed = true
        autoplay = false
        loop = "all"
        order = "random"
        preload = "auto"
        list_folded = "ture"
        list_max_height = "500px"
        lrc_type = 1

[menus]
    # navigation entries
    # 导航栏子项
    [[menus.main]]
        # 名称
        name = "首页"
        # 路径
        url = "/"
        # order weight, more small more close to left, at least 1
        # 排序的权重，越小越靠前（左），最小为1
        weight = 1
        # icon from FontAwesome in front of single entry
        # 图标，本主题使用的图标来自FontAwesome
        pre = "<i class='fa fa-home'></i>"
    [[menus.main]]
        name = "文章"
        url = "/posts"
        weight = 2
        pre = "<i class='fa fa-book'></i>"
    [[menus.main]]
        name = "分类"
        url = "/categories"
        weight = 3
        pre = "<i class='fa fa-folder-open'></i>"
    [[menus.main]]
        name = "标签"
        url = "/tags"
        weight = 4
        pre = "<i class='fa fa-tags'></i>"        
    [[menus.main]]
        name = "关于"
        url = "/about"
        weight = 5
        pre = "<i class='fa fa-info-circle'></i>"

    # social entries
    # 博主卡片社交链接，最多不超过6个
    [[menus.social]]
        name = "GitHub"
        url = "https://github.com/xioyito"
        pre = "<i class='fa fa-github'></i>"
        weight = 1
    [[menus.social]]
        name = "YouTube"
        url = "https://www.youtube.com"
        pre = "<i class='fa fa-youtube'></i>"
        weight = 2

    # sponsor entries, not more than 3
    # 赞赏，最多支持3个
    [[menus.appreciate]]
        name = "微信"
        url = "/images/appreciate/Wechat.jpeg"
    [[menus.appreciate]]
        name = "支付宝"
        url = "/images/appreciate/Alipay.jpeg"
    
# [permalinks]
#     posts = '/:year/:month/:title/'


# related configuration, see more: https://gohugo.io/content-management/related/
# 相关文章的配置。详情请移步：https://gohugo.io/content-management/related/
[related]
    # 取值0-100之间，越小匹配到的文章越多，但准确性稍差
    threshold = 0
    # 允许包含最新的文章
    includeNewer = true
    # 设置为true时，可以在索引和查询中同时使用小写关键字。
    # 这可能会在轻微的性能损失下提供更准确的结果。
    # 也可以在下面的子项中分别设置此值。
    toLower = false

    [[related.indices]]
        # 匹配类别
        name = "categories"
        # 一个整数权重，表示此参数相对于其他参数的重要性。
        # 可以是0，有关闭这个索引的效果，甚至是负数。
        # 使用不同的值进行测试，以查看最适合您的内容的值。
        weight = 100
        # 同上toLower
        toLower = false

    [[related.indices]]
        name = "tags"
        weight = 80
        toLower = false

    [[related.indices]]
        name = "date"
        weight = 10

# Markup related configuration in Hugo
# Hugo 解析文档的配置
[markup]
    # syntax highlight, see more: https://gohugo.io/functions/highlight/
    # 语法高亮，详情请移步：https://gohugo.io/functions/highlight/
    [markup.highlight]
        codeFences = true
        guessSyntax = false
        hl_Lines = ''
        lineAnchors = ''
        lineNoStart = 1
        # 显示每一行代码前的序号
        lineNos = true
        anchorLineNos = false
        lineNumbersInTable = true
        noClasses = false
        noHl = false
        # 代码高亮样式，更多样式请移步：https://xyproto.github.io/splash/docs/
        style = 'monokailight'
        tabWidth = 4

    # enable the following code if there are html statements in your md file
    # 如果md文件中有html语句，请启用以下代码
    # [markup.goldmark]
    #     [markup.goldmark.renderer]
    #         unsafe = true

to config.toml file in your Hugo root directory, you can change it if you need and you know what you are doing.

New post

create a new post:

my-blog % hugo new "posts/first-post.md"

create about page:

my-blog % hugo new "about/_index.md"

Now:

my-blog % hugo server -D

go to http://localhost:1313/ in your browser. From now your browser will refresh automatically when the files in your site changes , so you don’t need to refresh your browser every time.

Customize NewBee

if you want to override some of the styles, just create a file static/css/_custom.css and add your own styles into this file, it will work.

Update NewBee

my-blog % git submodule update --rebase --remote

Help NewBee be better

Found a bug?

If you find any bugs, welcome to use Issue or create a new Pull Request to fix the issue.

A NewBee theme user?

I'd appreciate your support, if you want to share your site, please make a contribution and add your site to the list.

Sponsoring

If you like the theme and support my work, just do:

Thank you.

License

Copyright © 2022 xioyito

NewBee theme is released under the MIT License, see more: https://github.com/xioyito/NewBee/blob/master/LICENSE

Github

https://github.com/xioyito/NewBee

Comments(4)

  • 1

    一点样式问题与建议

    作者你好，我在使用过程中遇到了一点关于主题样式的问题

    1. 在暗模式下，markdown的行类代码块非常亮，几乎看不清
    2. 使用该主题提供的highlight，在暗模式下，python代码段，导入库颜色非常暗，例如：import os 这段代码，os两个字的颜色非常暗

    当然这并不太影响使用，可以采用加粗或你提供的note来代替行类样式，以及不使用highlight即可

    除此之外还有一点小建议，不知道是否可行

    因为hugo的核心理念就是将内容与代码逻辑分离，如果在文章内大量使用你或官方提供的shortcodes，这会大大降低文章的可移植性

    而且许多markdown编辑器，如typora，并不支持hugo的语法，大量使用shortcodes，写起来也很难受

    所以可不可以直接用主题样式代替markdown的原本渲染模式？

    比如用你提供的默认note，代替接管markdown的行内代码块，highlight接管markdown的代码块，提供一个全局配置，供用户选择是否使用

    我目前只是大致看了一下hugo的官方文档，并不清楚这种方案的可行性，如有不妥请忽略

  • 2

    图片无法更改、汉化不彻底、页面丢失

    hugo版本为0.105.0，并已按照readme中的步骤完成操作并可正常在本运行

    1.我用自己的图片覆盖了该图片："根站点\themes\NewBee\static\images\author.jpeg""， 但依旧显示的默认原图 2.我更改了配置中的 defaultContentLanguage = "zh"，但页面顶部的home、posts等依旧是英文 3. 点入任意一篇文章，右边的作者栏，点击分类、标签，会显示：“抱歉，页面好像走丢了”

    很喜欢作者的这个主题！但我对前端了解的不多，不清楚是我的操作问题还是该主题本身的bug

  • 3

    文章列表页面没有分页功能

    很喜欢作者这个主题，刚才测试了下，

    1、发现列表页面没有分页功能，请问下后期是否会增加分页功能？

    2、页面切换loging的比较慢，主要是以下几个请求，几乎都会超过1秒，联通500MB宽带情况下： https://api.ip.sb/jsonip?callback=cb_1g7m0i2&t=16575224394 https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0 这个是否可以优化？

  • 4

    Not sure where to create new posts.

    Hey man, awesome theme! I just can't seem to create a new post. I followed the instructions in the read me, but when I got to the :

    hugo new "posts/first-post.md"

    I was receiving an error on my windows machine. I think because there's no "posts" directory by default. So I created one. That didn't work. More errors. So I tried creating the "posts" directory in a new directory called "en." I played around with the file path for a while, but couldn't seem to create a post. I tried again from my linux machine and was able to create the post, but the website couldn't seem to find the post I created in the browser.

    Not sure if something in the config file needs to be changed? Any help would be awesome.

    Thanks again.

Popular Tag

Related