hugo-theme-hiruko
hugo-theme-hiruko copied to clipboard
GenkunAbe
主题很漂亮，有exampleSite参考吗
找不到站点config.toml，就自己对照demo博客把大部分的js/css本地化。现在出现两个问题：
问题一：首页不显示、about、gallery页面不知道怎么设置
结果首页内容列表显示不出来，截图如下：
about、gallery页面404
希望大佬能提供一下config.toml，Thanks♪(･ω･)ﾉ
问题二：字体渲染不及时
打开页面后若干秒后，页面字体自动会变换，感觉不适，如何加快渲染或者关闭渲染？
哈哈，本来我也没想到会有人来用这个主题，所以啥都没写清楚。
我的 config.toml
baseURL = "https://blog.genkun.me/"
languageCode = "zh-cn"
title = "GENKUN"
theme = "hiruko"
[params]
disqus = "genkun"
JQueryCDN = "/js/libs"
FancyBoxCDN = "/js/libs"
BootstrapCDN = "/js/libs"
HighLightCDN = "//cdn.staticfile.org"
MathJaxCDN = "//cdn.staticfile.org"
FontAwesomeCDN = "/js/libs"
PanguCDN = "/js/libs"
JQueryVersion = "3.2.1"
JQueryMouseWheelVersion = "3.1.13"
JQueryUIVersion = "1.12.1"
JQueryTocifyVersion = "1.9.0"
FancyBoxVersion = "3.0.47"
BootstrapVersion = "3.3.7"
HighLightVersion = "9.13.1"
HighLightNumVersion = "2.5.0"
MathJaxVersion = "2.7.5"
FontAwesomeVersion = "4.7.0"
PanguVersion = "3.3.0"
[outputs]
home = ["HTML","RSS"]
文章的 markdown 源码
文章的 markdown 源码也需要一些设置才能在首页正常显示，例如：
---
title: xxx
date: 2018-07-11T13:28:59+08:00
tags: [xxx,yyy]
categories: xxx
keywords: xxx,yyy
description: zzz
<!-- 只有指定了 post 类型的文章才会在首页显示 -->
type: "post"
<!-- 是否显示目录，由于目录的性能太低，现在我基本上不会使用这个功能了 -->
toc: false
<!-- 是否加载 mathjax，对于一些不会出现数学公式的文章，不加载这个库可以加快加载速度 -->
mathjax: true
<!-- 指定需要代码高亮的语言，highlight.js 针对每一种语言有一个特定的 js 文件 -->
codes: [json, bash, tex]
<!-- 是否需要加载 Disqus 评论模块，可以控制是否开放评论 -->
comments: true
<!-- 是否采用直排布局 -->
vertical: false
<!-- 文章是否包含图片，如果无图就可以不加载图片浏览模块 -->
image: true
<!-- Hugo 的设置，可以控制是否发布该文章 -->
draft: false
---
关于字体渲染速度的问题，我也是一直很头疼，我现在使用 Adobe Fonts（原来的 Typekit）服务动态加载字体，但是这个服务在国内打开速度时快时慢。
我也尝试过网站自己来托管字体，但是总感觉字体渲染效果不太对。
如果想关闭渲染，那就只能把 main.css 和 main-vertical.css 里面相应的 font-family 设置改成其它字体了。
关于字体渲染速度的问题，我也是一直很头疼，我现在使用 Adobe Fonts（原来的 Typekit）服务动态加载字体，但是这个服务在国内打开速度时快时慢。
我也尝试过网站自己来托管字体，但是总感觉字体渲染效果不太对。
如果想关闭渲染，那就只能把
main.css和main-vertical.css里面相应的font-family设置改成其它字体了。
我现在换成了 Google Fonts 在线字体，并且使用中科大的反向代理，虽然字体切换的效果更加明显了，但好在速度更稳定了（不会出现时快时慢的情况）。
如果不想用在线字体，就把 main.css 和 main-vertical.css 文件顶部的字体设置改掉就好了。
大佬居然回复我了！！受宠若惊！！搞定首页，然后gallery和about页面是怎么设置的？还有logo、导航文字不能再config.toml设置成中文吗，还是要在layout文件里修改的？
我刚刚修改了一下主题，把跟主题无关的内容放到网站配置文件里面了（因为一开始只想着自己用，也没想那么多），现在网站的配置文件由 config.toml 换成 config.json，我的配置样例：
{
"baseURL": "https://blog.genkun.me/",
"languageCode": "zh-cn",
"title": "GENKUN",
"theme": "hiruko",
"params": {
"NavItems" : [
[ "HOME", "/" ],
[ "ARCHIVE", "/post" ],
[ "GALLERY", "/gallery" ],
[ "ABOUT", "/cn/about" ],
[ "RSS", "/index.xml" ]
],
"AboutMe": {
"Motto": "Sometimes NAIVE.",
"ImagePath": "/media/aboutme.jpg",
"AsideTitle": "FOLLOW ME",
"Links": [
[ "github-link", "https://github.com/GenkunAbe" ],
[ "twitter-link", "https://twitter.com/GenkunAbe" ],
[ "weibo-link", "https://weibo.com/genkunabe" ]
]
},
"Copyright": {
"Name": "GENKUN",
"From": "2017",
"To": "2019"
},
"disqus" : "genkun",
"CDN": {
"JQuery": {
"Path": "/js/libs",
"Version": "3.2.1"
},
"JQueryMouseWheel": {
"Path": "/js/libs",
"Version": "3.1.13"
},
"JQueryUI": {
"Path": "/js/libs",
"Version": "1.12.1"
},
"JQueryTocify": {
"Path": "/js/libs",
"Version": "1.9.0"
},
"FancyBox": {
"Path": "/js/libs",
"Version": "3.0.47"
},
"Bootstrap": {
"Path": "/js/libs",
"Version": "3.3.7"
},
"HighLight": {
"Path": "//cdn.staticfile.org",
"Version": "9.13.1"
},
"HighLightNum": {
"Path": "//cdn.staticfile.org",
"Version": "2.5.0"
},
"MathJax": {
"Path": "//cdn.staticfile.org",
"Version": "2.7.5"
},
"FontAwesome": {
"Path": "/js/libs",
"Version": "4.7.0"
},
"Pangu": {
"Path": "/js/libs",
"Version": "3.3.0"
}
}
},
"outputs": {
"home": [
"HTML",
"RSS"
]
}
}
这样导航栏的 logo、文字，about 页面的一些元素都可以在 config.json 里面设置了。
gallery 和 about 页面是怎么设置的？
gallery 页面具体长什么样我也没想好，当时我也是拍脑袋弄了这一个页面，实际上什么样式都没有实现。
about 页面是在 post 文件夹的同级目录下建立一个 about.md，内容如下：
---
title: "About"
date: 2017-12-30 10:32:50
type: "about"
pagetype: "about"
comments: false
---
Some Text.
loli.net 我也发现了，不过这个域名还被用在了 sm.ms 图床上，感觉会有被墙的风险，所以还是选择了中科大的源。
如果想改的话，就直接修改 main.css 和 main-vertical.css 顶部的 fonts.proxy.ustclug.org 为 fonts.loli.net 即可。
"NavItems" : [ [ "HOME", "/" ], [ "ARCHIVE", "/post" ], [ "GALLERY", "/gallery" ], [ "ABOUT", "/cn/about" ], [ "RSS", "/index.xml" ]
哈哈，我把/cn去掉，about页才出现。
大佬，我有几个问题还没搞定，求思路：
1、想在导航栏增加一个参数，target_blank: true；因为gallery是一个外链，没法返回。
2、想在文章页右下角增加一个返回按钮，效果类似于这样，我尝试过一个万能插件vanilla-back-to-top，貌似不起作用。
3、我/post/下的文章篇数比较多，原来hexo有将近600+，这个主题可以设置分页显示文字列表吗?
还有一点：/layouts/partials/about.html中
<p class="about-me-text">{{ $.Site.Params.Motto }}</p>
改成
<p class="about-me-text">{{ $.Site.Params.AboutMe.Motto }}</p>
才显示motto
1、想在导航栏增加一个参数，target_blank: true；因为 gallery 是一个外链，没法返回。
现在只需要写成这样就好了：
"NavItems" : [
[ "HOME", "/", "_blank" ],
[ "ARCHIVE", "/post", "_blank" ],
[ "GALLERY", "/gallery", "_blank" ],
[ "ABOUT", "/cn/about", "_blank" ],
[ "RSS", "/index.xml", "_blank" ]
],
2、想在文章页右下角增加一个返回按钮，效果类似于这样，我尝试过一个万能插件 vanilla-back-to-top，貌似不起作用。
按照说明里面的要求把下面的代码加入 after-footer.html 的顶部。
<script src="https://unpkg.com/[email protected]/dist/vanilla-back-to-top.min.js"></script>
<script>addBackToTop({
diameter: 56,
backgroundColor: 'rgb(255, 82, 82)',
textColor: '#fff'
})</script>
3、我 /post/ 下的文章篇数比较多，原来 hexo 有将近 600+，这个主题可以设置分页显示文字列表吗？
现在可以分页了，在 config.json 里面加入一条控制每一页文章数的参数：
"params": {
"Paginate": 2
}
还有一点：
/layouts/partials/about.html中<p class="about-me-text">{{ $.Site.Params.Motto }}</p>改成
<p class="about-me-text">{{ $.Site.Params.AboutMe.Motto }}</p>才显示 motto
的确是这样，谢谢~
大佬厉害，我删掉主题目录重新下载后可以控制分页了。
但又冒出一个问题，本来front matter可以通过type="post"控制显示在首页的文章，这个版本默认是显示全部文章了吗?加上分页排版都是默认显示全部文章内容的，版面显得很紧凑。
如果我想导入600多篇MD文件，好像每一篇都要手动插入<!--more-->才能得到理想的排版页面。
尽管不该挑剔，不过小的想提个建议，我之前说的分页，是指achive下面的文章存档列表分页，首页文章可以选择性展示，定期更换，这样搬迁的工作量会小很多，我甚至可以选择少于Paginate数量的文章展示。
或者保留现在Home下分页的结构，但分页后文章默认不显示，还是采取type="post"控制显示在首页的文章。
每一篇文章都要手动加入 <!--more--> 这在 Hexo 和 Hugo 里面都是这样的，这的确对于大规模迁移不是很友好。不过有一个简单粗暴的方法：用 sed 命令在每个 md 文件的第 20 行插入一行 <!--more-->。
谢谢大佬，现在这个版本已经很完美了。不过我有点特殊，还是面临achive一个页面文章数太多，本地测试了300篇，下拉略微吃时间，怎么才能给achive也增加分页?
我也不太清楚怎么给 archive 增加分页诶，我只知道要在 layouts/_default/list.html 里面改动，不过按照 index.html 的方式去改好像不起作用。
其实我个人认为就算文章数到了 600+ 也是可以考虑全部显示的，毕竟 archive 的意义就是列出所有文章，全部在一个页面也方便使用 Ctrl + F 查找。你可以考虑考虑把 archive 页面的文章标题列表改成双栏的，然后不同年份（或者不同类别）的文章归为一组，在不同的年份之间加一个年份副标题，应该也挺美观的。
或者你可以这样尝试一下：
在 layouts/_default/list.html 页面渲染出所有的文章，然后使用 bootstrap 不同的 contrainer 来分页展示。
我昨天试了一下修改 layouts/_default/list.html 实现分页，以为没改成功，还以为 hugo 不支持这个功能呢。刚刚又看了一下你发的那份代码，再试了一下发现我昨天的改动是可行的，现在代码已经更新了。
在 config.json 里面有个设置："ArchivePaginate": 100
谢谢！！确实可以分页！！但只显示文章加了
type = "post"参数的文章……，和首页一样了，@-@
我的本意是这样的，如果要显示所有类别，改一下 layouts/_default/list.html 就好了。
改成
{{- $paginator := .Paginate .Data.Pages.ByDate.Reverse .Site.Params.archivepaginate -}}
可以显示了。(づ￣3￣)づ╭❤～
