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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
|
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Creating a New Theme - Jane - A simple theme for Hugo</title>
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>
<meta name="MobileOptimized" content="width"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="applicable-device" content="pc,mobile">
<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">
<meta name="mobile-web-app-capable" content="yes">
<meta name="author" content="Michael Henderson" />
<meta name="description" content="Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&rsquo;t cover using CSS to style your theme.
We&rsquo;ll start with creating a new site with a very basic template." />
<meta name="keywords" content="Hugo, theme, jane" />
<meta name="generator" content="Hugo 0.104.3" />
<link rel="canonical" href="https://www.xianmin.org/hugo-theme-jane/post/creating-a-new-theme/" />
<link rel="icon" href="/hugo-theme-jane/favicon.ico" />
<link rel="stylesheet" href="/hugo-theme-jane/sass/jane.min.de22abc00de44766eebd1054fd9e0b254b071f89d5019044f893c484a9249a8d.css" integrity="sha256-3iKrwA3kR2buvRBU/Z4LJUsHH4nVAZBE+JPEhKkkmo0=" media="screen" crossorigin="anonymous">
<meta property="og:title" content="Creating a New Theme" />
<meta property="og:description" content="Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.
We’ll start with creating a new site with a very basic template." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.xianmin.org/hugo-theme-jane/post/creating-a-new-theme/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2014-09-28T00:00:00+00:00" />
<meta property="article:modified_time" content="2018-03-06T16:16:15+08:00" /><meta property="og:site_name" content="Jane - A simple theme for Hugo" />
<meta itemprop="name" content="Creating a New Theme">
<meta itemprop="description" content="Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.
We’ll start with creating a new site with a very basic template."><meta itemprop="datePublished" content="2014-09-28T00:00:00+00:00" />
<meta itemprop="dateModified" content="2018-03-06T16:16:15+08:00" />
<meta itemprop="wordCount" content="7232">
<meta itemprop="keywords" content="go,golang,templates,themes,development," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Creating a New Theme"/>
<meta name="twitter:description" content="Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.
We’ll start with creating a new site with a very basic template."/>
<!--[if lte IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4SFSR6JRVT"></script>
<script>
var doNotTrack = false;
if (!doNotTrack) {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4SFSR6JRVT', { 'anonymize_ip': false });
}
</script>
</head>
<body>
<div id="mobile-navbar" class="mobile-navbar">
<div class="mobile-header-logo">
<a href="/" class="logo">Jane</a>
</div>
<div class="mobile-navbar-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
<ul class="mobile-menu-list">
<li class="mobile-menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/">Home</a>
</li><li class="mobile-menu-item">
<div class="mobile-menu-parent">
<span class="mobile-submenu-open"></span>
<a href="https://www.xianmin.org/hugo-theme-jane/categories/docs/">
Docs
</a>
</div>
<ul class="mobile-submenu-list">
<li>
<a href="https://www.xianmin.org/hugo-theme-jane/post/jane-theme-preview/">Jane Theme Preview</a>
</li>
<li>
<a href="https://www.xianmin.org/hugo-theme-jane/post/shortcodes-preview/">Shortcodes Preview</a>
</li>
<li>
<a href="https://www.xianmin.org/hugo-theme-jane/post/image-preview/">Image Preview</a>
</li>
<li>
<a href="https://www.xianmin.org/hugo-theme-jane/post/syntax-highlighting/">Syntax Highlighting</a>
</li>
<li>
<a href="https://www.xianmin.org/hugo-theme-jane/post/math-preview/">Math Preview</a>
</li>
</ul>
</li><li class="mobile-menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/post/">Archives</a>
</li><li class="mobile-menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/tags/">Tags</a>
</li><li class="mobile-menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/categories/">Categories</a>
</li><li class="mobile-menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/about/">About</a>
</li><li class="mobile-menu-item">
<a class="menu-item-link" href="https://gohugo.io" rel="noopener" target="_blank">
external-link
<i class="iconfont">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18">
<path d="M623.36 272.96 473.216 423.04C467.2 429.056 467.072 438.656 472.896 444.416c0 0-6.72-6.656 1.6 1.6C496.064 467.648 528.64 500.224 528.64 500.224 534.464 506.048 544 505.856 550.016 499.904l150.08-150.144 67.328 66.432c9.024 8.96 27.456 4.544 30.4-8.96 19.968-92.608 46.656-227.52 46.656-227.52 6.848-34.496-16.192-56.704-49.92-49.92 0 0-134.656 26.816-227.328 46.784C560.32 178.048 556.352 182.272 554.752 187.136c-3.2 6.208-3.008 14.208 3.776 20.992L623.36 272.96z"></path>
<path d="M841.152 457.152c-30.528 0-54.784 24.512-54.784 54.656l0 274.752L237.696 786.56 237.696 237.696l206.016 0c6.656 0 10.752 0 13.248 0C487.68 237.696 512 213.184 512 182.848 512 152.32 487.36 128 456.96 128L183.04 128C153.216 128 128 152.576 128 182.848c0 3.136 0.256 6.272 0.768 9.28C128.256 195.136 128 198.272 128 201.408l0 639.488c0 0.064 0 0.192 0 0.256 0 0.128 0 0.192 0 0.32 0 30.528 24.512 54.784 54.784 54.784l646.976 0c6.592 0 9.728 0 11.712 0 28.736 0 52.928-22.976 54.464-51.968C896 843.264 896 842.304 896 841.344l0-20.352L896 561.408 896 512.128C896 481.792 871.424 457.152 841.152 457.152z"></path>
</svg>
</i>
</a>
</li>
<li class="mobile-menu-item">
<div class="mobile-menu-parent mobile-menu-item-lang">
<span class="mobile-submenu-open"></span>
<a href="#">
<i class="iconfont">
<svg height="16" width="16" version="1.1" viewBox="0 0 128 128">
<path d="m 64.719501,1.4279814 c -34.694029,0 -62.8192028,28.1251726 -62.8192028,62.8192016 0,34.694036 28.1251738,62.819207 62.8192028,62.819207 4.245691,0 8.392744,-0.42239 12.402214,-1.2253 -1.616124,-0.77296 -1.792473,-6.57213 -0.194346,-9.87848 1.779059,-3.68082 7.361625,-13.00555 1.840404,-16.134231 -5.521221,-3.12869 -3.98755,-4.53968 -7.361625,-8.15914 -3.374083,-3.61947 -1.994181,-4.16357 -2.208492,-5.09179 -0.736158,-3.19004 3.251385,-7.975096 3.435429,-8.465866 0.184043,-0.490781 0.184043,-2.331182 0.122689,-2.883308 -0.06131,-0.552125 -2.515051,-2.024446 -3.12852,-2.085791 -0.613469,-0.06133 -0.920209,0.98154 -1.77906,1.042896 -0.858856,0.06133 -4.601018,-2.269838 -5.39853,-2.883308 -0.797504,-0.61346 -1.165591,-2.085792 -2.269828,-3.190033 -1.104247,-1.104252 -1.226945,-0.24539 -2.944651,-0.920206 -1.717714,-0.674812 -7.238935,-2.69926 -11.471867,-4.416975 -4.23294,-1.717714 -4.601019,-4.125615 -4.662365,-5.827954 -0.06131,-1.702333 -2.57657,-4.171587 -3.756227,-5.950646 -1.179335,-1.77906 -1.396914,-4.232932 -1.826339,-3.680809 -0.429425,0.552114 2.208484,6.993538 1.77906,7.177582 -0.429425,0.184043 -1.349635,-1.77906 -2.576572,-3.374083 -1.226936,-1.595016 1.28829,-0.736159 -2.637915,-8.465864 -3.926198,-7.729705 1.226944,-11.671284 1.472324,-15.704806 0.24539,-4.033514 3.312738,1.472325 1.717715,-1.104238 -1.595016,-2.576571 0.122697,-7.975094 -1.104246,-9.938197 -1.226936,-1.963102 -8.220475,2.208492 -8.220475,2.208492 0.184036,-1.901758 6.134682,-5.153142 10.428966,-8.1591366 4.294277,-3.005996 6.91682,-0.674813 10.367621,0.4294236 3.450803,1.104246 3.680817,0.736167 2.515226,-0.368079 -1.165591,-1.1042446 0.49077,-1.6563686 3.190031,-1.2269356 2.699269,0.429425 3.435428,3.6808086 7.545669,3.3740746 4.110242,-0.306735 0.429425,0.797511 0.981548,1.840412 0.552123,1.042892 -0.613468,0.920202 -3.312729,2.760607 -2.699262,1.840403 0.06131,1.840403 4.846407,5.337177 4.785055,3.496773 3.312729,-2.331183 2.821952,-4.907753 -0.490777,-2.576563 3.496773,-0.552115 3.496773,-0.552115 2.944651,1.963094 2.400546,0.107972 4.547684,0.782784 2.147139,0.674814 7.967076,5.597286 7.967076,5.597286 -7.300273,3.98755 -2.699261,4.416975 -1.472325,5.337178 1.226937,0.920202 -2.515218,2.699261 -2.515218,2.699261 -1.53367,-1.53367 -1.779059,0.06131 -2.760614,0.613476 -0.981548,0.552115 -0.06131,1.963095 -0.06131,1.963095 -5.076415,0.797512 -3.926198,6.13469 -3.864852,7.422971 0.06131,1.288289 -3.251385,3.251384 -4.110242,5.091796 -0.858857,1.840405 2.208491,5.827948 0.613468,6.073336 -1.595016,0.24539 -3.190031,-6.011991 -11.778601,-3.680808 -2.589322,0.702954 -8.343174,3.680808 -5.275824,9.754153 3.06734,6.073336 8.15913,-1.717714 9.876843,-0.858857 1.717714,0.858857 -0.490778,4.72371 -0.122691,4.785055 0.368079,0.06131 4.8464,0.168662 5.09179,5.398522 0.245388,5.229868 6.809502,4.785065 8.220482,4.907755 1.410972,0.12269 6.134682,-3.864859 6.809502,-4.048894 0.674815,-0.184034 3.374076,-2.453876 9.263377,0.920195 5.889301,3.374089 8.895296,2.883308 10.919743,4.294285 2.02445,1.410987 0.61347,4.232939 2.51523,5.153134 1.90175,0.920217 9.50876,-0.306736 11.41051,2.821966 1.90176,3.1287 -7.8524,18.833491 -10.91974,20.551201 -3.06734,1.71772 -4.478321,5.64392 -7.545665,8.15913 -3.067349,2.51523 -7.361625,5.62854 -11.410522,8.03646 -3.583968,2.1311 -4.228845,5.949 -5.825333,7.15419 28.11404,-6.24545 49.13623,-31.328971 49.13623,-61.323497 0,-34.694029 -28.125171,-62.8192016 -62.819206,-62.8192016 z M 79.442753,60.382331 c -0.858857,0.245389 -2.637917,1.840405 -6.993547,-0.736166 -4.35563,-2.576564 -7.361625,-2.085794 -7.729705,-2.515218 0,0 -0.368079,-1.0429 1.533671,-1.226937 3.905098,-0.378065 8.833951,3.619464 9.938196,3.680809 1.104246,0.06131 1.656361,-1.104245 3.619464,-0.471631 1.963103,0.631953 0.490777,1.023755 -0.368079,1.269143 z M 58.891546,7.6853614 c -0.427786,-0.311152 0.354344,-0.669418 0.82058,-1.288281 0.269103,-0.357613 0.0695,-0.951289 0.406356,-1.28829 0.92021,-0.920203 5.459876,-2.208485 4.572225,0.306734 -0.887321,2.515226 -5.12434,2.760614 -5.799161,2.269837 z m 10.98109,7.9750936 c -1.533672,-0.06131 -5.14381,-0.442837 -4.478321,-1.104246 2.591952,-2.576563 -0.981548,-3.312729 -3.190039,-3.496766 -2.208485,-0.184043 -3.128687,-1.4109786 -2.02444,-1.5336776 1.104237,-0.12269 5.521213,0.06139 6.257379,0.6748206 0.736158,0.613469 4.723709,2.208485 4.969099,3.374076 0.24538,1.16559 0,2.147138 -1.533678,2.085793 z M 83.184914,15.23103 c -1.226943,0.981547 -7.400887,-3.521968 -8.588569,-4.539674 -5.153134,-4.4169746 -7.913742,-2.9446486 -8.995903,-3.6808086 -1.082485,-0.736166 -0.696897,-1.717713 0.959464,-3.190039 1.656369,-1.472325 6.318732,0.490778 9.017994,0.797512 2.699262,0.306734 5.827955,2.392527 5.889301,4.871925 0.06131,2.4792256 2.944649,4.7595296 1.717713,5.7410846 z" />
</svg>
</i>
Language
</a>
</div>
<ul class="mobile-submenu-list">
<li>
<a href="https://www.xianmin.org/hugo-theme-jane/"><strong>English</strong></a>
</li>
<li>
<a href="https://www.xianmin.org/hugo-theme-jane/zh-cn/">中文</a>
</li>
</ul>
</li>
<li class="mobile-menu-item">
<a id="openSearchMobile" class="mobile-menu-item-link menu-item-search" href="#">
<i class="iconfont">
<svg version="1.1" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" width="18" height="18"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M973.81454219 973.81454219a91.78207815 91.78207815 0 0 1-129.80999631 0l-161.97482118-161.97482118a425.48527711 425.48527711 0 0 1-230.35931791 68.16531768 428.3346319 428.3346319 0 1 1 428.3346319-428.3346319 425.48527711 425.48527711 0 0 1-68.16531768 230.35931791l162.02961656 161.97482118a91.83687354 91.83687354 0 0 1-0.05479538 129.80999631zM451.67040679 145.69361559a305.97679241 305.97679241 0 1 0 0 611.95358361 305.97679241 305.97679241 0 0 0 0-611.95358361z">
</path>
</svg>
</i>
</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="/lib/photoswipe/photoswipe.min.css" />
<link rel="stylesheet" href="/lib/photoswipe/default-skin/default-skin.min.css" />
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div id="closeSearch" title="Close" class="close">X</div>
<div class="modal-header">
<div class="modal-title">Search</div>
</div>
<div class="modal-body">
<script>
(function() {
var cx = '002186711602136249422:q1gkomof_em';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' :
'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</div>
</div>
<style>
.fork-me-on-github {
position: absolute; top: 0; left: 0; border: 0;
}
@media (max-width: 1080px) {
.fork-me-on-github {
display: none;
}
}
</style>
<a href="https://github.com/xianmin/hugo-theme-jane">
<img class="fork-me-on-github"
src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"
alt="Fork me on GitHub">
</a>
<header id="header" class="header container">
<div class="logo-wrapper">
<a href="/" class="logo">
Jane
</a>
</div>
<nav class="site-navbar">
<ul id="menu" class="menu">
<li class="menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/">Home</a>
</li>
<li class="menu-item">
<a class="menu-item-link menu-parent" href="https://www.xianmin.org/hugo-theme-jane/categories/docs/">Docs</a>
<ul class="submenu">
<li class="submenu-item">
<a href="https://www.xianmin.org/hugo-theme-jane/post/jane-theme-preview/">Jane Theme Preview</a>
</li>
<li class="submenu-item">
<a href="https://www.xianmin.org/hugo-theme-jane/post/shortcodes-preview/">Shortcodes Preview</a>
</li>
<li class="submenu-item">
<a href="https://www.xianmin.org/hugo-theme-jane/post/image-preview/">Image Preview</a>
</li>
<li class="submenu-item">
<a href="https://www.xianmin.org/hugo-theme-jane/post/syntax-highlighting/">Syntax Highlighting</a>
</li>
<li class="submenu-item">
<a href="https://www.xianmin.org/hugo-theme-jane/post/math-preview/">Math Preview</a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/post/">Archives</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/tags/">Tags</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/categories/">Categories</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="https://www.xianmin.org/hugo-theme-jane/about/">About</a>
</li>
<li class="menu-item">
<a class="menu-item-link" href="https://gohugo.io" rel="noopener" target="_blank">
external-link
<i class="iconfont">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18">
<path d="M623.36 272.96 473.216 423.04C467.2 429.056 467.072 438.656 472.896 444.416c0 0-6.72-6.656 1.6 1.6C496.064 467.648 528.64 500.224 528.64 500.224 534.464 506.048 544 505.856 550.016 499.904l150.08-150.144 67.328 66.432c9.024 8.96 27.456 4.544 30.4-8.96 19.968-92.608 46.656-227.52 46.656-227.52 6.848-34.496-16.192-56.704-49.92-49.92 0 0-134.656 26.816-227.328 46.784C560.32 178.048 556.352 182.272 554.752 187.136c-3.2 6.208-3.008 14.208 3.776 20.992L623.36 272.96z"></path>
<path d="M841.152 457.152c-30.528 0-54.784 24.512-54.784 54.656l0 274.752L237.696 786.56 237.696 237.696l206.016 0c6.656 0 10.752 0 13.248 0C487.68 237.696 512 213.184 512 182.848 512 152.32 487.36 128 456.96 128L183.04 128C153.216 128 128 152.576 128 182.848c0 3.136 0.256 6.272 0.768 9.28C128.256 195.136 128 198.272 128 201.408l0 639.488c0 0.064 0 0.192 0 0.256 0 0.128 0 0.192 0 0.32 0 30.528 24.512 54.784 54.784 54.784l646.976 0c6.592 0 9.728 0 11.712 0 28.736 0 52.928-22.976 54.464-51.968C896 843.264 896 842.304 896 841.344l0-20.352L896 561.408 896 512.128C896 481.792 871.424 457.152 841.152 457.152z"></path>
</svg>
</i>
</a>
</li>
<li class="menu-item">
<a class="menu-item-link menu-parent menu-item-lang" href="#">
<i class="iconfont">
<svg height="16" width="16" version="1.1" viewBox="0 0 128 128">
<path d="m 64.719501,1.4279814 c -34.694029,0 -62.8192028,28.1251726 -62.8192028,62.8192016 0,34.694036 28.1251738,62.819207 62.8192028,62.819207 4.245691,0 8.392744,-0.42239 12.402214,-1.2253 -1.616124,-0.77296 -1.792473,-6.57213 -0.194346,-9.87848 1.779059,-3.68082 7.361625,-13.00555 1.840404,-16.134231 -5.521221,-3.12869 -3.98755,-4.53968 -7.361625,-8.15914 -3.374083,-3.61947 -1.994181,-4.16357 -2.208492,-5.09179 -0.736158,-3.19004 3.251385,-7.975096 3.435429,-8.465866 0.184043,-0.490781 0.184043,-2.331182 0.122689,-2.883308 -0.06131,-0.552125 -2.515051,-2.024446 -3.12852,-2.085791 -0.613469,-0.06133 -0.920209,0.98154 -1.77906,1.042896 -0.858856,0.06133 -4.601018,-2.269838 -5.39853,-2.883308 -0.797504,-0.61346 -1.165591,-2.085792 -2.269828,-3.190033 -1.104247,-1.104252 -1.226945,-0.24539 -2.944651,-0.920206 -1.717714,-0.674812 -7.238935,-2.69926 -11.471867,-4.416975 -4.23294,-1.717714 -4.601019,-4.125615 -4.662365,-5.827954 -0.06131,-1.702333 -2.57657,-4.171587 -3.756227,-5.950646 -1.179335,-1.77906 -1.396914,-4.232932 -1.826339,-3.680809 -0.429425,0.552114 2.208484,6.993538 1.77906,7.177582 -0.429425,0.184043 -1.349635,-1.77906 -2.576572,-3.374083 -1.226936,-1.595016 1.28829,-0.736159 -2.637915,-8.465864 -3.926198,-7.729705 1.226944,-11.671284 1.472324,-15.704806 0.24539,-4.033514 3.312738,1.472325 1.717715,-1.104238 -1.595016,-2.576571 0.122697,-7.975094 -1.104246,-9.938197 -1.226936,-1.963102 -8.220475,2.208492 -8.220475,2.208492 0.184036,-1.901758 6.134682,-5.153142 10.428966,-8.1591366 4.294277,-3.005996 6.91682,-0.674813 10.367621,0.4294236 3.450803,1.104246 3.680817,0.736167 2.515226,-0.368079 -1.165591,-1.1042446 0.49077,-1.6563686 3.190031,-1.2269356 2.699269,0.429425 3.435428,3.6808086 7.545669,3.3740746 4.110242,-0.306735 0.429425,0.797511 0.981548,1.840412 0.552123,1.042892 -0.613468,0.920202 -3.312729,2.760607 -2.699262,1.840403 0.06131,1.840403 4.846407,5.337177 4.785055,3.496773 3.312729,-2.331183 2.821952,-4.907753 -0.490777,-2.576563 3.496773,-0.552115 3.496773,-0.552115 2.944651,1.963094 2.400546,0.107972 4.547684,0.782784 2.147139,0.674814 7.967076,5.597286 7.967076,5.597286 -7.300273,3.98755 -2.699261,4.416975 -1.472325,5.337178 1.226937,0.920202 -2.515218,2.699261 -2.515218,2.699261 -1.53367,-1.53367 -1.779059,0.06131 -2.760614,0.613476 -0.981548,0.552115 -0.06131,1.963095 -0.06131,1.963095 -5.076415,0.797512 -3.926198,6.13469 -3.864852,7.422971 0.06131,1.288289 -3.251385,3.251384 -4.110242,5.091796 -0.858857,1.840405 2.208491,5.827948 0.613468,6.073336 -1.595016,0.24539 -3.190031,-6.011991 -11.778601,-3.680808 -2.589322,0.702954 -8.343174,3.680808 -5.275824,9.754153 3.06734,6.073336 8.15913,-1.717714 9.876843,-0.858857 1.717714,0.858857 -0.490778,4.72371 -0.122691,4.785055 0.368079,0.06131 4.8464,0.168662 5.09179,5.398522 0.245388,5.229868 6.809502,4.785065 8.220482,4.907755 1.410972,0.12269 6.134682,-3.864859 6.809502,-4.048894 0.674815,-0.184034 3.374076,-2.453876 9.263377,0.920195 5.889301,3.374089 8.895296,2.883308 10.919743,4.294285 2.02445,1.410987 0.61347,4.232939 2.51523,5.153134 1.90175,0.920217 9.50876,-0.306736 11.41051,2.821966 1.90176,3.1287 -7.8524,18.833491 -10.91974,20.551201 -3.06734,1.71772 -4.478321,5.64392 -7.545665,8.15913 -3.067349,2.51523 -7.361625,5.62854 -11.410522,8.03646 -3.583968,2.1311 -4.228845,5.949 -5.825333,7.15419 28.11404,-6.24545 49.13623,-31.328971 49.13623,-61.323497 0,-34.694029 -28.125171,-62.8192016 -62.819206,-62.8192016 z M 79.442753,60.382331 c -0.858857,0.245389 -2.637917,1.840405 -6.993547,-0.736166 -4.35563,-2.576564 -7.361625,-2.085794 -7.729705,-2.515218 0,0 -0.368079,-1.0429 1.533671,-1.226937 3.905098,-0.378065 8.833951,3.619464 9.938196,3.680809 1.104246,0.06131 1.656361,-1.104245 3.619464,-0.471631 1.963103,0.631953 0.490777,1.023755 -0.368079,1.269143 z M 58.891546,7.6853614 c -0.427786,-0.311152 0.354344,-0.669418 0.82058,-1.288281 0.269103,-0.357613 0.0695,-0.951289 0.406356,-1.28829 0.92021,-0.920203 5.459876,-2.208485 4.572225,0.306734 -0.887321,2.515226 -5.12434,2.760614 -5.799161,2.269837 z m 10.98109,7.9750936 c -1.533672,-0.06131 -5.14381,-0.442837 -4.478321,-1.104246 2.591952,-2.576563 -0.981548,-3.312729 -3.190039,-3.496766 -2.208485,-0.184043 -3.128687,-1.4109786 -2.02444,-1.5336776 1.104237,-0.12269 5.521213,0.06139 6.257379,0.6748206 0.736158,0.613469 4.723709,2.208485 4.969099,3.374076 0.24538,1.16559 0,2.147138 -1.533678,2.085793 z M 83.184914,15.23103 c -1.226943,0.981547 -7.400887,-3.521968 -8.588569,-4.539674 -5.153134,-4.4169746 -7.913742,-2.9446486 -8.995903,-3.6808086 -1.082485,-0.736166 -0.696897,-1.717713 0.959464,-3.190039 1.656369,-1.472325 6.318732,0.490778 9.017994,0.797512 2.699262,0.306734 5.827955,2.392527 5.889301,4.871925 0.06131,2.4792256 2.944649,4.7595296 1.717713,5.7410846 z" />
</svg>
</i>
English
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="https://www.xianmin.org/hugo-theme-jane/zh-cn/">中文</a>
</li>
</ul>
</li>
<li class="menu-item">
<a id="openSearch" class="menu-item-link menu-item-search" href="#">
<i class="iconfont">
<svg version="1.1" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" width="18" height="18"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M973.81454219 973.81454219a91.78207815 91.78207815 0 0 1-129.80999631 0l-161.97482118-161.97482118a425.48527711 425.48527711 0 0 1-230.35931791 68.16531768 428.3346319 428.3346319 0 1 1 428.3346319-428.3346319 425.48527711 425.48527711 0 0 1-68.16531768 230.35931791l162.02961656 161.97482118a91.83687354 91.83687354 0 0 1-0.05479538 129.80999631zM451.67040679 145.69361559a305.97679241 305.97679241 0 1 0 0 611.95358361 305.97679241 305.97679241 0 0 0 0-611.95358361z">
</path>
</svg>
</i>
</a>
</li>
</ul>
</nav>
</header>
<div id="mobile-panel">
<main id="main" class="main bg-llight wallpaper">
<div class="content-wrapper">
<div id="content" class="content container">
<article class="post bg-white">
<header class="post-header">
<h1 class="post-title">Creating a New Theme</h1>
<div class="post-meta">
<div class="post-meta-author">
by
<a href="/about">
<span class="post-meta-author-name">
Michael Henderson
</span>
</a>
</div>
<div class="post-meta-time">
<time datetime="2014-09-28">
2014-09-28
</time>
</div>
<div class="post-meta-lastmod">
(LastMod:
2018-03-06)
</div>
<div class="post-meta__right">
<div class="post-meta-category">
<a href="https://www.xianmin.org/hugo-theme-jane/categories/development/"> Development </a>
<a href="https://www.xianmin.org/hugo-theme-jane/categories/golang/"> golang </a>
<a href="https://www.xianmin.org/hugo-theme-jane/categories/index/"> index </a>
</div>
</div>
</div>
</header>
<div class="post-toc" id="post-toc">
<h2 class="post-toc-title">Table of Contents</h2>
<div class="post-toc-content">
<nav id="TableOfContents">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#some-definitions">Some Definitions</a>
<ul>
<li><a href="#skins">Skins</a></li>
<li><a href="#the-home-page">The Home Page</a></li>
<li><a href="#site-configuration-file">Site Configuration File</a></li>
<li><a href="#content">Content</a></li>
<li><a href="#template-files">Template Files</a></li>
</ul>
</li>
<li><a href="#create-a-new-site">Create a New Site</a>
<ul>
<li><a href="#generate-the-html-for-the-new-site">Generate the HTML For the New Site</a></li>
<li><a href="#test-the-new-site">Test the New Site</a></li>
</ul>
</li>
<li><a href="#create-a-new-theme">Create a New Theme</a>
<ul>
<li><a href="#create-a-skeleton">Create a Skeleton</a></li>
<li><a href="#update-the-configuration-file-to-use-the-theme">Update the Configuration File to Use the Theme</a></li>
<li><a href="#generate-the-site">Generate the Site</a></li>
</ul>
</li>
<li><a href="#the-theme-development-cycle">The Theme Development Cycle</a>
<ul>
<li><a href="#purge-the-public-directory">Purge the public/ Directory</a></li>
<li><a href="#hugos-watch-option">Hugo’s Watch Option</a></li>
<li><a href="#live-reload">Live Reload</a></li>
<li><a href="#development-commands">Development Commands</a></li>
</ul>
</li>
<li><a href="#update-the-home-page-template">Update the Home Page Template</a>
<ul>
<li><a href="#make-a-static-home-page">Make a Static Home Page</a></li>
<li><a href="#build-a-dynamic-home-page">Build a “Dynamic” Home Page</a></li>
<li><a href="#list-and-single-templates">List and Single Templates</a></li>
<li><a href="#add-content-to-the-homepage">Add Content to the Homepage</a></li>
<li><a href="#add-content-to-the-posts">Add Content to the Posts</a></li>
<li><a href="#linking-to-content">Linking to Content</a></li>
<li><a href="#create-a-post-listing">Create a Post Listing</a></li>
</ul>
</li>
<li><a href="#creating-top-level-pages">Creating Top Level Pages</a></li>
<li><a href="#sharing-templates">Sharing Templates</a>
<ul>
<li><a href="#create-the-header-and-footer-partials">Create the Header and Footer Partials</a></li>
<li><a href="#update-the-home-page-template-to-use-the-partials">Update the Home Page Template to Use the Partials</a></li>
<li><a href="#update-the-default-single-template-to-use-the-partials">Update the Default Single Template to Use the Partials</a></li>
</ul>
</li>
<li><a href="#add-date-published-to-posts">Add “Date Published” to Posts</a>
<ul>
<li><a href="#add-date-published-to-the-template">Add “Date Published” to the Template</a></li>
<li><a href="#dont-repeat-yourself">Don’t Repeat Yourself</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="post-content">
<h2 id="introduction">Introduction</h2>
<p>This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.</p>
<p>We’ll start with creating a new site with a very basic template. Then we’ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.</p>
<p>In this tutorial, commands that you enter will start with the “$” prompt. The output will follow. Lines that start with “#” are comments that I’ve added to explain a point. When I show updates to a file, the “:wq” on the last line means to save the file.</p>
<p>Here’s an example:</p>
<pre tabindex="0"><code>## this is a comment
$ echo this is a command
this is a command
## edit the file
$vi foo.md
+++
date = "2014-09-28"
title = "creating a new theme"
+++
bah and humbug
:wq
## show it
$ cat foo.md
+++
date = "2014-09-28"
title = "creating a new theme"
+++
bah and humbug
$
</code></pre><h2 id="some-definitions">Some Definitions</h2>
<p>There are a few concepts that you need to understand before creating a theme.</p>
<h3 id="skins">Skins</h3>
<p>Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.</p>
<p>You have two ways to create a skin. The simplest way is to create it in the <code>layouts/</code> directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the <code>layouts/</code> directory so it will always find the skin.</p>
<p>Your second choice is to create it in a sub-directory of the <code>themes/</code> directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?</p>
<p>The difference between creating a skin in <code>layouts/</code> and creating it in <code>themes/</code> is very subtle. A skin in <code>layouts/</code> can’t be customized without updating the templates and static files that it is built from. A skin created in <code>themes/</code>, on the other hand, can be and that makes it easier for other people to use it.</p>
<p>The rest of this tutorial will call a skin created in the <code>themes/</code> directory a theme.</p>
<p>Note that you can use this tutorial to create a skin in the <code>layouts/</code> directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.</p>
<h3 id="the-home-page">The Home Page</h3>
<p>The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.</p>
<h3 id="site-configuration-file">Site Configuration File</h3>
<p>When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.</p>
<p>Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your <code>content/</code> directory and template files in your <code>themes/</code> directory. It will create HTML files in your <code>public/</code> directory. You can change this by specifying alternate locations in the configuration file.</p>
<h3 id="content">Content</h3>
<p>Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.</p>
<h4 id="front-matter">Front Matter</h4>
<p>The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “<code>+++</code>”, YAML by “<code>---</code>”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON.</p>
<p>The information in the front matter is passed into the template before the content is rendered into HTML.</p>
<h4 id="markdown">Markdown</h4>
<p>Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file.</p>
<h3 id="template-files">Template Files</h3>
<p>Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it’s published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use.</p>
<p>There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template.</p>
<p>Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site.</p>
<p>Please note that you can use the front matter to influence Hugo’s choice of templates.</p>
<h4 id="single-template">Single Template</h4>
<p>A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template.</p>
<h4 id="list-template">List Template</h4>
<p>A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups.</p>
<p>The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site.</p>
<h4 id="partial-template">Partial Template</h4>
<p>A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template.</p>
<h2 id="create-a-new-site">Create a New Site</h2>
<p>Let’s use Hugo to create a new web site. I’m a Mac user, so I’ll create mine in my home directory, in the Sites folder. If you’re using Linux, you might have to create the folder first.</p>
<p>The “new site” command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file.</p>
<pre tabindex="0"><code>$ hugo new site ~/Sites/zafta
$ cd ~/Sites/zafta
$ ls -l
total 8
drwxr-xr-x 7 quoha staff 238 Sep 29 16:49 .
drwxr-xr-x 3 quoha staff 102 Sep 29 16:49 ..
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 archetypes
-rw-r--r-- 1 quoha staff 82 Sep 29 16:49 config.toml
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 content
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 layouts
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 static
$
</code></pre><p>Take a look in the content/ directory to confirm that it is empty.</p>
<p>The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That’s a topic for a different tutorial, so please ignore them for now.</p>
<h3 id="generate-the-html-for-the-new-site">Generate the HTML For the New Site</h3>
<p>Running the <code>hugo</code> command with no options will read all the available content and generate the HTML files. It will also copy all static files (that’s everything that’s not content). Since we have an empty site, it won’t do much, but it will do it very quickly.</p>
<pre tabindex="0"><code>$ hugo --verbose
INFO: 2014/09/29 Using config file: config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
$
</code></pre><p>The “<code>--verbose</code>” flag gives extra information that will be helpful when we build the template. Every line of the output that starts with “INFO:” or “WARN:” is present because we used that flag. The lines that start with “WARN:” are warning messages. We’ll go over them later.</p>
<p>We can verify that the command worked by looking at the directory again.</p>
<pre tabindex="0"><code>$ ls -l
total 8
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 archetypes
-rw-r--r-- 1 quoha staff 82 Sep 29 16:49 config.toml
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 content
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 layouts
drwxr-xr-x 4 quoha staff 136 Sep 29 17:02 public
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 static
$
</code></pre><p>See that new public/ directory? Hugo placed all generated content there. When you’re ready to publish your web site, that’s the place to start. For now, though, let’s just confirm that we have what we’d expect from a site with no content.</p>
<pre tabindex="0"><code>$ ls -l public
total 16
-rw-r--r-- 1 quoha staff 416 Sep 29 17:02 index.xml
-rw-r--r-- 1 quoha staff 262 Sep 29 17:02 sitemap.xml
$
</code></pre><p>Hugo created two XML files, which is standard, but there are no HTML files.</p>
<h3 id="test-the-new-site">Test the New Site</h3>
<p>Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the “server” command. If it is successful, you will see output similar to the following:</p>
<pre tabindex="0"><code>$ hugo server --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
Serving pages from /Users/quoha/Sites/zafta/public
Web Server is available at http://localhost:1313
Press Ctrl+C to stop
</code></pre><p>Connect to the listed URL (it’s on the line that starts with “Web Server”). If everything is working correctly, you should get a page that shows the following:</p>
<pre tabindex="0"><code>index.xml
sitemap.xml
</code></pre><p>That’s a listing of your public/ directory. Hugo didn’t create a home page because our site has no content. When there’s no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser.</p>
<p>Let’s go back and look at those warnings again.</p>
<pre tabindex="0"><code>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
</code></pre><p>That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial.</p>
<p>Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page.</p>
<p>I like that the verbose flag causes Hugo to list the files that it’s searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we’ll cover later that explain the names and paths. For now, just remember that Hugo couldn’t find a template for the home page and it told you so.</p>
<p>At this point, you’ve got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it.</p>
<h2 id="create-a-new-theme">Create a New Theme</h2>
<p>Hugo doesn’t ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes.</p>
<p>We’re going to create a new theme called “zafta.” Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional.</p>
<p>All themes have opinions on content and layout. For example, Zafta uses “post” over “blog”. Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do.</p>
<h3 id="create-a-skeleton">Create a Skeleton</h3>
<p>Use the hugo “new” command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out.</p>
<pre tabindex="0"><code>$ hugo new theme zafta
$ ls -l
total 8
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 archetypes
-rw-r--r-- 1 quoha staff 82 Sep 29 16:49 config.toml
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 content
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 layouts
drwxr-xr-x 4 quoha staff 136 Sep 29 17:02 public
drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 static
drwxr-xr-x 3 quoha staff 102 Sep 29 17:31 themes
$ find themes -type f | xargs ls -l
-rw-r--r-- 1 quoha staff 1081 Sep 29 17:31 themes/zafta/LICENSE.md
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/archetypes/default.md
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
-rw-r--r-- 1 quoha staff 93 Sep 29 17:31 themes/zafta/theme.toml
$
</code></pre><p>The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.</p>
<p>Please take a minute to fill out the theme.toml and LICENSE.md files. They’re optional, but if you’re going to be distributing your theme, it tells the world who to praise (or blame). It’s also nice to declare the license so that people will know how they can use the theme.</p>
<pre tabindex="0"><code>$ vi themes/zafta/theme.toml
author = "michael d henderson"
description = "a minimal working template"
license = "MIT"
name = "zafta"
source_repo = ""
tags = ["tags", "categories"]
:wq
## also edit themes/zafta/LICENSE.md and change
## the bit that says "YOUR_NAME_HERE"
</code></pre><p>Note that the the skeleton’s template files are empty. Don’t worry, we’ll be changing that shortly.</p>
<pre tabindex="0"><code>$ find themes/zafta -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
$
</code></pre><h3 id="update-the-configuration-file-to-use-the-theme">Update the Configuration File to Use the Theme</h3>
<p>Now that we’ve got a theme to work with, it’s a good idea to add the theme name to the configuration file. This is optional, because you can always add “-t zafta” on all your commands. I like to put it the configuration file because I like shorter command lines. If you don’t put it in the configuration file or specify it on the command line, you won’t use the template that you’re expecting to.</p>
<p>Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format.</p>
<pre tabindex="0"><code>$ vi config.toml
theme = "zafta"
baseurl = ""
languageCode = "en-us"
title = "zafta - totally refreshing"
MetaDataFormat = "toml"
:wq
$
</code></pre><h3 id="generate-the-site">Generate the Site</h3>
<p>Now that we have an empty theme, let’s generate the site again.</p>
<pre tabindex="0"><code>$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
$
</code></pre><p>Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme’s directory.</p>
<p>Let’s check the public/ directory to see what Hugo’s created.</p>
<pre tabindex="0"><code>$ ls -l public
total 16
drwxr-xr-x 2 quoha staff 68 Sep 29 17:56 css
-rw-r--r-- 1 quoha staff 0 Sep 29 17:56 index.html
-rw-r--r-- 1 quoha staff 407 Sep 29 17:56 index.xml
drwxr-xr-x 2 quoha staff 68 Sep 29 17:56 js
-rw-r--r-- 1 quoha staff 243 Sep 29 17:56 sitemap.xml
$
</code></pre><p>Notice four things:</p>
<ol>
<li>Hugo created a home page. This is the file public/index.html.</li>
<li>Hugo created a css/ directory.</li>
<li>Hugo created a js/ directory.</li>
<li>Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn’t create any pages. That’s because it considers a “page” to be a file created directly from a content file. It doesn’t count things like the index.html files that it creates automatically.</li>
</ol>
<h4 id="the-home-page-1">The Home Page</h4>
<p>Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo’s warning message shows that it looks for three different templates:</p>
<pre tabindex="0"><code>WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
</code></pre><p>If it can’t find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed.</p>
<p>When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page.</p>
<pre tabindex="0"><code>$ find . -name index.html | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 20:21 ./public/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 ./themes/zafta/layouts/index.html
$
</code></pre><h4 id="the-magic-of-static">The Magic of Static</h4>
<p>Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are.</p>
<p>Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo’s opinion is that you’ll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don’t like that, you can change the directory names in your theme directory or even delete them completely. Hugo’s nice enough to offer its opinion, then behave nicely if you disagree.</p>
<pre tabindex="0"><code>$ find themes/zafta -type d | xargs ls -ld
drwxr-xr-x 7 quoha staff 238 Sep 29 17:38 themes/zafta
drwxr-xr-x 3 quoha staff 102 Sep 29 17:31 themes/zafta/archetypes
drwxr-xr-x 5 quoha staff 170 Sep 29 17:31 themes/zafta/layouts
drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/layouts/_default
drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/layouts/partials
drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/static
drwxr-xr-x 2 quoha staff 68 Sep 29 17:31 themes/zafta/static/css
drwxr-xr-x 2 quoha staff 68 Sep 29 17:31 themes/zafta/static/js
$
</code></pre><h2 id="the-theme-development-cycle">The Theme Development Cycle</h2>
<p>When you’re working on a theme, you will make changes in the theme’s directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy:</p>
<ol>
<li>Purge the public/ directory.</li>
<li>Run the built in web server in watch mode.</li>
<li>Open your site in a browser.</li>
<li>Update the theme.</li>
<li>Glance at your browser window to see changes.</li>
<li>Return to step 4.</li>
</ol>
<p>I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes.</p>
<p>Check the main Hugo site for information on using Git with Hugo.</p>
<h3 id="purge-the-public-directory">Purge the public/ Directory</h3>
<p>When generating the site, Hugo will create new files and update existing ones in the <code>public/</code> directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it.</p>
<p>Note: If you’re building on an SSD, you should ignore this. Churning on a SSD can be costly.</p>
<h3 id="hugos-watch-option">Hugo’s Watch Option</h3>
<p>Hugo’s “<code>--watch</code>” option will monitor the content/ and your theme directories for changes and rebuild the site automatically.</p>
<h3 id="live-reload">Live Reload</h3>
<p>Hugo’s built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, “Wow, that’s totally amazing.”</p>
<h3 id="development-commands">Development Commands</h3>
<p>Use the following commands as the basis for your workflow.</p>
<pre tabindex="0"><code>## purge old files. hugo will recreate the public directory.
##
$ rm -rf public
##
## run hugo in watch mode
##
$ hugo server --watch --verbose
</code></pre><p>Here’s sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I’ve said this before, it’s amazing.</p>
<pre tabindex="0"><code>$ rm -rf public
$ hugo server --watch --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
Watching for changes in /Users/quoha/Sites/zafta/content
Serving pages from /Users/quoha/Sites/zafta/public
Web Server is available at http://localhost:1313
Press Ctrl+C to stop
INFO: 2014/09/29 File System Event: ["/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html": MODIFY|ATTRIB]
Change detected, rebuilding site
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 1 ms
</code></pre><h2 id="update-the-home-page-template">Update the Home Page Template</h2>
<p>The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme’s layout/ directory:</p>
<ol>
<li>index.html</li>
<li>_default/list.html</li>
<li>_default/single.html</li>
</ol>
<p>We could update one of the default templates, but a good design decision is to update the most specific template available. That’s not a hard and fast rule (in fact, we’ll break it a few times in this tutorial), but it is a good generalization.</p>
<h3 id="make-a-static-home-page">Make a Static Home Page</h3>
<p>Right now, that page is empty because we don’t have any content and we don’t have any logic in the template. Let’s change that by adding some text to the template.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
</body>
</html>
:wq
$
</code></pre><p>Build the web site and then verify the results.</p>
<pre tabindex="0"><code>$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 78 Sep 29 21:26 public/index.html
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
</html>
</code></pre><h4 id="live-reload-1">Live Reload</h4>
<p>Note: If you’re running the server with the <code>--watch</code> option, you’ll see different content in the file:</p>
<pre tabindex="0"><code>$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
<script>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':1313/livereload.js?mindelay=10"></'
+ 'script>')</script></body>
</html>
</code></pre><p>When you use <code>--watch</code>, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it.</p>
<h3 id="build-a-dynamic-home-page">Build a “Dynamic” Home Page</h3>
<p>“Dynamic home page?” Hugo’s a static web site generator, so this seems an odd thing to say. I mean let’s have the home page automatically reflect the content in the site every time Hugo builds it. We’ll use iteration in the template to do that.</p>
<h4 id="create-new-posts">Create New Posts</h4>
<p>Now that we have the home page generating static content, let’s add some content to the site. We’ll display these posts as a list on the home page and on their own page, too.</p>
<p>Hugo has a command to generate a skeleton post, just like it does for sites and themes.</p>
<pre tabindex="0"><code>$ hugo --verbose new post/first.md
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 attempting to create post/first.md of post
INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
ERROR: 2014/09/29 Unable to Cast <nil> to map[string]interface{}
$
</code></pre><p>That wasn’t very nice, was it?</p>
<p>The “new” command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there’s a theme. For me, the workaround was to create an archetypes file specifically for the post type.</p>
<pre tabindex="0"><code>$ vi themes/zafta/archetypes/post.md
+++
Description = ""
Tags = []
Categories = []
+++
:wq
$ find themes/zafta/archetypes -type f | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 21:53 themes/zafta/archetypes/default.md
-rw-r--r-- 1 quoha staff 51 Sep 29 21:54 themes/zafta/archetypes/post.md
$ hugo --verbose new post/first.md
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 attempting to create post/first.md of post
INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
/Users/quoha/Sites/zafta/content/post/first.md created
$ hugo --verbose new post/second.md
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 attempting to create post/second.md of post
INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
/Users/quoha/Sites/zafta/content/post/second.md created
$ ls -l content/post
total 16
-rw-r--r-- 1 quoha staff 104 Sep 29 21:54 first.md
-rw-r--r-- 1 quoha staff 105 Sep 29 21:57 second.md
$ cat content/post/first.md
+++
Categories = []
Description = ""
Tags = []
date = "2014-09-29T21:54:53-05:00"
title = "first"
+++
my first post
$ cat content/post/second.md
+++
Categories = []
Description = ""
Tags = []
date = "2014-09-29T21:57:09-05:00"
title = "second"
+++
my second post
$
</code></pre><p>Build the web site and then verify the results.</p>
<pre tabindex="0"><code>$ rm -rf public
$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
$
</code></pre><p>The output says that it created 2 pages. Those are our new posts:</p>
<pre tabindex="0"><code>$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 78 Sep 29 22:13 public/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:13 public/post/first/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:13 public/post/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:13 public/post/second/index.html
$
</code></pre><p>The new files are empty because because the templates used to generate the content are empty. The homepage doesn’t show the new content, either. We have to update the templates to add the posts.</p>
<h3 id="list-and-single-templates">List and Single Templates</h3>
<p>In Hugo, we have three major kinds of templates. There’s the home page template that we updated previously. It is used only by the home page. We also have “single” templates which are used to generate output for a single content file. We also have “list” templates that are used to group multiple pieces of content before generating output.</p>
<p>Generally speaking, list templates are named “list.html” and single templates are named “single.html.”</p>
<p>There are three other types of templates: partials, content views, and terms. We will not go into much detail on these.</p>
<h3 id="add-content-to-the-homepage">Add Content to the Homepage</h3>
<p>The home page will contain a list of posts. Let’s update its template to add the posts that we just created. The logic in the template will run every time we build the site.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<html>
<body>
{{ range first 10 .Data.Pages }}
<h1>{{ .Title }}</h1>
{{ end }}
</body>
</html>
:wq
$
</code></pre><p>Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between “{{” and “}}”. In our template, the commands are:</p>
<ol>
<li>range</li>
<li>.Title</li>
<li>end</li>
</ol>
<p>The “range” command is an iterator. We’re going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created.</p>
<p>The “.Title” command prints the value of the “title” variable. Hugo pulls it from the front matter in the Markdown file.</p>
<p>The “end” command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds “end.” Everything between the “range” and “end” is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one.</p>
<p>It’s helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files.</p>
<p>Build the web site and then verify the results.</p>
<pre tabindex="0"><code>$ rm -rf public
$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 94 Sep 29 22:23 public/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/first/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/second/index.html
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<h1>second</h1>
<h1>first</h1>
</body>
</html>
$
</code></pre><p>Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let’s take a moment to appreciate what we’ve done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you’ve learned everything you need to know to build a theme. All that’s really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine.</p>
<p>And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don’t worry, though, that’s all to come.</p>
<h3 id="add-content-to-the-posts">Add Content to the Posts</h3>
<p>We’re working with posts, which are in the content/post/ directory. That means that their section is “post” (and if we don’t do something weird, their type is also “post”).</p>
<p>Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can’t find one, then it will look in the _default/ directory. There are some twists that we’ll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html.</p>
<p>Now that we know the search rule, let’s see what we actually have available:</p>
<pre tabindex="0"><code>$ find themes/zafta -name single.html | xargs ls -l
-rw-r--r-- 1 quoha staff 132 Sep 29 17:31 themes/zafta/layouts/_default/single.html
</code></pre><p>We could create a new template, post/single.html, or change the default. Since we don’t know of any other content types, let’s start with updating the default.</p>
<p>Remember, any content that we haven’t created a template for will end up using this template. That can be good or bad. Bad because I know that we’re going to be adding different types of content and we’re going to end up undoing some of the changes we’ve made. It’s good because we’ll be able to see immediate results. It’s also good to start here because we can start to build the basic layout for the site. As we add more content types, we’ll refactor this file and move logic around. Hugo makes that fairly painless, so we’ll accept the cost and proceed.</p>
<p>Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you’re building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That’s a refreshing amount of joy right there.</p>
<h4 id="update-the-template-file">Update the Template File</h4>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/_default/single.html
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
{{ .Content }}
</body>
</html>
:wq
$
</code></pre><p>Build the web site and verify the results.</p>
<pre tabindex="0"><code>$ rm -rf public
$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 94 Sep 29 22:40 public/index.html
-rw-r--r-- 1 quoha staff 125 Sep 29 22:40 public/post/first/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:40 public/post/index.html
-rw-r--r-- 1 quoha staff 128 Sep 29 22:40 public/post/second/index.html
$ cat public/post/first/index.html
<!DOCTYPE html>
<html>
<head>
<title>first</title>
</head>
<body>
<h1>first</h1>
<p>my first post</p>
</body>
</html>
$ cat public/post/second/index.html
<!DOCTYPE html>
<html>
<head>
<title>second</title>
</head>
<body>
<h1>second</h1>
<p>my second post</p>
</body>
</html>
$
</code></pre><p>Notice that the posts now have content. You can go to localhost:1313/post/first to verify.</p>
<h3 id="linking-to-content">Linking to Content</h3>
<p>The posts are on the home page. Let’s add a link from there to the post. Since this is the home page, we’ll update its template.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<html>
<body>
{{ range first 10 .Data.Pages }}
<h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
{{ end }}
</body>
</html>
</code></pre><p>Build the web site and verify the results.</p>
<pre tabindex="0"><code>$ rm -rf public
$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 149 Sep 29 22:44 public/index.html
-rw-r--r-- 1 quoha staff 125 Sep 29 22:44 public/post/first/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:44 public/post/index.html
-rw-r--r-- 1 quoha staff 128 Sep 29 22:44 public/post/second/index.html
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<h1><a href="/post/second/">second</a></h1>
<h1><a href="/post/first/">first</a></h1>
</body>
</html>
$
</code></pre><h3 id="create-a-post-listing">Create a Post Listing</h3>
<p>We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let’s make it show a list of all posts (not just the first ten).</p>
<p>We need to decide which template to update. This will be a listing, so it should be a list template. Let’s take a quick look and see which list templates are available.</p>
<pre tabindex="0"><code>$ find themes/zafta -name list.html | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
</code></pre><p>As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don’t have multiple content types, so let’s stay consistent and update the default list template.</p>
<h2 id="creating-top-level-pages">Creating Top Level Pages</h2>
<p>Let’s add an “about” page and display it at the top level (as opposed to a sub-level like we did with posts).</p>
<p>The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let’s verify that by creating an “about” page at the top level:</p>
<pre tabindex="0"><code>$ vi content/about.md
+++
title = "about"
description = "about this site"
date = "2014-09-27"
slug = "about time"
+++
## about us
i'm speechless
:wq
</code></pre><p>Generate the web site and verify the results.</p>
<pre tabindex="0"><code>$ find public -name '*.html' | xargs ls -l
-rw-rw-r-- 1 mdhender staff 334 Sep 27 15:08 public/about-time/index.html
-rw-rw-r-- 1 mdhender staff 527 Sep 27 15:08 public/index.html
-rw-rw-r-- 1 mdhender staff 358 Sep 27 15:08 public/post/first-post/index.html
-rw-rw-r-- 1 mdhender staff 0 Sep 27 15:08 public/post/index.html
-rw-rw-r-- 1 mdhender staff 342 Sep 27 15:08 public/post/second-post/index.html
</code></pre><p>Notice that the page wasn’t created at the top level. It was created in a sub-directory named ‘about-time/’. That name came from our slug. Hugo will use the slug to name the generated content. It’s a reasonable default, by the way, but we can learn a few things by fighting it for this file.</p>
<p>One other thing. Take a look at the home page.</p>
<pre tabindex="0"><code>$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<h1><a href="http://localhost:1313/post/theme/">creating a new theme</a></h1>
<h1><a href="http://localhost:1313/about-time/">about</a></h1>
<h1><a href="http://localhost:1313/post/second-post/">second</a></h1>
<h1><a href="http://localhost:1313/post/first-post/">first</a></h1>
<script>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':1313/livereload.js?mindelay=10"></'
+ 'script>')</script></body>
</html>
</code></pre><p>Notice that the “about” link is listed with the posts? That’s not desirable, so let’s change that first.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<html>
<body>
<h1>posts</h1>
{{ range first 10 .Data.Pages }}
{{ if eq .Type "post"}}
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
{{ end }}
{{ end }}
<h1>pages</h1>
{{ range .Data.Pages }}
{{ if eq .Type "page" }}
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
{{ end }}
{{ end }}
</body>
</html>
:wq
</code></pre><p>Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it.</p>
<p>But, that about page still renders to about-time/index.html.</p>
<pre tabindex="0"><code>$ find public -name '*.html' | xargs ls -l
-rw-rw-r-- 1 mdhender staff 334 Sep 27 15:33 public/about-time/index.html
-rw-rw-r-- 1 mdhender staff 645 Sep 27 15:33 public/index.html
-rw-rw-r-- 1 mdhender staff 358 Sep 27 15:33 public/post/first-post/index.html
-rw-rw-r-- 1 mdhender staff 0 Sep 27 15:33 public/post/index.html
-rw-rw-r-- 1 mdhender staff 342 Sep 27 15:33 public/post/second-post/index.html
</code></pre><p>Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let’s do it the hard way and change the permalink in the configuration file.</p>
<pre tabindex="0"><code>$ vi config.toml
[permalinks]
page = "/:title/"
about = "/:filename/"
</code></pre><p>Generate the web site and verify that this didn’t work. Hugo lets “slug” or “URL” override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place.</p>
<h2 id="sharing-templates">Sharing Templates</h2>
<p>If you’ve been following along, you probably noticed that posts have titles in the browser and the home page doesn’t. That’s because we didn’t put the title in the home page’s template (layouts/index.html). That’s an easy thing to do, but let’s look at a different option.</p>
<p>We can put the common bits into a shared template that’s stored in the themes/zafta/layouts/partials/ directory.</p>
<h3 id="create-the-header-and-footer-partials">Create the Header and Footer Partials</h3>
<p>In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme’s presentation.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/partials/header.html
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
:wq
$ vi themes/zafta/layouts/partials/footer.html
</body>
</html>
:wq
</code></pre><h3 id="update-the-home-page-template-to-use-the-partials">Update the Home Page Template to Use the Partials</h3>
<p>The most noticeable difference between a template call and a partials call is the lack of path:</p>
<pre tabindex="0"><code>{{ template "theme/partials/header.html" . }}
</code></pre><p>versus</p>
<pre tabindex="0"><code>{{ partial "header.html" . }}
</code></pre><p>Both pass in the context.</p>
<p>Let’s change the home page template to use these new partials.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/index.html
{{ partial "header.html" . }}
<h1>posts</h1>
{{ range first 10 .Data.Pages }}
{{ if eq .Type "post"}}
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
{{ end }}
{{ end }}
<h1>pages</h1>
{{ range .Data.Pages }}
{{ if or (eq .Type "page") (eq .Type "about") }}
<h2><a href="{{ .Permalink }}">{{ .Type }} - {{ .Title }} - {{ .RelPermalink }}</a></h2>
{{ end }}
{{ end }}
{{ partial "footer.html" . }}
:wq
</code></pre><p>Generate the web site and verify the results. The title on the home page is now “your title here”, which comes from the “title” variable in the config.toml file.</p>
<h3 id="update-the-default-single-template-to-use-the-partials">Update the Default Single Template to Use the Partials</h3>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/_default/single.html
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ partial "footer.html" . }}
:wq
</code></pre><p>Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file.</p>
<h2 id="add-date-published-to-posts">Add “Date Published” to Posts</h2>
<p>It’s common to have posts display the date that they were written or published, so let’s add that. The front matter of our posts has a variable named “date.” It’s usually the date the content was created, but let’s pretend that’s the value we want to display.</p>
<h3 id="add-date-published-to-the-template">Add “Date Published” to the Template</h3>
<p>We’ll start by updating the template used to render the posts. The template code will look like:</p>
<pre tabindex="0"><code>{{ .Date.Format "Mon, Jan 2, 2006" }}
</code></pre><p>Posts use the default single template, so we’ll change that file.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/_default/single.html
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
<h2>{{ .Date.Format "Mon, Jan 2, 2006" }}</h2>
{{ .Content }}
{{ partial "footer.html" . }}
:wq
</code></pre><p>Generate the web site and verify the results. The posts now have the date displayed in them. There’s a problem, though. The “about” page also has the date displayed.</p>
<p>As usual, there are a couple of ways to make the date display only on posts. We could do an “if” statement like we did on the home page. Another way would be to create a separate template for posts.</p>
<p>The “if” solution works for sites that have just a couple of content types. It aligns with the principle of “code for today,” too.</p>
<p>Let’s assume, though, that we’ve made our site so complex that we feel we have to create a new template type. In Hugo-speak, we’re going to create a section template.</p>
<p>Let’s restore the default single template before we forget.</p>
<pre tabindex="0"><code>$ mkdir themes/zafta/layouts/post
$ vi themes/zafta/layouts/_default/single.html
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ partial "footer.html" . }}
:wq
</code></pre><p>Now we’ll update the post’s version of the single template. If you remember Hugo’s rules, the template engine will use this version over the default.</p>
<pre tabindex="0"><code>$ vi themes/zafta/layouts/post/single.html
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
<h2>{{ .Date.Format "Mon, Jan 2, 2006" }}</h2>
{{ .Content }}
{{ partial "footer.html" . }}
:wq
</code></pre><p>Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn’t.</p>
<h3 id="dont-repeat-yourself">Don’t Repeat Yourself</h3>
<p>DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you’re figuring that out, accept that you’ll be doing some refactoring. Hugo makes that easy and fast, so it’s okay to delay splitting up a template.</p>
</div>
<div class="post-copyright">
<p class="copyright-item">
<span class="item-title">Author</span>
<span class="item-content">Michael Henderson</span>
</p>
<p class="copyright-item">
<span class="item-title">LastMod</span>
<span class="item-content">
2018-03-06
<a href="https://github.com/xianmin/hugo-theme-jane/commit/41f99965de2ffca4a92d0b48394147469ba961db" title="categories page update">
(41f9996)
</a>
<br>categories page update
</span>
</p>
<p class="copyright-item">
<span class="item-title">License</span>
<span class="item-content"><a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a></span>
</p>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="https://www.xianmin.org/hugo-theme-jane/tags/go/">go</a>
<a href="https://www.xianmin.org/hugo-theme-jane/tags/golang/">golang</a>
<a href="https://www.xianmin.org/hugo-theme-jane/tags/templates/">templates</a>
<a href="https://www.xianmin.org/hugo-theme-jane/tags/themes/">themes</a>
<a href="https://www.xianmin.org/hugo-theme-jane/tags/development/">development</a>
</div>
<nav class="post-nav">
<a class="prev" href="/hugo-theme-jane/post/this-is-a-very-long-title/">
<i class="iconfont">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18">
<path d="M691.908486 949.511495l75.369571-89.491197c10.963703-12.998035 10.285251-32.864502-1.499144-44.378743L479.499795 515.267417 757.434875 204.940602c11.338233-12.190647 11.035334-32.285311-0.638543-44.850487l-80.46666-86.564541c-11.680017-12.583596-30.356378-12.893658-41.662889-0.716314L257.233596 494.235404c-11.332093 12.183484-11.041474 32.266891 0.657986 44.844348l80.46666 86.564541c1.772366 1.910513 3.706415 3.533476 5.750981 4.877077l306.620399 321.703933C662.505829 963.726242 680.945807 962.528973 691.908486 949.511495z"></path>
</svg>
</i>
<span class="prev-text nav-default">This is a very long title This is a very long title This is a very long title This is a very long title This is a very long title</span>
<span class="prev-text nav-mobile">Prev</span>
</a>
<a class="next" href="/hugo-theme-jane/post/goisforlovers/">
<span class="next-text nav-default">(Hu)go Template Primer</span>
<span class="prev-text nav-mobile">Next</span>
<i class="iconfont">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18">
<path d="M332.091514 74.487481l-75.369571 89.491197c-10.963703 12.998035-10.285251 32.864502 1.499144 44.378743l286.278095 300.375162L266.565125 819.058374c-11.338233 12.190647-11.035334 32.285311 0.638543 44.850487l80.46666 86.564541c11.680017 12.583596 30.356378 12.893658 41.662889 0.716314l377.434212-421.426145c11.332093-12.183484 11.041474-32.266891-0.657986-44.844348l-80.46666-86.564541c-1.772366-1.910513-3.706415-3.533476-5.750981-4.877077L373.270379 71.774697C361.493148 60.273758 343.054193 61.470003 332.091514 74.487481z"></path>
</svg>
</i>
</a>
</nav>
</footer>
</article>
<div class="post bg-white">
<script
src="https://giscus.app/client.js"
data-repo="xianmin/comments-for-hugo-theme-jane"
data-repo-id="MDEwOlJlcG9zaXRvcnkxNDAyNDYzNjc="
data-category="Announcements"
data-category-id="DIC_kwDOCFv9X84CRRWF"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="light"
data-lang="en"
crossorigin="anonymous"
async
></script>
</div>
<div class="disqus-comment">
<div class="disqus-button" id="load_disqus" onclick="load_disqus()">
Show Disqus Comments
</div>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_config = function () {
this.page.url = "https://www.xianmin.org/hugo-theme-jane/post/creating-a-new-theme/";
};
function load_disqus() {
if (window.location.hostname === 'localhost') return;
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
var disqus_shortname = 'xianmin12';
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
$('#load_disqus').remove();
};
</script>
<noscript
>Please enable JavaScript to view the
<a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</div>
</div>
</div>
</main>
<footer id="footer" class="footer">
<div class="icon-links">
<a href="mailto:your@email.com" rel="me noopener" class="iconfont"
title="email" >
<svg class="icon" viewBox="0 0 1451 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M664.781909 681.472759 0 97.881301C0 3.997201 71.046997 0 71.046997 0L474.477909 0 961.649408 0 1361.641813 0C1361.641813 0 1432.688811 3.997201 1432.688811 97.881301L771.345323 681.472759C771.345323 681.472759 764.482731 685.154773 753.594283 688.65053L753.594283 688.664858C741.602731 693.493018 729.424896 695.068979 718.077952 694.839748 706.731093 695.068979 694.553173 693.493018 682.561621 688.664858L682.561621 688.65053C671.644501 685.140446 664.781909 681.472759 664.781909 681.472759L664.781909 681.472759ZM718.063616 811.603883C693.779541 811.016482 658.879232 802.205449 619.10784 767.734955 542.989056 701.759633 0 212.052267 0 212.052267L0 942.809523C0 942.809523 0 1024 83.726336 1024L682.532949 1024 753.579947 1024 1348.948139 1024C1432.688811 1024 1432.688811 942.809523 1432.688811 942.809523L1432.688811 212.052267C1432.688811 212.052267 893.138176 701.759633 817.019477 767.734955 777.248 802.205449 742.347691 811.03081 718.063616 811.603883L718.063616 811.603883Z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="stack-overflow" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M809.714286 932.571429l-638.857143 0 0-274.285714-91.428571 0 0 365.714286 821.714286 0 0-365.714286-91.428571 0 0 274.285714zm-538.285714-299.428571l18.857143-89.714286 447.428571 94.285714-18.857143 89.142857zm58.857143-213.714286l38.285714-83.428571 414.285714 193.714286-38.285714 82.857143zm114.857143-203.428571l58.285714-70.285714 350.857143 293.142857-58.285714 70.285714zm226.857143-216l272.571429 366.285714-73.142857 54.857143-272.571429-366.285714zm-410.285714 840.571429l0-90.857143 457.142857 0 0 90.857143-457.142857 0z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="twitter" target="_blank"
>
<svg class="icon" viewBox="0 0 1264 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M1229.8616 18.043658c0 0-117.852626 63.135335-164.151872 67.344358-105.225559-164.151872-505.082682-92.598492-437.738325 223.078185C278.622548 312.675223 89.216542 47.506814 89.216542 47.506814s-117.852626 189.406006 75.762402 345.139833C127.097743 396.85567 55.544363 371.601535 55.544363 371.601535S26.081207 535.753407 253.368414 615.724832c-21.045112 29.463156-113.643603 8.418045-113.643603 8.418045s25.254134 143.10676 231.496229 180.987961c-143.10676 130.479693-387.230056 92.598492-370.393967 105.225559 206.242095 189.406006 1119.599946 231.496229 1128.01799-643.98042C1179.353331 249.539887 1263.533778 123.269217 1263.533778 123.269217s-130.479693 37.881201-138.897738 33.672179C1225.652577 98.015083 1229.8616 18.043658 1229.8616 18.043658"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="facebook" target="_blank"
>
<svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="33" height="33">
<path d="M965.7344 2.7648c14.848 0 28.2624 5.5296 40.2432 16.6912C1017.9584 30.5152 1024 43.52 1024 58.2656l0 910.2336c0 14.848-6.0416 27.7504-18.0224 38.8096C993.8944 1018.4704 980.48 1024 965.7344 1024L704.9216 1024 704.9216 629.9648l133.2224 0 19.456-155.4432-152.576 0L705.024 373.0432c0-50.688 25.9072-76.0832 77.7216-76.0832l80.4864 0L863.232 163.5328c-27.7504-5.4272-67.4816-8.192-119.296-8.192-59.1872 0-106.8032 18.0224-142.9504 54.0672C564.736 245.5552 546.7136 296.0384 546.7136 360.7552l0 113.7664L413.4912 474.5216l0 155.4432 133.2224 0L546.7136 1024 55.5008 1024c-14.848 0-27.7504-5.5296-38.8096-16.6912C5.5296 996.2496 0 983.3472 0 968.4992L0 58.2656C0 43.52 5.5296 30.5152 16.6912 19.456c11.0592-11.0592 24.064-16.6912 38.8096-16.6912L965.7344 2.7648z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="linkedin" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="33" height="33">
<path d="M872.405333 872.618667h-151.637333v-237.610667c0-56.661333-1.152-129.578667-79.018667-129.578667-79.061333 0-91.136 61.653333-91.136 125.397334v241.792H398.976V384h145.664v66.602667h1.962667c20.352-38.4 69.845333-78.933333 143.786666-78.933334 153.642667 0 182.058667 101.12 182.058667 232.746667v268.202667zM227.712 317.141333a87.978667 87.978667 0 0 1-88.021333-88.106666 88.064 88.064 0 1 1 88.021333 88.106666z m76.032 555.477334H151.68V384h152.064v488.618667zM948.266667 0H75.562667C33.792 0 0 33.024 0 73.770667v876.458666C0 991.018667 33.792 1024 75.562667 1024h872.576C989.866667 1024 1024 991.018667 1024 950.229333V73.770667C1024 33.024 989.866667 0 948.138667 0h0.128z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="google" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M853.333333 85.333333C900.266667 85.333333 938.666667 123.733333 938.666667 170.666667L938.666667 853.333333C938.666667 900.266667 900.266667 938.666667 853.333333 938.666667L170.666667 938.666667C123.733333 938.666667 85.333333 900.266667 85.333333 853.333333L85.333333 170.666667C85.333333 123.306667 123.733333 85.333333 170.666667 85.333333L853.333333 85.333333M853.333333 512 768 512 768 426.666667 725.333333 426.666667 725.333333 512 640 512 640 554.666667 725.333333 554.666667 725.333333 640 768 640 768 554.666667 853.333333 554.666667 853.333333 512M384 481.706667 384 554.666667 506.026667 554.666667C499.626667 584.96 469.333333 645.973333 384 645.973333 311.04 645.973333 253.013333 584.96 253.013333 512 253.013333 439.04 311.04 378.026667 384 378.026667 426.666667 378.026667 453.973333 396.373333 469.333333 411.306667L527.36 356.693333C490.666667 320 442.026667 298.666667 384 298.666667 264.96 298.666667 170.666667 392.96 170.666667 512 170.666667 631.04 264.96 725.333333 384 725.333333 506.026667 725.333333 588.373333 640 588.373333 517.973333 588.373333 503.04 588.373333 493.653333 584.96 481.706667L384 481.706667Z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="github" target="_blank"
>
<svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M512 12.672c-282.88 0-512 229.248-512 512 0 226.261333 146.688 418.133333 350.08 485.76 25.6 4.821333 34.986667-11.008 34.986667-24.618667 0-12.16-0.426667-44.373333-0.64-87.04-142.421333 30.890667-172.458667-68.693333-172.458667-68.693333C188.672 770.986667 155.008 755.2 155.008 755.2c-46.378667-31.744 3.584-31.104 3.584-31.104 51.413333 3.584 78.421333 52.736 78.421333 52.736 45.653333 78.293333 119.850667 55.68 149.12 42.581333 4.608-33.109333 17.792-55.68 32.426667-68.48-113.706667-12.8-233.216-56.832-233.216-253.013333 0-55.893333 19.84-101.546667 52.693333-137.386667-5.76-12.928-23.04-64.981333 4.48-135.509333 0 0 42.88-13.738667 140.8 52.48 40.96-11.392 84.48-17.024 128-17.28 43.52 0.256 87.04 5.888 128 17.28 97.28-66.218667 140.16-52.48 140.16-52.48 27.52 70.528 10.24 122.581333 5.12 135.509333 32.64 35.84 52.48 81.493333 52.48 137.386667 0 196.693333-119.68 240-233.6 252.586667 17.92 15.36 34.56 46.762667 34.56 94.72 0 68.522667-0.64 123.562667-0.64 140.202666 0 13.44 8.96 29.44 35.2 24.32C877.44 942.592 1024 750.592 1024 524.672c0-282.752-229.248-512-512-512"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="weibo" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M385.714286 733.714286q12-19.428571 6.285714-39.428571t-25.714286-28.571429q-19.428571-8-41.714286-0.571429t-34.285714 26.285714q-12.571429 19.428571-7.428571 39.142857t24.571429 28.857143 42.571429 1.428571 35.714286-27.142857zm53.714286-69.142857q4.571429-7.428571 2-15.142857t-10-10.571429q-8-2.857143-16.285714 2.857143t-12.285714 10.571429q-9.714286 17.714286 7.428571 25.714286 8 2.857143 16.571429 2.857143t12.571429-10.571429zm99.428571 61.142857q-25.714286 58.285714-90.285714 85.714286t-128 6.857143q-61.142857-19.428571-84.285714-72.285714t3.714286-107.142857q26.857143-53.142857 86.571429-79.428571t120.285714-10.857143q63.428571 16.571429 90.571429 68.285714t1.428571 108.857143zm178.285714-91.428571q-5.142857-54.857143-50.857143-97.142857t-119.142857-62.285714-156.857143-12q-127.428571 13.142857-211.142857 80.857143t-75.714286 151.142857q5.142857 54.857143 50.857143 97.142857t119.142857 62.285714 156.857143 12q127.428571-13.142857 211.142857-80.857143t75.714286-151.142857zm176 2.285714q0 38.857143-21.142857 79.714286t-62.285714 78.285714-96.285714 67.142857-129.142857 47.428571-154.571429 17.714286-157.142857-19.142857-137.428571-53.142857-98-86.285714-37.142857-114q0-65.714286 39.714286-140t112.857143-147.428571q96.571429-96.571429 195.142857-134.857143t140.857143 4q37.142857 36.571429 11.428571 119.428571-2.285714 8-0.571429 11.428571t5.714286 4 8.285714 2.857143 7.714286-2l3.428571-1.142857q79.428571-33.714286 140.571429-33.714286t87.428571 34.857143q25.714286 36 0 101.714286-1.142857 7.428571-2.571429 11.428571t2.571429 7.142857 6.857143 4.285714 9.714286 3.428571q32.571429 10.285714 58.857143 26.857143t45.714286 46.571429 19.428571 66.571429zm-42.285714-356.571429q24 26.857143 31.142857 62t-3.714286 67.142857q-4.571429 13.142857-16.857143 19.428571t-25.428571 2.285714q-13.142857-4.571429-19.428571-16.857143t-2.285714-25.428571q11.428571-36-13.714286-63.428571t-61.142857-20q-13.714286 2.857143-25.714286-4.571429t-14.285714-21.142857q-2.857143-13.714286 4.571429-25.428571t21.142857-14.571429q34.285714-7.428571 68 3.142857t57.714286 37.428571zm103.428571-93.142857q49.714286 54.857143 64.285714 127.142857t-7.714286 138q-5.142857 15.428571-19.428571 22.857143t-29.714286 2.285714-22.857143-19.428571-2.857143-29.714286q16-46.857143 5.714286-98.285714t-45.714286-90.285714q-35.428571-39.428571-84.571429-54.571429t-98.857143-4.857143q-16 3.428571-29.714286-5.428571t-17.142857-24.857143 5.428571-29.428571 24.857143-16.857143q70.285714-14.857143 139.428571 6.571429t118.857143 76.857143z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="zhihu" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M351.791182 562.469462l192.945407 0c0-45.367257-21.3871-71.939449-21.3871-71.939449L355.897709 490.530013c3.977591-82.182744 7.541767-187.659007 8.816806-226.835262l159.282726 0c0 0-0.86367-67.402109-18.578124-67.402109s-279.979646 0-279.979646 0 16.850783-88.141456 39.318494-127.053698c0 0-83.60514-4.510734-112.121614 106.962104S81.344656 355.077018 76.80834 367.390461c-4.536316 12.313443 24.62791 5.832845 36.941354 0 12.313443-5.832845 68.050885-25.924439 84.252893-103.69571l86.570681 0c1.165546 49.28652 4.596691 200.335724 3.515057 226.835262L109.86113 490.530013c-25.275663 18.147312-33.701566 71.939449-33.701566 71.939449L279.868105 562.469462c-8.497535 56.255235-23.417339 128.763642-44.275389 167.210279-33.05279 60.921511-50.55235 116.65793-169.802314 212.576513 0 0-19.442818 14.257725 40.829917 9.073656 60.273758-5.185093 117.305683-20.739347 156.840094-99.807147 20.553105-41.107233 41.805128-93.250824 58.386782-146.138358l-0.055259 0.185218 167.855986 193.263655c0 0 22.035876-51.847855 5.832845-108.880803L371.045711 650.610918l-42.1244 31.157627-0.045025 0.151449c11.69946-41.020252 20.11206-81.5749 22.726607-116.858498C351.665315 564.212152 351.72876 563.345412 351.791182 562.469462z"></path>
<path d="M584.918753 182.033893l0 668.840094 70.318532 0 28.807093 80.512708 121.875768-80.512708 153.600307 0L959.520453 182.033893 584.918753 182.033893zM887.150192 778.934538l-79.837326 0-99.578949 65.782216-23.537066-65.782216-24.855084 0L659.341766 256.673847l227.807403 0L887.149169 778.934538z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="douban" target="_blank"
>
<svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M926.917973 37.80608C959.65184 37.80608 986.19392 64.34816 986.19392 97.082027L986.19392 926.917973C986.19392 959.65184 959.65184 986.19392 926.917973 986.19392L97.082027 986.19392C64.34816 986.19392 37.80608 959.65184 37.80608 926.917973L37.80608 97.082027C37.80608 64.34816 64.34816 37.80608 97.082027 37.80608zM176.653653 176.19968 176.653653 252.678827 825.658027 252.678827 825.658027 176.19968zM217.719467 316.146347 217.719467 628.08064 273.524053 628.08064 341.292373 770.39616 157.259093 770.39616 157.259093 845.417813 842.949973 845.417813 842.949973 770.39616 654.226773 770.39616 722.899627 628.08064 783.67744 628.08064 783.67744 316.146347zM684.885333 392.891733 684.885333 553.987413 312.576 553.987413 312.576 392.891733zM570.770773 770.39616 426.653013 770.39616 359.621973 628.08064 639.443627 628.08064z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="pocket" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M912.569234 73.142857a88.429714 88.429714 0 0 1 88.576 89.161143v296.557714C1001.145234 732.562286 782.301806 950.857143 510.28352 950.857143A489.837714 489.837714 0 0 1 18.288091 458.861714V162.304A90.002286 90.002286 0 0 1 107.449234 73.142857h805.156572z m-402.285714 608a68.388571 68.388571 0 0 0 46.848-18.870857l230.838857-221.696a68.022857 68.022857 0 0 0 21.138286-48.566857 67.547429 67.547429 0 0 0-114.285714-48.566857l-184.576 177.152-184.576-177.152a67.328 67.328 0 0 0-46.299429-18.870857 67.547429 67.547429 0 0 0-46.884571 116.004571l231.424 221.696c11.995429 11.995429 29.147429 18.870857 46.299428 18.870857z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="tumblr" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M556.716946 378.027729l133.939525 0 0 89.307002L556.716946 467.334731 556.716946 601.318258c0 58.898435 8.290827 92.557022 53.140291 89.809445 10.382465-0.677429 22.25077-1.855254 35.687804-5.586229 13.437034-3.729951 24.257473-7.458879 32.372292-11.190877l12.739139-5.606695 0 82.546018c-3.403516 2.070148-8.463766 4.820796-15.007809 8.048303-6.631024 3.338025-21.029966 7.656377-43.016723 13.045107-21.988804 5.41022-44.937468 8.070816-68.844971 8.070816-51.395554 0-89.177042-10.994402-113.608477-33.17968-24.343431-22.097274-27.572986-56.147788-27.572986-101.195773L422.605505 467.334731l-89.263 0-0.435928-66.64077c38.480406-12.369725 67.798129-29.734208 88.128153-52.114938 20.332071-22.273283 33.333176-57.021691 38.829354-104.22783l96.853885-0.393973L556.717969 378.027729zM958.70846 243.958244l0 536.105001c0 98.730629-80.013335 178.722474-178.615027 178.722474L243.991502 958.785719c-98.774631 0-178.700985-79.991846-178.700985-178.722474L65.290517 243.958244c0-98.642624 79.925331-178.744987 178.700985-178.744987l536.102954 0C878.695125 65.213257 958.70846 145.31562 958.70846 243.958244zM869.44546 288.612257c0-74.015737-60.033281-133.961014-134.027529-133.961014L288.667004 154.651242c-73.994248 0-134.115534 59.945277-134.115534 133.961014l0 446.775486c0 74.015737 60.121286 133.983527 134.115534 133.983527l446.750927 0c73.994248 0 134.027529-59.96779 134.027529-133.983527L869.44546 288.612257z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="instagram" target="_blank"
>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M853.333333 277.333333C853.333333 289.28 843.946667 298.666667 832 298.666667L746.666667 298.666667C734.72 298.666667 725.333333 289.28 725.333333 277.333333L725.333333 192C725.333333 180.053333 734.72 170.666667 746.666667 170.666667L832 170.666667C843.946667 170.666667 853.333333 180.053333 853.333333 192M192 853.333333C180.053333 853.333333 170.666667 843.946667 170.666667 832L170.666667 469.333333 259.84 469.333333C257.28 482.986667 256 497.493333 256 512 256 653.226667 370.773333 768 512 768 653.226667 768 768 653.226667 768 512 768 497.493333 766.293333 482.986667 764.16 469.333333L853.333333 469.333333 853.333333 832C853.333333 843.946667 843.946667 853.333333 832 853.333333M512 341.333333C606.293333 341.333333 682.666667 417.706667 682.666667 512 682.666667 606.293333 606.293333 682.666667 512 682.666667 417.706667 682.666667 341.333333 606.293333 341.333333 512 341.333333 417.706667 417.706667 341.333333 512 341.333333M853.333333 85.333333 170.666667 85.333333C123.306667 85.333333 85.333333 123.306667 85.333333 170.666667L85.333333 853.333333C85.333333 900.266667 123.733333 938.666667 170.666667 938.666667L853.333333 938.666667C900.266667 938.666667 938.666667 900.266667 938.666667 853.333333L938.666667 170.666667C938.666667 123.306667 900.266667 85.333333 853.333333 85.333333Z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="gitlab" target="_blank"
>
<svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36">
<path d="M59.544137 403.419429L512.115566 983.405714 16.09728 623.396571a39.936 39.936 0 0 1-14.299429-43.995428l57.709715-176.018286z m264.009143 0h377.161143L512.152137 983.405714zM210.40128 53.723429l113.152 349.696H59.544137l113.152-349.696a20.041143 20.041143 0 0 1 37.705143 0z m754.285714 349.696l57.709715 176.018285a39.862857 39.862857 0 0 1-14.299429 43.995429l-496.018286 360.009143 452.571429-579.986286z m0 0h-264.009143l113.152-349.696a20.041143 20.041143 0 0 1 37.705143 0z"></path>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="goodreads" target="_blank"
>
<svg viewBox="0 0 128 128" version="1.1"
width="32" height="32">
<path d="M 85.685714,45.48571 C 87.142857,56.14286 84.342857,68.05714 75.428571,74.25714 69.057143,78.68571 60.342857,78.28571 55.2,75.88571 44.6,70.94286 41.057143,59.14286 41.828571,48.11429 c 1.228572,-17.4 11.685715,-25.11429 21.514286,-25 13.4,-0.0571 20.514286,9.08571 22.342857,22.37142 z M 128,16 v 96 c 0,8.82857 -7.17143,16 -16,16 H 16 C 7.1714286,128 0,120.82857 0,112 V 16 C 0,7.17143 7.1714286,0 16,0 h 96 c 8.82857,0 16,7.17143 16,16 z M 94.285714,80.34286 c 0,0 -0.02857,-9.71429 -0.02857,-62.08572 H 85.97143 V 29.77143 C 85.742858,29.85713 85.628572,29.62857 85.514287,29.42857 82.771429,23.51429 75.257143,16.2 63.8,16.28571 48.971429,16.4 38.885714,25.2 35.057143,38.51429 33.828571,42.77143 33.4,47.11429 33.485714,51.54286 33.971429,73.8 46.371429,85.2 65.6,84.45714 73.857143,84.14286 81.171429,79.6 85.314286,71.54286 85.457143,71.25714 85.628571,71 85.8,70.71429 c 0.05714,0.0286 0.114286,0.0286 0.171429,0.0571 0.08571,1.08571 0.05714,8.77143 0.02857,9.85714 -0.05714,4.22857 -0.571429,8.42857 -2.057143,12.42857 -2.228571,6 -6.371428,9.91429 -12.714286,11.28572 -5.085714,1.11428 -10.171428,1.08571 -15.2,-0.34286 C 49.885714,102.25714 45.6,98.57143 44.285714,92.05714 44.2,91.6 43.914286,91.68571 43.628571,91.68571 H 35.971429 C 36.2,94.71429 36.885714,97.48571 38.4,100.02857 45.314286,111.6 62.028571,113.88571 75.028571,110.71429 89.285714,107.2 94.257143,95.02857 94.285714,80.34286 Z" />
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="coding" target="_blank"
>
<svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
width="36" height="36">
<path
d="m 313.5359,557.51414 c 9.229,0 16.57801,8.88719 16.57801,19.99616 0,11.10899 -7.34901,19.99617 -16.57801,19.99617 -9.229,0 -16.57801,-8.88718 -16.57801,-19.99617 0,-11.10897 7.34901,-19.99616 16.57801,-19.99616 z m 393.7706,0 c 9.22899,0 16.57802,8.88719 16.57802,19.99616 0,11.10899 -7.34903,19.99617 -16.57802,19.99617 -9.229,0 -16.57802,-8.88718 -16.57802,-19.99617 0,-11.10897 7.34902,-19.99616 16.57802,-19.99616 z"
id="path6"/>
<path
d="m 945.8932,448.98796 c -27.17427,0 -51.1013,17.26164 -64.43208,43.23957 C 836.17066,393.44306 741.8298,302.00762 625.27096,264.23708 562.37704,239.1137 518.28294,190.57601 512.8139,134.17657 507.34486,190.74691 463.25077,239.1137 400.35685,264.23708 283.79802,301.83671 189.45714,393.44306 144.16669,492.22753 130.83591,466.2496 107.07979,448.98796 79.734607,448.98796 c -41.701401,0 -75.541066,40.84686 -75.541066,91.26454 0,50.41768 33.839665,91.26454 75.541066,91.26454 12.64715,0 24.610663,-3.75996 35.206923,-10.42536 3.58906,163.55837 180.30728,269.69186 397.87237,270.03367 217.5651,-0.34181 394.28332,-106.4753 397.87238,-270.03367 10.42535,6.6654 22.55977,10.42536 35.20692,10.42536 41.7014,0 75.541,-40.84686 75.541,-91.26454 0.171,-50.41768 -33.6687,-91.26454 -75.541,-91.26454 z M 114.2579,568.79403 c -3.58906,13.15987 -19.312535,18.79981 -35.206921,12.47625 -15.894385,-6.15267 -25.977916,-21.87616 -22.388867,-35.03602 3.58906,-13.15987 19.312533,-18.79981 35.206919,-12.47624 15.894389,6.15267 25.807019,21.87614 22.388869,35.03601 z m 398.556,276.69904 C 338.31748,845.15126 196.97707,762.603 196.97707,644.33509 c 0,-2.56361 0.1709,-4.95631 0.1709,-7.34902 0,-0.85453 0,-1.53817 0.17092,-2.3927 0.1709,-1.70908 0.34181,-3.41814 0.34181,-4.95631 0.1709,-2.22179 0.51273,-4.44359 0.85454,-6.6654 0,-0.1709 0,-0.51271 0.1709,-0.68362 3.58906,-23.2434 12.47624,-58.79214 26.14883,-79.13012 32.64331,-47.51224 90.92273,-78.9592 157.23479,-78.9592 51.1013,0 97.41721,18.79981 130.91506,49.05041 33.49784,-30.2506 79.64283,-49.05041 130.91504,-49.05041 66.48298,0 124.59148,31.61786 157.23479,78.9592 13.67259,20.50889 22.55977,55.88672 26.14883,79.13012 0,0.17091 0,0.51272 0.17091,0.68362 0.34182,2.22181 0.51272,4.44361 0.85453,6.6654 0.17091,1.70907 0.34181,3.24723 0.34181,4.95631 0,0.85453 0.17092,1.53817 0.17092,2.3927 0.17091,2.39271 0.17091,4.95631 0.17091,7.34902 C 828.82165,762.603 687.48124,845.15126 512.8139,845.49307 Z M 946.74774,581.27028 c -15.89439,6.15265 -31.61787,0.68362 -35.20692,-12.47625 -3.58906,-13.15987 6.49448,-28.88334 22.38887,-35.03601 15.89438,-6.15267 31.61786,-0.68363 35.20692,12.47624 3.41815,12.98896 -6.49448,28.71243 -22.38887,35.03602 z"
id="path8"/>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="bilibili" target="_blank"
>
<svg
class="icon" style="" viewBox="0 0 1024 1024" version="1.1" width="36"
height="36" id="svg8">
<path
style=""
d="M 744.60599,0.00486267 A 41.779915,41.779915 0 0 0 710.4184,18.673394 L 548.5048,255.32642 h -11.70046 a 41.779915,41.779915 0 0 0 -10.80295,-7.84928 L 235.66,97.084498 a 41.779915,41.779915 0 0 0 -20.07193,-4.960864 41.779915,41.779915 0 0 0 -18.3748,79.145436 L 359.4859,255.32642 H 128.16909 c -49.458302,0 -89.27932,39.82105 -89.27932,89.27932 v 508.65224 c 0,49.4583 39.821018,89.27934 89.27932,89.27934 h 19.48445 C 149.12802,984.5043 179.92773,1024 224.79179,1024 c 44.86407,0 75.66379,-39.4957 77.13826,-81.46268 H 719.98116 C 721.45559,984.5043 752.25533,1024 797.1194,1024 c 44.86406,0 75.6638,-39.4957 77.13824,-81.46268 h 21.57323 c 49.45831,0 89.27936,-39.82104 89.27936,-89.27934 V 344.60574 c 0,-49.45827 -39.82105,-89.27932 -89.27936,-89.27932 H 649.74567 L 779.38103,65.866924 A 41.779915,41.779915 0 0 0 744.60599,0.00486267 Z M 644.49108,418.70871 c 6.29985,0.21538 12.44451,2.01107 17.86888,5.22196 l 171.36218,98.10771 c 18.23417,10.21935 24.63334,33.34627 14.24614,51.48533 -10.38726,18.13909 -33.57344,24.32718 -51.61587,13.77296 L 624.9903,489.18895 c -15.21356,-8.41858 -22.66871,-26.1765 -18.03211,-42.93436 4.63664,-16.75784 20.15573,-28.14465 37.53289,-27.54588 z M 350.2006,432.31846 c 16.89952,0.0317 31.69582,11.33328 36.17844,27.62747 4.48262,16.2942 -2.44981,33.57765 -16.95507,42.24898 l -140.7157,86.91312 c -17.68528,11.18244 -41.09629,5.77692 -52.08912,-12.02686 -10.99282,-17.80373 -5.33855,-41.15658 12.58167,-51.95857 L 329.9002,438.2095 c 6.0643,-3.86439 13.10951,-5.90891 20.3004,-5.89104 z M 501.605,641.53985 c 3.75002,-0.15248 7.48645,0.53903 10.93349,2.0235 0.15842,0.0637 0.31618,0.12888 0.47325,0.19582 0.59328,0.27092 1.17574,0.56489 1.74609,0.88121 0.15868,0.0854 0.31643,0.17233 0.47325,0.2611 0.55694,0.32165 1.10131,0.66458 1.63185,1.02807 0.16455,0.1123 0.32777,0.2265 0.48956,0.34269 0.50382,0.36781 0.99371,0.75428 1.46868,1.15864 0.18724,0.15504 0.37218,0.31282 0.55484,0.47323 0.43271,0.38784 0.8518,0.79061 1.25653,1.20756 0.15449,0.16114 0.30679,0.32437 0.45693,0.48959 0.40798,0.44266 0.79989,0.89988 1.17494,1.37076 0.17799,0.22544 0.35205,0.45395 0.5222,0.68538 0.25932,0.34701 0.50964,0.70071 0.75064,1.06071 0.26712,0.39516 0.52286,0.79784 0.76699,1.20757 0.16907,0.29043 0.33231,0.58424 0.48957,0.88123 0.21836,0.41297 0.42513,0.83199 0.62009,1.25653 0.14836,0.32333 0.28983,0.64976 0.42429,0.97911 0.21319,0.51552 0.40915,1.03801 0.58747,1.5666 0.0677,0.19499 0.13296,0.39085 0.19582,0.58748 0.18652,0.60823 0.34984,1.22334 0.48957,1.84399 0.0397,0.16277 0.0779,0.32601 0.11423,0.48957 0.1436,0.69112 0.25788,1.38801 0.34269,2.08877 0.005,0.0381 0.0111,0.0761 0.0163,0.11424 0.0857,0.78056 0.13474,1.56471 0.14687,2.34988 0.005,0.0543 0.0111,0.10879 0.0163,0.1632 0,0 -0.008,1.12132 0,1.45234 0,0 -0.14697,17.84761 5.89102,34.12231 3.01902,8.13734 7.33278,15.10615 12.61433,19.61501 5.28157,4.50889 11.42894,7.62081 23.64572,7.62081 12.2168,0 18.36416,-3.11192 23.64573,-7.62081 5.28154,-4.50886 9.5953,-11.47767 12.6143,-19.61501 6.03799,-16.2747 5.89103,-34.12231 5.89103,-34.12231 -0.44885,-13.87045 10.45922,-25.46302 24.3311,-25.86506 13.87189,-0.40201 25.42828,10.53953 25.78348,24.41272 0,0 1.11929,25.7226 -9.00791,53.01927 -5.06359,13.64832 -13.1986,28.46036 -27.05631,40.29073 -13.85772,11.83039 -33.5454,19.63135 -56.20142,19.63135 -22.65603,0 -42.34371,-7.80096 -56.20141,-19.63135 -4.1801,-3.56856 -7.78733,-7.42433 -10.99878,-11.42303 -3.21235,4.00037 -6.81703,7.85309 -10.99876,11.42303 -13.85773,11.83039 -33.5454,19.63135 -56.20144,19.63135 -22.65601,0 -42.3437,-7.80096 -56.2014,-19.63135 -13.85775,-11.83037 -21.99272,-26.64241 -27.05632,-40.29073 -10.12725,-27.29667 -9.00789,-53.01928 -9.00789,-53.01927 0.20714,-13.83687 11.58744,-24.88848 25.42444,-24.69013 14.1263,0.19991 25.2971,12.0278 24.69011,26.14247 0,0 -0.14697,17.84761 5.89103,34.12231 3.01902,8.13734 7.31646,15.10615 12.598,19.61501 5.28155,4.50889 11.44526,7.62081 23.66203,7.62081 12.21681,0 18.36418,-3.11192 23.64573,-7.62081 5.28154,-4.50886 9.57899,-11.47767 12.598,-19.61501 5.76352,-15.53489 5.89112,-32.05691 5.89103,-33.56746 0.006,-0.37466 0.0111,-1.05336 0.0163,-1.20759 -0.0117,-0.74583 0.0105,-1.49177 0.0652,-2.23565 0.009,-0.15784 0.0204,-0.31561 0.0327,-0.47324 0.14204,-1.56859 0.43163,-3.12027 0.86487,-4.63449 0.0213,-0.0763 0.0433,-0.15244 0.0652,-0.22848 3.0335,-10.25748 12.24157,-17.46007 22.92769,-17.93417 z"
id="rect824"/>
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="codeforces" target="_blank"
>
<svg width="36" height="36" class="icon" style="" version="1.1" viewBox="0 0 1024 1024">
<path d="M 192 334.2 C 227.3 334.2 256 369.2 256 412.4 v 547.5 C 256 1003.2 227.3 1038.2 192 1038.2 H 64 C 28.7 1038.2 0 1003.2 0 960 V 412.4 C 0 369.2 28.7 334.2 64 334.2 h 128 z m 384 -234.7 C 611.3 99.6 640 134.5 640 177.8 v 782.2 C 640 1003.2 611.3 1038.2 576 1038.2 H 448 C 412.7 1038.2 384 1003.2 384 960 V 177.8 C 384 134.5 412.7 99.6 448 99.6 h 128 z m 384 391.1 C 995.3 490.6 1024 525.7 1024 568.9 v 391.1 C 1024 1003.2 995.3 1038.2 960 1038.2 h -128 C 796.7 1038.2 768 1003.2 768 960 V 568.9 C 768 525.7 796.7 490.6 832 490.6 h 128 z" />
</svg>
</a>
<a href="http://en.xianmin.org/hugo-theme-jane/" rel="me noopener" class="iconfont"
title="mastodon" target="_blank"
>
<svg class="icon" style="" viewBox="0 0 448 512" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="36" height="36"><path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"></path></svg>
</a>
<a href="https://www.xianmin.org/hugo-theme-jane/index.xml" rel="noopener alternate" type="application/rss+xml"
class="iconfont" title="rss" target="_blank">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="30" height="30">
<path d="M819.157333 1024C819.157333 574.592 449.408 204.8 0 204.8V0c561.706667 0 1024 462.293333 1024 1024h-204.842667zM140.416 743.04a140.8 140.8 0 0 1 140.501333 140.586667A140.928 140.928 0 0 1 140.074667 1024C62.72 1024 0 961.109333 0 883.626667s62.933333-140.544 140.416-140.586667zM678.784 1024h-199.04c0-263.210667-216.533333-479.786667-479.744-479.786667V345.173333c372.352 0 678.784 306.517333 678.784 678.826667z"></path>
</svg>
</a>
</div>
<div class="copyright">
<span class="power-by">
Powered by <a class="hexo-link" href="https://gohugo.io">Hugo</a>
</span>
<span class="division">|</span>
<span class="theme-info">
Theme - <a class="theme-link" href="https://github.com/xianmin/hugo-theme-jane">Jane</a>
</span>
<span class="copyright-year">
©
2017 -
2022
<span class="heart">
<i class="iconfont">
<svg class="icon" viewBox="0 0 1025 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="14" height="14">
<path d="M1000.1 247.9c-15.5-37.3-37.6-70.6-65.7-98.9-54.4-54.8-125.8-85-201-85-85.7 0-166 39-221.4 107.4C456.6 103 376.3 64 290.6 64c-75.1 0-146.5 30.4-201.1 85.6-28.2 28.5-50.4 61.9-65.8 99.3-16 38.8-24 79.9-23.6 122.2 0.7 91.7 40.1 177.2 108.1 234.8 3.1 2.6 6 5.1 8.9 7.8 14.9 13.4 58 52.8 112.6 102.7 93.5 85.5 209.9 191.9 257.5 234.2 7 6.1 15.8 9.5 24.9 9.5 9.2 0 18.1-3.4 24.9-9.5 34.5-30.7 105.8-95.9 181.4-165 74.2-67.8 150.9-138 195.8-178.2 69.5-57.9 109.6-144.4 109.9-237.3 0.1-42.5-8-83.6-24-122.2z"
fill="#8a8a8a"></path>
</svg>
</i>
</span><span class="author">
Jane
</span></span>
</div>
</footer>
<div class="back-to-top" id="back-to-top">
<i class="iconfont">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="35" height="35">
<path d="M510.866688 227.694839 95.449397 629.218702l235.761562 0-2.057869 328.796468 362.40389 0L691.55698 628.188232l241.942331-3.089361L510.866688 227.694839zM63.840492 63.962777l894.052392 0 0 131.813095L63.840492 195.775872 63.840492 63.962777 63.840492 63.962777zM63.840492 63.962777"></path>
</svg>
</i>
</div>
</div>
<script type="text/javascript" src="/hugo-theme-jane/lib/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/hugo-theme-jane/lib/slideout/slideout-1.0.1.min.js"></script>
<script type="text/javascript" src="/hugo-theme-jane/js/main.fe83e11b4fbc9193d67e2c9db78bad21f8dc59fca0cacd8c1c3bb071bb16a852.js" integrity="sha256-/oPhG0+8kZPWfiydt4utIfjcWfygys2MHDuwcbsWqFI=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/load-photoswipe.js"></script>
<script type="text/javascript" src="/lib/photoswipe/photoswipe.min.js"></script>
<script type="text/javascript" src="/lib/photoswipe/photoswipe-ui-default.min.js"></script>
<script>
$("#openSearch, #openSearchMobile").click(function(){
$(".modal-dialog").addClass("visible");
});
$("#closeSearch").click(function(){
$(".modal-dialog").removeClass("visible");
});
$(document).click(function(event) {
if (!$(event.target).closest(".modal-content, #openSearch, #openSearchMobile").length) {
$("body").find(".modal-dialog").removeClass("visible");
}
});
</script>
</body>
</html>
|
