【Hugo】主题美化

博客的基础设置，主要以hugo.yaml文件为主。详细参考官方文件stack中文文档和stack官方文档

以下所有修改操作请养成备份的习惯

调试

部署到github上反复调试太过麻烦，可以使用以下方法：

键入hugo server -D启动网页。复制http://localhost:1313/打开网页。

在hugo.yaml中更新的内容保存后，在http://localhost:1313/网页会立刻显现。

主页功能

中英文

DefaultContentLanguage：博客默认语言。设置为：zh-cn

将languages下除zh-cn的语言删除

1
2
3
4
5
6
7
8


DefaultContentLanguage: zh-cn
languages:
 zh-cn:
     languageName: 简体中文
     title: 林梦飞		#站名
     weight: 2
     params:
         description: 演示说明	

头像、站名、简介

头像和简介设置

1
2
3
4
5
6
7


sidebar:
     emoji: 🤣
     subtitle: 欢迎来到我的blog，搭建中	#blog简介
     avatar:							#blog头像
         enabled: true
         local: true
         src: img/avatar.jpg				#头像文件位置

本地路径：请把图片放在站点根目录的 assets/img 文件夹下。例如 assets/img/avatar.jng, 并填入 img/avatar.jng.
图片最大支持150*150

网站图标

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


params:	
 mainSections:
      post
 featuredImageField: image
 rssFullContent: true
 favicon: /favicon.ico

     footer:		#页脚
         since: 2024
         customText:

     dateFormat:
         published: 2006-01-02	#这里按照2006-01-02设置
         lastUpdated: 2006-01-02

favicon存放ico图像，可以去网上找一个。存放在主目录的static文件夹下

社交链接

social:				#ico文件在F:\blog\myblog\assets\icons
    - identifier: github
      name: GitHub
      url: https://github.com/hff0910
      params:
          icon: brand-github

ico文件存在主目录的\assets\icons内
icons文件可以直接从这里下载：Tabler Icons

菜单栏

下面的方法应该是不对的，但是能用一下。

在\content\page文件夹下新建一个文件夹例如：collection

新建index.md文件。复制以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


title: "嘻嘻"
date: 2019-05-28
layout: "collection"
slug: "collection"
comments: false
menu:
    main:
        weight: -70
        params: 
            icon: collection	#若找不到icon文件可以先改为search先用着

title：显示在页面的名字

collection：与文件名一致。icon文件存在主目录的\assets\icons内

搜索hugo.yaml文件找到homepage。并添加collection项

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


widgets:			#部件（主页左边部分）
    homepage:
        - type: search
        - type: links
          params:
              limit: 5
        - type: archives
          params:
              limit: 5
        - type: collection		#添加以下内容
          params:
              limit: 5