主题很漂亮，有exampleSite参考吗

[bosconb]

找不到站点config.toml，就自己对照demo博客把大部分的js/css本地化。现在出现两个问题：

问题一：首页不显示、about、gallery页面不知道怎么设置

结果首页内容列表显示不出来，截图如下：

about、gallery页面404

希望大佬能提供一下config.toml，Thanks♪(･ω･)ﾉ

问题二：字体渲染不及时

打开页面后若干秒后，页面字体自动会变换，感觉不适，如何加快渲染或者关闭渲染？

[GenkunAbe]

哈哈，本来我也没想到会有人来用这个主题，所以啥都没写清楚。

我的 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
---

[GenkunAbe]

关于字体渲染速度的问题，我也是一直很头疼，我现在使用 Adobe Fonts（原来的 Typekit）服务动态加载字体，但是这个服务在国内打开速度时快时慢。

我也尝试过网站自己来托管字体，但是总感觉字体渲染效果不太对。

如果想关闭渲染，那就只能把 main.css 和 main-vertical.css 里面相应的 font-family 设置改成其它字体了。

[GenkunAbe]

关于字体渲染速度的问题，我也是一直很头疼，我现在使用 Adobe Fonts（原来的 Typekit）服务动态加载字体，但是这个服务在国内打开速度时快时慢。

我也尝试过网站自己来托管字体，但是总感觉字体渲染效果不太对。

如果想关闭渲染，那就只能把 main.css 和 main-vertical.css 里面相应的 font-family 设置改成其它字体了。

我现在换成了 Google Fonts 在线字体，并且使用中科大的反向代理，虽然字体切换的效果更加明显了，但好在速度更稳定了（不会出现时快时慢的情况）。

如果不想用在线字体，就把 main.css 和 main-vertical.css 文件顶部的字体设置改掉就好了。

[bosconb]

大佬居然回复我了！！受宠若惊！！搞定首页，然后gallery和about页面是怎么设置的？还有logo、导航文字不能再config.toml设置成中文吗，还是要在layout文件里修改的？

[bosconb]

忒喜欢这个主题的直排功能了，恨不能万亮。这么漂亮的主题没人用真是暴殄天物，大佬可以在ve2x上宣传宣传……

[bosconb]

发现一个更快的Google Font加速库loli.net，至少在我这儿比中科大快

[GenkunAbe]

我刚刚修改了一下主题，把跟主题无关的内容放到网站配置文件里面了（因为一开始只想着自己用，也没想那么多），现在网站的配置文件由 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.

[GenkunAbe]

loli.net 我也发现了，不过这个域名还被用在了 sm.ms 图床上，感觉会有被墙的风险，所以还是选择了中科大的源。

如果想改的话，就直接修改 main.css 和 main-vertical.css 顶部的 fonts.proxy.ustclug.org 为 fonts.loli.net 即可。

[bosconb]

    "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+，这个主题可以设置分页显示文字列表吗?

[bosconb]

还有一点：/layouts/partials/about.html中

<p class="about-me-text">{{ $.Site.Params.Motto }}</p>

改成

<p class="about-me-text">{{ $.Site.Params.AboutMe.Motto }}</p>

才显示motto

[GenkunAbe]

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/vanilla-back-to-top@7.2.0/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
}

[GenkunAbe]

还有一点：/layouts/partials/about.html 中

<p class="about-me-text">{{ $.Site.Params.Motto }}</p>

改成

<p class="about-me-text">{{ $.Site.Params.AboutMe.Motto }}</p>

才显示 motto

的确是这样，谢谢~

[GenkunAbe]

我这边好像没有问题，再拉取最新代码试试？

[bosconb]

大佬厉害，我删掉主题目录重新下载后可以控制分页了。

但又冒出一个问题，本来front matter可以通过type="post"控制显示在首页的文章，这个版本默认是显示全部文章了吗?加上分页排版都是默认显示全部文章内容的，版面显得很紧凑。

如果我想导入600多篇MD文件，好像每一篇都要手动插入<!--more-->才能得到理想的排版页面。

尽管不该挑剔，不过小的想提个建议，我之前说的分页，是指achive下面的文章存档列表分页，首页文章可以选择性展示，定期更换，这样搬迁的工作量会小很多，我甚至可以选择少于Paginate数量的文章展示。

或者保留现在Home下分页的结构，但分页后文章默认不显示，还是采取type="post"控制显示在首页的文章。

[GenkunAbe]

现在再试试，不加 type: "post" 的文章应该不会在首页显示了。

[GenkunAbe]

每一篇文章都要手动加入 <!--more--> 这在 Hexo 和 Hugo 里面都是这样的，这的确对于大规模迁移不是很友好。不过有一个简单粗暴的方法：用 sed 命令在每个 md 文件的第 20 行插入一行 <!--more-->。

[bosconb]

谢谢大佬，现在这个版本已经很完美了。不过我有点特殊，还是面临achive一个页面文章数太多，本地测试了300篇，下拉略微吃时间，怎么才能给achive也增加分页?

[GenkunAbe]

我也不太清楚怎么给 archive 增加分页诶，我只知道要在 layouts/_default/list.html 里面改动，不过按照 index.html 的方式去改好像不起作用。

其实我个人认为就算文章数到了 600+ 也是可以考虑全部显示的，毕竟 archive 的意义就是列出所有文章，全部在一个页面也方便使用 Ctrl + F 查找。你可以考虑考虑把 archive 页面的文章标题列表改成双栏的，然后不同年份（或者不同类别）的文章归为一组，在不同的年份之间加一个年份副标题，应该也挺美观的。

[GenkunAbe]

或者你可以这样尝试一下：

在 layouts/_default/list.html 页面渲染出所有的文章，然后使用 bootstrap 不同的 contrainer 来分页展示。

[bosconb]

大佬说的是类似这种按年份分的风格吗? baty stonebythesea threeq sobaigu 看了其中一个博客的源码，抄了几段代码，报错了，抄不过来T_T

[GenkunAbe]

hugo 的报错内容挺详细的，按照错误的提示解决就好。

[GenkunAbe]

我昨天试了一下修改 layouts/_default/list.html 实现分页，以为没改成功，还以为 hugo 不支持这个功能呢。刚刚又看了一下你发的那份代码，再试了一下发现我昨天的改动是可行的，现在代码已经更新了。

在 config.json 里面有个设置："ArchivePaginate": 100

[bosconb]

谢谢！！确实可以分页！！但只显示文章加了type = "post"参数的文章……，和首页一样了，@-@

[GenkunAbe]

谢谢！！确实可以分页！！但只显示文章加了 type = "post" 参数的文章……，和首页一样了，@-@

我的本意是这样的，如果要显示所有类别，改一下 layouts/_default/list.html 就好了。

[bosconb]

改成

 {{- $paginator := .Paginate .Data.Pages.ByDate.Reverse .Site.Params.archivepaginate -}}

可以显示了。(づ￣3￣)づ╭❤～

[zhaozhiliao]

通篇阅读你们的评论。这个主题很好看啊