Hugo模板应用实例–icarus主题"

Last updated on 2021年9月20日 2 min read

修改模板

禁用了左侧profile栏

_default/baseof.html

<!--
      {{ if not .Params.disable_profile }}
	      {{ partialCached "profile" . }}
      {{ end }}
      禁用了左侧的profile
-->

partial/header.html 注释了这一段：

<!-- 20171202 remove the avatar beside the searchbar
  <nav id="sub-nav">
    <div class="profile" id="profile-nav">
      <a id="profile-anchor" href="javascript:;"><img class="avatar" src="{{ .Site.Params.avatar | absURL }}"><i class="fa fa-caret-down"></i></a>
    </div>
  </nav>
-->

修改分类页面的list

_default/summary.html 这个是点击分类后的list页面，我不想支缩略图，最终的目标是和首页的list一样。修改的内容：删除了缩略图的div

<div class="archive-article-thumbnail">
    {{ if isset .Params "banner" }}
    <a href="{{ .Permalink }}" class="thumbnail">
	<span style="background-image:url({{ .Params.banner | absURL }})" alt="{{ .Title }}" class="thumbnail-image"></span>
    </a>
    {{ else }}
    <a href="{{ .Permalink }}" class="thumbnail">
	<span class="thumbnail-image thumbnail-none"></span>
    </a>
    {{ end }}
</div>

修改CSS

因为禁用了左侧profile栏，所以文章列表区的宽度不够了

@media screen and (min-width: 1200px) {
  #main {
    display: inline;
    float: left;
    width: 73.807692307692314%;
    margin: 0 0.769230769230769%;
  }
}

在原有width的基础上，加上了原来profile的宽度上

修改字体

将原有字体14号改为18号

body {
  color: #565a5f;
  background: #f5f8f9;
  font: 18px "open sans", "Helvetica Neue", "Microsoft Yahei", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

配置config.toml

日期格式

date_format = “2006-01-02”

文章组织

在post文件夹下，可以再建立文件夹，从而分类文章。这种分类并不影响最终文章的链接，文章的链接还是以config.toml中的permlink设置为准，或者是front matter中的url属性为准。

文章链接

我一般的设置是这样： [permalinks] posts = “:year/:month/:filename/”

其中的posts就是指的在contents文件夹下的posts文件夹，所以不同的文件夹可以设置不同的链接格式，比如页面文件就人员以不需要设置日期

静态资源管理

静态资源都是保存在static文件夹内，hugo-icarus-theme有一个特别的设置

# Add custom assets with their paths relative to the static folder

   custom_css = []
       custom_js  = []
   custom_png = []
   custom_jpg = []

更换logo

TW Cent MT Bold 修改logo的css样式原：

.logo {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-image: url("images/logo.png");
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  background-size: 40px 40px;
}

修改为：

.logo {
  width: 250px;
  height: 40px;
  background-repeat: no-repeat;
  background-image: url("images/logo.png");
  -webkit-background-size: 250px 40px;
  -moz-background-size: 250px 40px;
  background-size: 250px 40px;
}

修改搜索引擎

在文件夹中搜索google.com，修改为bing.com

替换网站favicon

可以使用在线图标编辑网站在线编辑生成

修改本地化文件

icarus主题的本地化文件在data文件夹中。

调整list page中文章的顺序

设置了一个“关于我们”的分类，在这个文件夹中有几篇文章，希望根据自己定义的方式来进行排序，如果：

联系我们
关于我们

根据官方论坛上的信息。The default page sort is both stable and deterministic. Sorts by weight, date, link title, full file path.

所以在这篇文章中设置front matter，用来自定义的排序，注意，都要设。

Hugo