hugo: theme<yinwang> yinwang.org 样式 hugo主题 ❤️ work
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes fix: default.md + stylesheet.css Dec 28, 2018
images
layouts feat: series: *** Jan 11, 2019
static/css
LICENSE.md Add: init Oct 7, 2018
README.md fix: img style with width+p Jan 16, 2019
theme.toml

README.md

hugo 的 yinwang.org 博客主题

hugo 准备

若你第一次使用 hugo, 请参照一下官方快速教程

直到 添加主题 那一步往下看

主题下载

  • 0. 记得初始化
git init
  • 1. 加入子模块
git submodule add https://github.com/chinanf-boy/gohugo-theme-yinwang.git themes/yinwang;
  • 2. 主题设置
echo 'theme = "yinwang"' >> config.toml
  • 2.1 加个文章
hugo new post/hello.md

最好再加个about.md

  • 3. 服务器启动
hugo server -D

config.toml 配置

baseURL = "http://example.org/"
languageCode = "en-us"
title = "我是"
theme = "yinwang"
#pygmentsCodeFences = true
#pygmentsCodefencesGuessSyntax = false
#pygmentsStyle = "dracula"
#pygmentsOptions = ['linenos']
# 代码高亮/chroma,hugo默认自带

[params]
    author = "yobrave Lee"
    github = "chinanf-boy"
    # gitlab = "yobrave"
    #googleAnalytics = "****"
    # 谷歌统计gtag
    highlight = "dracula" # 默认样式 `github`
    langs = ["go"]
    # 默认加载 highlight.min.js,但 一些不支持的语言, 你自己添加,
    # 其实也可以使用hugo自带的语法高亮器设置,不过我有点懒
    # single = false
    # 单页面的Home 按钮去除
    # menus = true
    # 我 想加更多目录
    # backgroundColor = "#fbf6ec"
    # 加点黄黄的背景色

功能添加

  • 1. 可通过<rawhtml>短语添加html内容

注意,只需要一个<rawhtml>,同时注意换行不要接-多个空格。(这个Hugo功能我也没怎么搞懂,写法不对请指出)

<rawhtml>
<style> 
div.inner {
margin: 0 4%; 
}
tr td:nth-child(2n){
background-color: #ffdfac;
}
tr td:not(:first-child) code {
background-color: #ffdfac;
font-size: 14px;
margin: 1px;
display: block;
padding: 5px;
text-align: center;
}
tr th:not(:first-child)  {
width:14%;
}
th {
    position: static;
}
</style>

具体例子:llever.com | 源文件


  • 2. 使用rawcss,使用css内容(主要是修复< >符号的转义问题)
{{% rawcss %}}.blog-post > h2:first-child {display:none}{{% /rawcss %}}

具体例子: llever.com | 源文件

  • 3. 单文件页面,添加独有的 css 文件

可通过css来完成,点击以下例子

title: 'NES.css 任天堂风格css框架 Yummy'
date: 2018-12-06T12:23:36+08:00
categories: ['css']
tags: ['NES']
description: 'NES.css 任天堂风格css框架'
css: # 当你输入这个字段,会覆盖掉默认css文件
  [
    '/css/main.css', # 这个就是默认,只在博文页面 css文件
    '/css/stylesheet.css'  # 这个用来存有主页与博文,相同的css格式的文件
    'https://unpkg.com/nes.css@0.0.2/css/nes.min.css',
  ]

网页可看:css格式添加说明

  • 4. series系列博文
series: "我是系列博文哦"

具体操作可看llever.com,与 js脚本

常见问题

  • 0. : 想加其他统计脚本?

关于百度的统计工具,因为我很少用,若有需要可添加到footer.html,再加个配置config.toml可控私人 ID,就好,等你 PR 噢

  • 1. : 我 想正常添加,更多目录
[params]
    menus = true

[[menu.main]]
name = "分类"
url = "/categories/"

[[menu.main]]
name = "标签"
url = "/tags"

[[menu.main]]
  name = "Home"
  url = "/"
  # weight = 10
# 这个权重,是衡量顺序的

提示:main 的 html 顺序是相反的, 若想自定义顺序,添加 权重值

  • 2. : 我 想单页面的 Home 按钮去除
[params]
    single = false

本主题

是由basics hugo 主题, 拿来改的