Please enable Javascript to view the contents

Francisca

 ·  ☕ 6 分钟

到底,我还是忍不住,去写一个自己的 Hugo主题, 主题的名字叫 Francisca 来源于美剧 dark 中的一个角色名。 必要的,是去学一学Go的模板引擎,但为了写好这个主题,
更多的,还需要自己去了解 JS 和 样式 怎么写好,该系列将不定期更新,每次更新的内容有多少? ->看心情XD。接下来,我将会分篇章地,详细记录主题的创建过程。

准备篇


默认大家已经自己装好了新版本的 hugo 以及 Go ,
对于新手而言,起一个新环境无异于拦路虎,
但最开始的这些步骤却是绕不开的,多请教我们的好朋友,遇到不懂的地方,不要一根筋死怼到底,
在独立思考后无果,及时询求高手们的建议。【这话就是说给自己听的,可让我长点心吧。】

结构分析

网站的目录结构:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.
├── archetypes     //内容原型
│   └── default.md       /* 默认的文章元数据 */
├── config.toml    //总的配置文件
├── content        //文章目录
│   ├── _index.md        /* [家页面] <- http://[domainName]/  */
│   ├── 法兰西斯卡.md    /* [文章1]] <- http://[domainName]/法兰西斯卡
│   │
│   └── posts
│       └── test.md      /* [文章2] <- http://[domainName]/posts/test */
├── data           //数据库
├── layouts        //布局
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static         //JS、CSS、图片等静态资源放置目录
└── themes         //主题文件夹
    └── francisca
        ├── archetypes       //主题原型
        │   └── default.md
        ├── layouts          //该主题下的布局
        │   ├── 404.html               //404页面模板
        │   ├── _default     //默认页面布局
        │   │   ├── baseof.html        //基础页面模板
        │   │   ├── list.html          //内容项页面模板
        │   │   └── single.html        //是所有内容页面默认的模板(每篇文章的共同布局)
        │   ├── index.html             //首页模板
        │   └── partials    //局部模板,通过partial引入
        │       ├── footer.html        //页尾模板
        │       ├── header.html
        │       └── head.html          //页首模板
        ├── LICENSE          //开源许可文件
        ├── static           //主题下的静态文件目录
        │   ├── css                    //样式目录
        │   └── js                     //动态脚本目录
        └── theme.toml       //主题下的配置文件

我们知道,html是web应用的骨架,后台可以说是web应用的血肉,而动态脚本和样式则是web应用的皮囊。
我们建立的主题由模板和包括 js 与 css 在内的静态资源组成,我们建立的hugo网站内容主要以两种方式呈现:「内容」和「内容项」,
一篇文章页面(包括留言板、个人简介)属于内容;陈列室、标签页则属于内容项。
在构建流程上,我们的主题,将基于:「骨架->皮囊->血肉」的形式来进行。

Hugo的运作方式

在开始动手设计主题之前,我们有必要去了解一下 hugo 这个静态页面生成引擎是如何运作的。

三个基本概念
  • 文章
    • 这里的文章就是网站的作者所要撰写、发布的实际内容,文章默认以 .md 的格式存放在 ./content/ 目录下,创建文章的方式有两种:1.手动在目录内创建 md 文件;2.通过命令行(切换到站点根目录下)键入hugo new ./content/[fileName].md来实现文章的自动创建并初始化文章头部信息。
  • 模板
    • hugo 的模板文件存在于两个地方:「./layout」以及「./theme/[themeName]」详见上示目录结构树。「./layout」目录默认为空,但该目录的使用优先级要高于「./theme/[themeName]」目录的优先级
      因此,我们可以通过在「./layout」目录下创建相同目录结构的文件来覆盖「./theme/[themeName]」目录下的模板文件,以满足客制化需求。
  • 页面
    • 在 hugo 中,页面=文章+模板。我们在浏览器里最终看到的视图就是hugo引擎通过一定的规则去寻找文章对应的模板规则,从而生成的页面。
