内容页

内容页显示单一文章,或单一页面,也叫详细页

着手干

通过前面几节的铺垫,现在可以着手做一个hugo的模板了。大家可以跟着我来,动动手就清楚的了解hugo是多么的好用,思想是多么的先进了。

关于我们是很多网站必备的一个页面,我们就从这个开始。在这之前我们建立了hugao的站点,建立了hugao_theme的主题,下面再新建个关于我们的内容文件。

hugo new about.md

想清楚

虽然看了那么多的模板内容,没有着手干的时候,很是干涩。

当我们新建了一个“关于我们”的内容文件的时候,还真一片茫然,毕竟hugo此时此刻,依旧什么都看不见。

  • 模板文件怎么划分合理?
  • CSS放什么地方,怎么样链接进来?
  • js和js库放什么地方,怎么链接进来?
  • head标签种很多信息怎么而来?
  • title到底是谁的title,站点的,还是文章的,还是列表的?
  • 导航怎么而来,怎么更新,怎么支持中文?

这是变量那节留下来的几个问题,另外的问题就是我们新建立的内容文件,将会使用哪个模板呢?

hugo模板匹配

以下是hugo的单页面模板匹配过程:

/layouts/类型 或 章节/LAYOUT.html
/layouts/类型 或 章节/single.html
/layouts/_default/single.html
/themes/主题/layouts/类型 或 章节/LAYOUT.html
/themes/主题/layouts/类型 或 章节/single.html
/themes/主题/layouts/_default/single.html

以上中文部分都是我们后面新建的主题、类型、章节。我们推荐使用主题,也就是后三个规则。

为了方便,我们直接修改默认新建主题生成的“/themes/hugao_theme/layouts/_default/ single.html ”单页面主题。

模板划分

使用模板的好处,就是单一的设计一个文件,然后就有很多个文件和模板一样了。

模板就像超市的货架,内容是物品。我们使用货架,来摆放物品。货架本身不可能是一个整体,因为一个整体不好运输,不好凑个合适的高度和宽度,所以模板需要划分。

模板划分

  • 把“head”部分划分出去

从前面我们知道,partials 文件夹是hugo自己建的,为的是让我们存放些公共的模板片段。head划分出去是个好主意,因为一个站点的head部分除了标题和关键词会变,其他的几乎不变。

默认的,hugo在partials文件夹下面建立了两个文件:header.html和footer.html,看名字就知道,一个是页头,一个是页脚。

  • 在header.html中引入css和js文件

下面就是本站的头部文件

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
            <meta name="description" content="{{ .Site.Params.description }} {{ .Title}}" />
            <meta name="abstract" content="{{ .Site.Params.abstract }}" />
            <meta name="keywords" content="{{ .Site.Params.keywords }} {{ .Title}}"/>
            {{ .Hugo.Generator }}
            <title>     
                {{.Site.Title}}         
            </title>
            <link rel="stylesheet" type="text/css" href="{{ "/css/bootstrap.css" | absURL }}">
            <link rel="stylesheet" type="text/css" href="{{ "/css/zimu.css" | absURL }}">
            <script src="{{ "/js/jquery.min.js" | absURL }}"></script>
            <script src="{{ "/js/bootstrap.js" | absURL }}"></script>
            <script src="{{ "/js/zimu.js" | absURL }}"></script>
        </head>

html5标准,中文,utf-8编码,然后meta用了站点的自定义属性和 {{.Title}} 变量,该变量会随列表页、首页、文章不同而改变。

引入css和js文件使用了 absURL ,就是自动加上了baseURL之后的绝对路径。hugo在本地调试的时候,会采用“localhost:1313”作为基本链接,而hugo生成之后,就会替换为配置文件设置的baseURL,最后变成:“http://www.zimustudio.com/css/zimu.css”。

主题的css文件和js文件都存放于static目录下,引入的时候无需考虑模板与static的位置关系,直接输入“/css”就可以了,这是因为所有的static(主题下的,站点根目录下的)都会展开复制到public下面。同样的,js文件也一样,一些公共的js库,比如jquery也可以放在根目录下的”static/js”下面。

  • 在footer.html中写入版权和关闭html

下面是个简单的版权信息

    <footer role="contentinfo" id="footer">
            版权所有©zimustudio.com
    </footer>
    </body>
    </html>

这样子,在单页面single.html里面就只有body和里面的内容了。当然,这样划分未必周全,却是十分的方便简洁。

提示:因为本章设置了站点自定义变量,您直接拷贝的会找不到他们。用站点自定义变量和文章属性作为关键词都可以的。另外提示各位没有前端设计经验的朋友,现在都是bootstrap这样子的框架的时代了,自己重复造轮子没有必要,这样子的框架还有好多,静态模板也很多,使用它可以加速我们的建站进程。

单页面

单页面主要就输出一个东西:{{.Content}} 。是的,这就是内容文件about.md里面的东西。

{{.Content}}由hugo抽取about.md里面除了文件头部分的正文,并且会根据前面所述的“Markdown格式说明”翻译为html标签和代码。

这种方式和其他的CMS没什么区别,其他的{{.Content}}内容是存储于数据库中的一个字符串片段,他们有js编辑器生成,包含很多的html标签,他们也只有有js编辑器解释,才能让人看得懂。

所不幸的是,所有的js编辑器都号称所见即所得,他们编辑出来的内容却是由外部的自定义的css修饰的,鼠标操作容易多出一些意外的空行空格,整个服务器编辑的压力也非常大。

hugo在使用hugo命令的时候,把{{.Content}}用md文件的内容填充,链接头部文件和底部版权等信息后,生成一个名字叫做about.html的文件(或about\index.html),在这个html文件里面包含了所有的东西。

额外的东西

就显示{{.Content}}会不会很枯燥,当然。你可以显示一下作者、日期、分类、最近更新、相似内容、广告等等,当然还得有页面标题,导航条。

您开启服务器,浏览本地的“localhost:1313/about.html”(如果生成的是目录,就是about,参看配置部分),就可以看到about.md生成的关于我们的页面了。

练练手

是的,就拿about.md来练手,熟悉markdown格式,熟悉模板函数、变量,然后就可以说,字母-原创设计技术小编就是一垃圾,狗屁不懂瞎胡搞!在没有熟悉之前的内容,能够掌握md格式和hugo的go模板基本使用之前,建议您先停一停,因为到这里,已经逾越了hugo的第一条陡峭的学习曲线了,后面将会是一马平川。

关于我们

总结

站点总是由单个的页面组成的,需要管理,需要导航的根本就是页面太多,内容太长要分多个页面显示。

单页面是站点的基础,很多个人的和公司的站点,在UI设计的很漂亮的前提下,单页面足够了。

hugo定义为CMS,自然,内容多了,才有管理的需求和必要,而现有CMS因为是放在服务器上的管理功能,占用服务器资源不说,安全也是非常头痛的事,做大做全,安全了,性能自然牺牲了。

严格意义的,像about这样的最顶层单页面,在hugo里面需要建立一个页面类型page,然后在其中建立single.html。hugo很自由,您有新的章节,想分别设置模板,没问题;你有新的内容类型,想设置模板,没问题;您留下了些单独的页面,想设置模板,没问题;我懒,一共三个模板,首页,列表,详细页全站都用,也没问题。