hugo | 主题开发 | 第一章

2022年06月14日

736 字

此教程为hugo0.99.1版本制作的,高版本可能不同。如需使用高版本,请以hugo官方教程为主。 本文章的所有代码都是以猫猫的习惯写的,如果你会htmlgo摸板语言和scss那么你可以自己写,猫猫的教程只是参考。 并且是基于card主题制作的。

好久不见,甚是想念。


前言

今天给教大家如何为hugo制作一款主题(猫猫也还在摸索中呢,目前使用的card主题就是猫猫自己做的)~

首先就是要安装hugo(这个不用教了吧,之前搭建的时候就用过。版本的话可以用最新版,新版有一些功能可以用)那么正式开始吧~


开始操作

第一步

前言

操作

  • 打开cmd,输入
1
hugo version

此步骤是为了确认已安装hugo并且查看版本号,完成后可以切换盘符创建博客文件(一定要看cmd执行目录,之前猫猫就不小心在系统文件夹里执行了)切换盘符的方法是输入对应盘符的字母,例如我要在D盘的hugo文件夹内生成一个叫做My Blog的博客那么就要输入:

1
2
3
4
5
6
7
D:

cd hugo

hugo new site My Blog

cd My Blog

注:如果你的D盘没有hugo文件夹那么就在cd hugo前面先输入md hugo创建文件夹,再输入后面的命令例如:

1
2
3
4
5
6
7
8
9
D:

md hugo

cd hugo

hugo new site MyBlog

cd MyBlog

接下来就要创建主题了,由于我们是自制主题所以不需要下载导入主题。创建主题的方法是:

1
hugo new theme myTheme

完成了以上步骤以后。恭喜你,你成功的创建了博客以及主题。

接下来就要开始写html以及css代码了(目前猫猫没在使用css而是用的scss当然你可以使用css但是猫猫得教程可能就不适用了)

后言

创建完主题以后就要开始实际操作了。 不过在这之前要先认识htmlscss是什么,先是html,如果把这两样东西比作人的话,那么html就是人的骨架,scss则是外表。htmlscss的使用方式会放在第二章详细讲解。