麦田的博客

Hugo主题nuo的配置

2019-09-01


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}} &nbsp;<li class="previous"><a href="{{.Permalink}}">上一篇:{{.Title}}</a></li>{{end}}
		{{with .Next}} &nbsp;<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、主题原来的分页按钮只有【比较旧的文章】,修改成数字页码+下一页更友好。


相关内容

  • GitBook介绍安装和使用教程
  • Hugo升级方法和遇到的问题
  • Markdown软件推荐
  • 静态博客生成器大全和简评
  • Win10系统安装Jekyll详细教程
  • Hugo生成静态网页有大量空行怎么办
  • Hugo主题beautiful的优化
  • Hugo主题beg的配置
  • Hugo主题LeaveIt优化
  • Hugo主题hyde的配置
  • 标签

    nuo静态网站生成器hugo主题hugo