Maupassant 一款非常简洁、性能高的Hugo主题，适配不同的设备（PC，Mobile等）。 主要是基于 Typecho Cho, 从 JokerQyou forked，修改和添加了很多功能而成，如GA统计、最近的文章、标签云、自定义菜单、按日期归档等 。

1. 取消 点击链接时新开标签页面

  • 复制主题目录 maupassant\layouts\index.html 到 网站目录 layouts\index.html

删除里面的两个 target="_blank"。

1
2
3
4
5

    ......
    <a href="{{ .Permalink }}" title="{{ .Title }}" target="_blank">{{ .Title }}</a>
    ......
    <p class="readmore"><a href="{{ .Permalink }}" target="_blank">{{ i18n "continueReading" }}</a></p>
    ......
  • recent_post.html 同样操作。

2. 解决文章目录不显示二级目录的问题

复制 maupassant\layouts\partials\toc.html 到网站目录 layouts\partials\toc.html

删除第53行 display: none; 。

51
52
53
54

    .post-toc .post-toc-content ul ul {
        padding-left: 15px;
        display: none;
    }

3. 国际化

  • 支持 RFC 5646 所有语言代码，但是只能是小写字母。
  • 把 config.toml 中的 #languageCode = "en-us" 改成 defaultContentLanguage = "zh-hans" ：
1
2

## languageCode = "en-us"
defaultContentLanguage = "zh-hans"

zh-hans.toml 已存在于主题 i18n\目录。

4. 文章归档支持

  • 归档页面 Hugo默认是不支持生成归档文件的，该主题已经实现了文章归档，只需要新建文件 content/archives/index.md ，文件内容为：
1
2
3

title: "归档"
description: Android资深工程师 ，Go和Java打杂师，《Android Gradle权威指南》作者，Android官方技术文档译者
type: archives

title和description都可以修改，但是type必须是archives。

生成的 archives.html 在根目录，要修改 config.toml:

1
2
3
4
5

  [[menu.main]]
    identifier = "archives"
    name = "归档"
    url = "/archives.html"
    weight = 3
  • 在原标签页打开文章：

复制 maupanssant\layouts\archives\single.html 到 网站目录对应位置，删除 target="_blank" 。

5. 表格和代码块

  • 修改style
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
table {
    border: 1px solid #dedede;
    /*表格外边框设置*/
    margin: 15px auto;
    /*外边距*/
    border-collapse: collapse;
    /*使用单一线条的边框*/
    empty-cells: show;
    /*单元格无内容依旧绘制边框*/
    /*table-layout: fixed;	 automatic：默认，由内容决定列宽； fixedd:平均列宽，*/
    text-align: left;
}
table th {
    font-size: 90%;
    font-weight: bold;
    /*加粗*/
    text-align: center !important;
    /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    border: 1px solid #dedede;
    /*内部边框样式*/
    background: rgba(158, 188, 226, 0.2);
    /*背景色*/
}
table td {
    white-space: nowrap;
    font-size: 90%;
    border: 1px solid #dedede;
    /*内部边框样式*/
    padding: 5px 10px;
    /*内边距*/
}
table tr {
    /*隔行变化*/
}
table tr:nth-child(2n) {
    background: #f7f8f8;
}
  • 修改 single.html

把文件中的 {{ .Content }} 修改为：

1
2

{{ $wrappedTable := printf "<div class=table-container> ${1} </div>" }}
{{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}

如果把第二行改成如下，则同时美化表格和代码块：

1

 {{ .Content | replaceRE "(<table( class=\"lntable\"){0,1}>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}

6. 固定右侧导航栏

导航栏一直可见，不会随着屏幕滚动。

在 baseof.html文件中增加以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
   const sidebarToggle = document.querySelector('.sidebar-toggle');
   const sidebar = document.querySelector('.sidebar_container');

   // 注册 toggle 的点击事件
   sidebarToggle.addEventListener('click', () => {
       sidebar.classList.toggle('show');
       main.classList.toggle('blur');
   });

   // 获取sidebar和toggle的初始坐标
   const sidebarMarginTop = sidebar.style.marginTop;
   const toggleTop = sidebarToggle.getBoundingClientRect().top;
   // 注册窗口滚动事件
   window.addEventListener('scroll', () => {
       var distance = document.documentElement.scrollTop;
       {
           sidebarToggle.style.top = distance + toggleTop + 'px';
           sidebar.style.marginTop = distance + sidebarMarginTop + 'px'
       }
   });
</script>

7. 图片点击缩放

放弃采用JQuery的fancybox，采用 lightense。

  • 注意调整各元素的 position，不能调整的 sidebar 在放大图片前要 display:none。
  • 不需缩放的图片加上 class="no-lightense"

8. 树形Sections

点击查看