概述

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可真不愿意多给我们任何的强迫！