Hugo 下的 Jane 主题是基于 even 主题进行的重新改造,主要有以下特色:
- 响应式设计
- 多国语言支持
- 支持多个 Shortcode
- 单独设计的标签页和分类页
- 支持社交网站链接
- 优秀的分页、目录、注脚样式
- 使用更快的 Chroma 代码高亮
- 自定义 css、js、head
- 支持子目录
- 搜索引擎优化
初始化的样式展示的元素繁多可能不太符合每个人的实际需求,我们需要对需要显示的内容样式进行修改来增强站点整体的美感。下面就介绍如何改靠自己的独特主题:
默认情况下生成的站点部署后我我们会发现在手机上点按菜单位置无效,无法正常显示下拉菜单。我们可以按照下面的方法让菜单能在移动端正常显示。
Jane 主题移动端无法显示下拉菜单的解决方法
themes\jane\layouts\partials\scripts.html #根据路径找到这个文件,删除其中的 integrity 属性
<script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}" crossorigin="anonymous"></script>
另外现在人们通过 RSS 客户端阅读的方式已经越来越少,Jane 主题内的 RSS 订阅图标我个人觉得太过多余不符合我追求简洁的审美观,所以也要对它进行隐藏处理。具体处理方法如下:
Jane 主题底部 RSS 订阅图标删除
./layouts/partials/social_links.html #在 themes 文件夹下根据路径找到这个文件,删除以下代码
<!--
{{/* RSS icon */}}
{{ with .Site.GetPage "home" -}}
{{- with .OutputFormats.Get "RSS" -}}
<a href="{{ .Permalink }}" rel="noopener {{ .Rel }}" type="{{ .MediaType.Type }}"
class="iconfont" title="rss" target="_blank">
{{ partial "svg/rss.svg" }}
</a>
{{ end -}}
{{- end -}}
-->
其它需要设置的细节内容过多,而且过于简单,下面统一做个总结:
Jane 主题配置文件详细解释
# 基础设置
#-------------------------------------------------------------------
baseURL = "https://sixdian.com/" # 博客部署网址
title = "六点随记" # 网站名称
enableRobotsTXT = true # 是否支持Robots协议
enableEmoji = true # 是否支持Emoji表情符号
theme = "jane" # 选用jane主题
hasCJKLanguage = true # 自动检测是否包含 中文\日文\韩文
paginate = 10 # 首页每页显示的文章数目
rssLimit = 20 # 限制 Rss 文章输出数量
disqusShortname = "" # disqus_shortname
googleAnalytics = "" # 配置google统计
copyright = "" # 默认为下面配置的author.name,
# 关于语言
defaultContentLanguage = "zh-cn" # 默认博客语言环境
[languages.zh-cn] # 语言支持
languageCode = "zh-cn"
# 关于语法高亮,具体使用可查看https://gohugo.io/content-management/syntax-highlighting/
PygmentsCodeFences = true # Enable syntax highlighting with GitHub flavoured code fences
PygmentsUseClasses = true # Use CSS classes to format highlighted code
PygmentsCodefencesGuessSyntax = true #
PygmentsOptions = "linenos=table" # 开启显示行号
[author] # 作者名称
name = "sixdian"
[sitemap] # 站点地图
changefreq = "weekly"
priority = 0.5
filename = "sitemap.xml"
#-------------------------------------------------------------------
#菜单设置
#-------------------------------------------------------------------
[[menu.main]]
name = "主页"
weight = 10
identifier = "home"
url = "/"
[[menu.main]]
name = "归档"
weight = 20
identifier = "archives"
url = "/post/"
[[menu.main]]
name = "分类"
weight = 30
identifier = "categories"
url = "/categories/"
[[menu.main]]
name = "标签"
weight = 40
identifier = "tags"
url = "/tags/"
[[menu.main]]
name = "关于"
weight = 50
identifier = "about"
url = "/about/"
[[menu.main]]
name = "友链"
weight = 60
identifier = "links"
url = "/links/"
[[menu.main]]
name = "订阅"
weight = 70
identifier = "feed"
url = "/index.xml"
#-------------------------------------------------------------------
#其他参数设置
#-------------------------------------------------------------------
[params]
since = "2022" # 站点建立时间
homeFullContent = false # 主页是否显示全部文章内容
rssFullContent = true # if false, Rss feed instead of the summary
logoTitle = "六点随笔" # 博客标题,默认值是上面设置的title,也就是网址名称
keywords = ["Hugo", "linux", "emacs", "CPU"] # 关键字
description = "" # 网页描述
archive-paginate = 30 # 归档、标签、分类每页显示的文章数目
dateFormatToUse = "2006-01-02" # 日期显示格式,查看可支持的格式见https://gohugo.io/functions/format/
moreMeta = true # 是否显示字数统计与阅读时间
showMenuLanguageChooser = true # 显示语言选择开关
showAuthorInfo = true # 文章末尾显示作者信息
# 一些全局开关,这些是默认值,也可以在每一篇内容的 front matter 中对单篇内容关闭或开启某些功能,在 archetypes/default.md 查看更多信息。
toc = true # 是否开启目录
photoswipe = true # 是否启用PhotoSwipe(图片可点击)
bootcdn = true # 是否使用bootcdn
mathjax = false # 是否使用mathjax(数学公式)
contentCopyright = '六点创作,转载请注明出处!' # 版权声明
customCSS = [] # if ['custom.css'], load '/static/css/custom.css' file
customJS = [] # if ['custom.js'], load '/static/js/custom.js' file
#-------------------------------------------------------------------
# CDN设置
#-------------------------------------------------------------------
[params.publicCDN] # load these files from public cdn
enable = true
jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
slideout = '<script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>'
gitmentJS = '<script src="https://cdn.jsdelivr.net/npm/gitment@0.0.3/dist/gitment.browser.min.js" crossorigin="anonymous"></script>'
gitmentCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css" crossorigin="anonymous">'
photoswipe = '<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.js" integrity="sha256-AC9ChpELidrhGHX23ZU53vmRdz3FhKaN9E28+BbcWBw=" crossorigin="anonymous"></script>'
photoswipeUI = '<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js" integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=" crossorigin="anonymous"></script>'
photoswipeCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css" integrity="sha256-SBLU4vv6CA6lHsZ1XyTdhyjJxCjPif/TRkjnsyGAGnE=" crossorigin="anonymous">'
photoswipeSKIN = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css" integrity="sha256-c0uckgykQ9v5k+IqViZOZKc47Jn7KQil4/MP3ySA3F8=" crossorigin="anonymous">'
#-------------------------------------------------------------------
# 下面是关于评论系统,更新显示commit内容,谷歌搜索,文章打赏,访问数据统计等等
#-------------------------------------------------------------------
[params.utteranc] # utteranc is a comment system based on GitHub issues. see https://utteranc.es
enable = false
repo = "xianmin/comments-for-hugo-theme-jane" # The repo to store comments
issueTerm = "pathname"
[params.gitment] # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
owner = "" # Your GitHub ID
repo = "" # The repo to store comments
clientId = "" # Your client ID
clientSecret = "" # Your client secret
[params.livere] #LiveRe comment. see https://www.livere.com/
uid = ""
[params.reward] # 文章打赏
enable = false
wechat = "/path/to/your/wechat-qr-code.png" # 微信二维码
alipay = "/path/to/your/alipay-qr-code.png" # 支付宝二维码
[params.counter.busuanzi] # a Chinese visitor counter # 卜算子计数器
enable = false
[params.counter.leancloud] # Chinese leancloud visitor counter # leancloud 计数器
enable = false
appId = ""
appKey = ""
[params.commentCount.disqus] # show counts of comments for Disqus
enable = false
[params.search.google] # google custom search, see https://cse.google.com
enable = false
id = "002186711602136249422:q1gkomof_em"
title = "Search"
[params.gitInfo]
gitRepo = "https://github.com/xianmin/xianmin.org"
showCommitMessage = false
#-------------------------------------------------------------------
#社交链接
#-------------------------------------------------------------------
# [params.social]
# a-email = "mailto:your@email.com"
# b-stack-overflow = "http://localhost:1313"
# c-twitter = "http://localhost:1313"
# d-facebook = "http://localhost:1313"
# e-linkedin = "http://localhost:1313"
# f-google = "http://localhost:1313"
# g-github = "http://localhost:1313"
# h-weibo = "http://localhost:1313"
# i-zhihu = "http://localhost:1313"
# j-douban = "http://localhost:1313"
# k-pocket = "http://localhost:1313"
# l-tumblr = "http://localhost:1313"
# m-instagram = "http://localhost:1313"
# n-gitlab = "http://localhost:1313"
# o-goodreads = "http://localhost:1313"
# p-coding = "http://localhost:1313"
# q-bilibili = "http://localhost:1313"
# r-codeforces = "http://localhost:1313"
# s-mastodon = "http://localhost:1313"
#-------------------------------------------------------------------