主题

主题就是一些模板

概述

hugo支持多主题,一个主题就是一整套的外部样式和内容类型定义等。通过主题可以让无趣的md文件显示得十分生动。

从hugo官网可以下载很多的漂亮的主题,您喜欢也可以看看,当然从一开始就说过,这里是hugo中文手册,英文主题固然漂亮,显示起中文来就不是那么回事儿了。

本章开始便进入了hugo的重点和难点,通过上面一些学习,是否发现要自己制作一个站点还是无从入手呢?

采用内容表现分离,先进的思想的hugo并不会影响您工作和赚钱的时间,在不懂主题和模板之前,您依旧可以建立内容文件“md”文件、设计静态的html模板、申请域名、备案等,这些时间足够入门hugo和学会hugo的主题和模板了。

安装主题

hugo并不会为您的站点添加任何的“默认”主题,这也是hugo的难点之一,什么都看不见,无图无真相。

作为hugo中文手册,本站使用hugo搭建,看本站便是活生生的hugo主题实例!

hugo官方提供的安装方法可能不适合我们,其实主题安装相当简单,把主题文件夹复制到“themes”文件夹就可以了。

使用主题

在hugo渲染的时候,使用“ -t

hugo -t xxx

命令来使用“xxx”主题。

站点配置文件 中,使用

theme = "xxx"

来定义站点使用的主题。

两种方式是一样的,建议在配置文件中设置,以减少输入的命令。

自定义主题

没有主题就没有hugo,它的存在也没有任何价值。

是的,主题是hugo的灵魂,自定义主题是hugo的市场所在。

一个站点有三大部分:程序的功能;美工设计;内容。作为展示站,无需淘宝那样的程序功能,内容就是md文件,而剩下的就是自定义的主题了。

静态文件

一些js,比如jquery,图片等,都是静态文件,这些hugo当然没有,您得自己下载,存放在本地待用。

结构

在“ themes ”下的文件夹(目录),就是一个安装的或者自定义的主题(因为主题有一些默认的结构,使用hugo建立主题更为方便)。

主题下有

archetypes:                             主题内容模板(原型)
layouts:                                    html模板布局
        |____ _default:                     默认模板
                    |____ list.html:        列表页
                    |____ single.html:      详细页
        |____ xxx:                          xxx类型模板
        |____ page:                         页面模板,无类型章节的使用
        |____ partials:                     公共模板
        |____ 404.html:                     404页面
        |____ index.html:                   首页模板
static:                                 静态资源
        |____ css:                          css样式表
        |____ js:                           js文件

静态的css文件和js文件存放于static文件目录。

渲染规则

  • 若hugo无themes文件夹,或themes下面没有主题,则使用根目录下的layouts、archetypes和static文件进行渲染。
  • 若有主题文件并设置了主题,则使用主题文件渲染。
  • 首页使用index.html渲染。
  • 列表页使用_default下的list.html渲染。
  • 详细页(对应单个的md文件)使用_default下的single.html渲染。
  • 若设置了内容类型,则使用相应的“xxx”类型文件目录下的list和single.html渲染。
  • 单页面站点需要index.html,首页index.html模板支持所有列表页和详细页的模板参数、函数。

列表就是很多个的文章,单个就是单篇,hugo还有模板文件分割(比如头部共同文件)、视图、片段等概念,非常灵活方便,其实hugo的模板就是go模板,无奈谷歌被墙。好东西总是忍不住一枝红杏出墙来!

建立主题

hugo new theme xxx

建立主题会默认生成主题结构和一些必须的文件,当然,他们还是空空如也,hugo可真不愿意多给我们任何的强迫!