Hugo主题nuo的配置
Hugo主题nuo简洁大方，电脑端界面分左右两栏，手机端界面和其他所有主题类似，我很喜欢！
因为麦田喜欢生成.html文件，并直接放在网站根目录下，所以这个主题修改和配置的地方比较多：
1、先设置网站根目录的config.toml文件：
添加：uglyurls = “true”，网站结构就从默认的maitianblog.com/hugo/变成maitianblog.com/hugo.html
添加：[permalinks] post = “/:filename/”
默认的网站结构maitianblog.com/post/hugo.html就变成maitianblog.com/hugo.html
但是md文件还是比较放在post文件夹内！
2、网站结构既然修改成hugo.html，那还需要改动其他文件，比如标签tags的结构。
网站标签还是默认的结构maitianblog.com/tags/hugo/
打开Dreamweaver，查找tags，找到以下代码并修改：
文件layouts/post/single.html
原文<a href="/tags/{{ $tag | urlize }}">
改成<a href="/tags/{{ $tag | urlize }}.html">
文件layouts/_default/terms.html
原文{{ $data.Plural }}/{{ $value.Name | urlize }}
改成{{ $data.Plural }}/{{ $value.Name | urlize }}.html
3、文章页面添加按钮、广告、点击复制按钮等等内容；
打开文件layouts/post/single.html
找到这一段话，这段话是网页正文部分：
<article class="post-content">{{ .Content }}</article>
在这段话的下面添加按钮（广告等内容皆可）：
<a class="button" href="http://www.mtdsj.com/">点击进入麦田的世界</a>
然后打开css文件：assets\styles\partials_posts.scss，添加button的css
添加点击复制粘贴的按钮
编辑footer.html，添加复制代码；编辑header.html，添加js代码；编辑single.html，在合适的位置添加按钮代码。
4、文章页面添加以标签为基础的相关文章；
打开文件layouts/post/single.html，在上面按钮的下面加入：
<HR>
<p>相关内容：</p>
{{ $.Scratch.Set "limit" 0 }}
{{ $currentPagePermalink := .Permalink }}
{{ $tags := .Params.tags }}
{{ range .Site.Pages }}
{{ $isMatchTags := intersect $tags .Params.tags | len | lt 0 }}
{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) (lt ($.Scratch.Get "limit") 10) }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ $.Scratch.Add "limit" 1 }}
{{ end }}
{{ end }}
<footer class="post-footer">
{{ if isset .Params "tags" }}
<ul class="post-tags">
{{ range $tag := .Params.tags }}
<li><a href="/tags/{{ $tag | urlize }}.html"><span class="tag">{{ $tag | title }}</span></a></li>
{{ end }}
</ul>
{{ end }}
5、文章页面添加上一篇和下一篇的链接；
打开文件layouts/post/single.html，在相关内容的下面加入（有些模板自带这个功能）：
<ul class="pager">
{{with .Prev}} <li class="previous"><a href="{{.Permalink}}">上一篇：{{.Title}}</a></li>{{end}}
{{with .Next}} <li class="next"><a href="{{.Permalink}}">下一篇：{{.Title}}</a></li>{{end}}
</ul>
添加完毕，如果没有样式，可以参考以下样式，添加进这个样式表assets\styles\partials_posts.scss
& .pager {
margin: 1rem 0;
padding-left: 0;
color: #636c72;
list-style: none;
text-align: center;
}
& .pager li {
display: inline;
}
& .pager li>a,.pager li>span {
display: inline-block;
padding: 2px 12px;
}
& .pager li>a {
border: 1px solid #d0d5da;
border-radius: 10px;
background-color: #f5f6f7;
}
& .pager li>a:hover,.pager li>a:focus {
background-color: #eeeeee;
text-decoration: none;
}
& .pager .next>a,.pager .next>span {
float: right;
}
& .pager .previous>a,.pager .previous>span {
float: left;
}}
@media screen and (max-width: $tablet) {
.pager li>span,.pager .next>a,.pager .next>span,.pager .previous>a,.pager .previous>span {
float: none;
display: block;
margin-bottom: 3px;
}
}
6、添加归档页面，也就是本站的“全部文章”页面。所谓的归档就是列出全部文章，归档这个词语显然没有全部文章这个词方便用户理解！
麦田之前写过（点击阅读）：Hugo添加归档页面的教程（Hugo添加全部文章的页面）
按照这个教程操作后发现，全部文章列表的文字字体太大，间距太大，我就把默认的h4修改成h5，但问题依旧存在。
我进入assets\styles\partials文件夹，修改css文件_content.scss（dw搜索h5定位到这个文件），发现修改间距和字体大小都不生效。
我打开hugo的预览，把全部文章页面另存到本地电脑为html文件，再使用dw打开，点击html文件的h5，找到对应的css样式html{line-height:1.618;}。原来调用的是另外一个css文件：_skeleton.scss，我在里面添加了h5的样式：
line-height:0.5;
font-size: 18px;
font-weight:500;
文本粗细font-weight：100-900是9级粗，400对应常规字体normal，700对应粗体bold
小技巧：
当你不确定html对应的是哪个css，可以把疑似css的数值修改成超级大或者超级小，再看网页的变化大小，即可判断。比如line-height可以设置成100，预览网页即可一眼看出样式的变化！
7、修改一些细节，比如把模板默认的英文修改成中文；
使用DW查找“READ MORE”，修改成“点击阅读全文”，其他的修改类似！
Hugo主题nuo：https://themes.gohugo.io/hugo-nuo/
2020年2月2日，进一步美化主题NUO：
1、手机端：页头的logo部分高度过高，修改_skeleton.scss
.site-header {
box-sizing: border-box;
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: 1rem;修改成：padding: 0 1rem;
2、手机端：页头小圆图和菜单的上下不居中，修改_header.scss
.title {
font-size: 2rem;相当于32px修改成1.75rem相当于28px
font-family: Microsoft YaHei;
font-weight: $weight-bold;
font-color: #000000;
margin: 1rem auto;去掉这一段
@media screen and (max-width: $tablet) {
margin: 0.5rem 0 -2rem 0;修改成：margin: 0 0 0 -2rem;【重要】
}
3、手机端：正文字体过小，修改_skeleton.scss
html {
line-height: 1.618;
font-family: Verdana,Microsoft YaHei;
font-size: 16px修改成1.125rem;【18px】
}
4、手机端：正文段落第一行缩进两个字，还有优化段落之间的距离。修改_content.scss
在手机端段落缩进相对来说更重要，因为电脑屏幕宽，一段话可能只有一行，但是手机屏幕窄，即使一行字就可能会自动换行，如果不设置缩进阅读比较困难。这个主题修改缩进后，我的网站电脑界面比较丑，但是手机端比较好。现在肯定要以手机端为重。
& p {
新增text-indent: 2em;
margin-top: 1.5rem;修改成0.75rem;
margin-bottom: 1.5rem;修改成0.75rem;
}
注意：主题css的图片样式已有：display:block
5、修改相关内容这四个文字为红色
<p><font color="#CC0000">相关内容</font></p>
6、正文标题和页头相距太高，修改_posts.scss中的
.post-title {
font-size: 1.5rem;
line-height: 1.5;
color:#444444;
font-weight: $weight-bold;
margin-top: 1.5rem;修改成0.5，修改成0首页文章标题会紧贴分割线
margin-bottom: 0.5rem;修改成0
}
7、我使用的是二级目录，但是标签链接却还是根目录的方式打开，修改以下内容：
<li><a href=".【这里加了一个点】/tags/{{ $tag | urlize }}.html"><span class="tag">{{ $tag | title }}</span></a></li>
修改如下部分
<a href=".【这里加了一个点】/{{ $data.Plural }}/{{ $value.Name | urlize }}.html" class="tag-{{ if eq $weight 1 }}s{{ else if eq $weight 2 }}m{{ else if eq $weight 4 }}l{{ else if eq $weight 8 }}xl{{ else }}xxl{{ end }}">{{ $value.Name }}</a>
我尝试过在这里加入二级目录的名字，不行；加入{{ .Site.BaseURL }}等内容直接出错无法打开网页；加入两个也不行，我都不知道为什么加入一个点就可以，我完全是瞎写的！竟然成功了，无言！
8、点击阅读全文加上背景颜色，背景颜色的长度和文字一样，css添加
background-color: #f3f3f3;
padding: 5px 10px;
display: inline-block;重要部分
9、上一篇下一篇的css美化
这个主题没有翻页功能，我是移植rockrock主题的，但是在这个主题中不能完美的显示，两个li之间的距离太大，最后解决方法：
.pager li>span,.pager .next>a,.pager .next>span,.pager .previous>a,.pager .previous>span {
float: none;
display: block;
margin-top: -1rem;加入了这个负数，完美显示
}
2020年3月7日，上篇下篇在手机端显示完美，电脑端显示也正常，但是在某种特殊的尺寸之下，下篇会向下挤压占用底部的空间。研究后发现添加某个宽度后，可以优化，如下！但是因为这种特殊尺寸几乎不会出现，所以也没有意义。
@media screen and (max-width: 64rem) {
.pager {
margin-bottom: 10rem;
}}
10、标签前面加#，标签作为li，可以自动换行，但是有重叠，解决方法是在li的css里加入：overflow:hidden;，还需要在+ li里面添加margin-left: 0rem;和margin-right: 0.5rem;
2020年2月3日，继续优化：删除无用JS，提高加载速度
1、Polyfill是一块代码，通常是 Web 上的 JavaScript，用来为旧浏览器IE89提供它没有原生支持的较新的功能。因为我不想支持那些垃圾浏览器，所以直接删除polyfill.html，以及相关内容，提高加载速度。找到baseof.html删除以下部分：
<!-- Polyfill for old browsers -->
{{ partial "polyfill.html" . }}【通过notepad搜索polyfill】
2、去掉：
方法：搜索meta name，找到head.html中的{{- $gohugoio := “gohugoio” -}}删除掉即可
3、为苹果手机准备一个ico图片：152px的正方形png图片
4、去掉点击回到最上面的功能，chrome浏览器按F12，点击向上的按钮，定位到关键词suspension，再用notepad搜索suspension，找到以下这段话，全部删除：
<div class="suspension">
<a role="button" aria-label="Go to top" title="Go to top" class="to-top is-hide"><span class="{{ $upIcon }}" aria-hidden="true"></span></a>
{{ if and (eq .Type "post") (eq .Kind "page") }}
{{ if .Site.Params.changyan }}
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#SOHUCS"><span class="{{ $commentIcon }}" aria-hidden="true"></span></a>
{{ else if .Site.DisqusShortname }}
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#disqus_thread"><span class="{{ $commentIcon }}" aria-hidden="true"></span></a>
{{ else if .Site.Params.Gitment }}
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#gitment-container"><span class="{{ $commentIcon }}" aria-hidden="true"></span></a>
{{ else }}{{ end }}
{{ end }}
</div>
同时，还要去掉Smooth Scroll的js
<!-- Smooth Scroll -->
<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@15.0.0/dist/smooth-scroll.min.js"></script>
以上去除后，在浏览器中按F12，右侧提示两个红色的错误，其中之一提示有：SmoothScroll is not defined，以及index.js，进入这个js中删除有关SmoothScroll的内容回复正常。
5、因为网页无视频，在footer.html删除视频js
<!-- Video.js for post -->
{{ if and (eq .Kind "page") (eq .Type "post") }}
<script async src="https://cdn.jsdelivr.net/npm/video.js@7.3.0/dist/video.min.js"></script>
{{ end }}
还要在head.html中删除关于视频的css
<!-- Video.js Styles -->
{{ if and (eq .Kind "page") (eq .Type "post") }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@7.3.0/dist/video-js.min.css">
{{ end }}
6、删除Mathjax，MathJax是一款运行在浏览器中的开源的数学符号渲染引擎
<!-- Mathjax for post -->
{{ if【注意这里，要删除末尾的end，否则出错】 and (eq .Kind "page") (eq .Type "post") }}
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({省略号</script>
<script type="text/x-mathjax-config">
v.SourceElement().parentNode.className += ' has-jax');
</script>
{{ end }}【注意要删除end】
7、以下代码是手机端的菜单功能，不可删除：
<!-- Main Scripts -->
<script src="{{ $script.RelPermalink }}"></script>
以上代码加载的是nuo\assets\scripts-index.js
8、以下是Medium Zoom，一个图片缩放的插件，在head.html中删除：
<!-- Medium Zoom -->
{{ if and (eq .Kind "page") (eq .Type "post") }}
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.2/dist/medium-zoom.min.js"></script>
{{ end }}
2020年2月4日，昨天发现电脑端的网页宽度比原版要宽，但检查并没有改动宽度，后来发现原来是改变了字体大小，将原来的小字变大，导致变宽。字体变大阅读体验好，所以不修改字体，修改宽度即可解决。
hugo生成的网页有大量的空行！终于找到解决方法！开心！
之前网上搜hugo网页空行，找到的答案，根据经验写在这里：Hugo生成静态网页有大量空行怎么办，方法虽然可以，但是比较麻烦。今天优化nuo主题发现一个更好的解决方法，如下：
使用notepad打开主题文件夹内的以下文件：
_default文件夹内的baseof.html、post文件夹内的single.html、head.html、header.html、footer.html。
清除其中的注释，以及不必要的空行，再生成的网页就没有空行！我的网页空行主要在相关内容板块，li之间相距比较大，以此为例：
原来的内容：
<p style="margin: 10px 0; color:#ba3537; font-size: 1.25em;">相关内容</p>
{{ $.Scratch.Set "limit" 0 }}
{{ $currentPagePermalink := .Permalink }}
{{ $tags := .Params.tags }}
{{ range .Site.Pages }}
{{ $isMatchTags := intersect $tags .Params.tags | len | lt 0 }}
{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) (lt ($.Scratch.Get "limit") 10) }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ $.Scratch.Add "limit" 1 }}
{{ end }}
{{ end }}
修改后的内容：
<p style="margin: 10px 0; color:#ba3537; font-size: 1.25em;">相关内容</p>
{{ $.Scratch.Set "limit" 0 }}{{ $currentPagePermalink := .Permalink }}{{ $tags := .Params.tags }}{{ range .Site.Pages }}{{ $isMatchTags := intersect $tags .Params.tags | len | lt 0 }}{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) (lt ($.Scratch.Get "limit") 10) }}<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
2020年2月19日
1、清除的方法：在config.toml文件中加入：disableHugoGeneratorInject = “true”
2、升级hugo至0.64.1发现首页显示一个名为Posts的链接，而不是文章列表，搜索找到nuo主题的讨论区github.com/laozhu/hugo-nuo/issues/141，在那里有正确答案：大概从 0.57.0 版本开始，hugo有一个突破性的变化，会影响到主页数据的集合。
编辑layouts/index.html 文件，找到如下这行代码：
{{ $paginator := .Paginate (where .Data.Pages "Type" "post") (index .Site.Params "paginate" | default 10) }}
修改成这行：
{{- $paginator := .Paginate (where site.RegularPages "Type" "in" site.Params.mainSections) -}}
其他主题，比如jane也遇到相同问题，也按照这个方法修改即可。
3、电脑端的首页左侧网站名字和文章页面首页左侧不同，F12检查发现一个使用H1一个使用H2，其样式稍有不同。搜索h2 class=“title，找到对应文件，把h2修改成h1恢复正常。
4、主题原来的分页按钮只有【比较旧的文章】，修改成数字页码+下一页更友好。