文章和页面url的映射关系

我们创建的每一篇文章,都会在shell中运行 hugo 后,由hugo引擎负责将每篇文章映射成唯一的url,因此我们需要合理的组织「.content/」目录结构,以呈现合理的网站资源结构。
见上示目录结构树

配置文件

hugo支持三类现代互联网上常见的配置文件类型:「yaml」(不推荐,格式要求太严格)、「toml」、「json」(不推荐,不支持注释)。默认的配置文件以「config.toml」命名放置在网站的根目录下,每个主题文件夹下也有相应的如「theme.toml」这类的配置文件存在。

  • 文章列表的内容预览
    此外,我们还可以在每篇md文章的开头处以某些特殊的格式进行文章的单独配置,这样的配置我管他叫「文章元数据」,元数据可以如下三种格式编写:
1
2
3
4
5
6
7
8
yaml
---
title: "法兰西斯卡"
date: 2020-8-21T01:25:10+08:00
draft: true
author: "Jacklanda"
tags: ["Go", "Hugo"]
---
1
2
3
4
5
6
7
8
toml
+++
title = "法兰西斯卡"
date = 2020-8-21T01:25:10+08:00
draft = true
author = "Jacklanda"
tags = ["Go", "Hugo"]
+++
1
2
3
4
5
6
7
8
json
{
"title": "法兰西斯卡",
"date": "2020-8-21T01:25:10+08:00",
"draft": true,
"author": "Jacklanda",
"tags": ["Go", "Hugo"]
}

这些数据既有hugo默认的数据,也有用户自己定义的数据,hugo通过每篇文章元数据,将它们封装成模板变量,这点方便了我们在模板中去使用它们。

Hugo 的模板引擎

Hugo 的模板引擎使用的是Go的"html/template"包,即:Go模板,该包可以让我们通过少量的逻辑来完成一个静态网站的构建。

  • Go变量和函数在 {{}} 访问,例如,我们可以通过 {{ .Title }} 来访问一个预定义好的变量 .Title
  • 导入模板的两种方式:
1
2
{{ template "partials/header.html" }}
{{ partial "header.html" }}
  • 迭代语句
  • 条件语句
  • 模板页中常用的变量
我的工作方式

在一台主机上开放hugo进程占用端口,hugo处于调试状态,实时的内容更改,可在另一显示屏上查看预览(预览可在第一时间观察实时的内容与样式变动)

主题预期

下面是这个主题的概览

  • 围绕中心:sec ->简单(simple)、优雅(elegent)、客制化(customized)

  • 分页布局

    • 首页
    • 陈列室(列表区)
    • 文章页面
    • 标签&搜索
    • 留言板
    • 个人简介
    • 画廊
  • 功能设计

    • 文章存放于 [blogDir]/content/article 目录下,通过 hugo 默认的 goldmark 来实现页面文章的生成;
    • 通过良好的字距、行距、段距、页边距来实现 one take 即让使用者无需过多的关注排版,而实现「一遍过」的效果;
    • 文章列表的内容预览
    • 美观的代码块高亮
    • 内容导航侧栏
    • 加载页
    • 响应式布局(适配移动端)
    • 夜间模式;
    • 动态页,用来发布简短的说说(博客页面的朋友圈)
  • 图片素材

    • 来源于网络
  • 借用轮子

    • APlayer 网页音乐播放器
    • 访客地理位置一览
    • busuanzi 网站统计
    • 图片浏览插件
    • Disqus 评论
  • 部署工具

    • 命令行界面的一键上传图床脚本
    • 开机自启脚本
  • 其它

    • 撰写一份详细的文档(显然,只有通过内容详尽的文档才能实现较高的客制化要求)

未完待续…

参考引用


[1]https://www.gohugo.org/doc/themes/creation/#
[2]https://www.gohugo.org/doc/templates/go-templates_en/
[3]https://hugo.aiaide.com/