如何个性化hugo个人博客网站

GitHub Pages绑定到自己的域名

申请个人域名,完成备案,比如,我将我的二级域名 blog.zhaojq.top 添加一个CNAME解析到https://{username}.github.io
在GitHub账户工程 Settings/GitHub Pages /Custom domain处填写自己的域名信息
即可通过 https://blog.zhaojq.top 访问自己的个人博客

如何修改主题模板

常用的主题形式一般是固定死的,我们想添加一些模块等的时候,并不能达到我们想要的效果,那么如何来修改主题模板呢?

以我个人使用的主题举例说明

https://github.com/vaga/hugo-theme-m10c

配置文件配置

我们发现,基本每个主题下都有目录exampleSite或者其他处可以找到*.toml配置文件示例,我们只要参照此配置文件配置我们主目录下的config.toml文件即可

增加模块

我发现这个主题只支持一个模块,即只有首页,这时我们就得查找Hugo官方文档,是英文的,凑合理解吧

[menu][[menu.main]]name                   = "首页"weight                 = 1identifier             = "首页"url                    = "/posts/"title                  = "首页"[[menu.main]]name                   = "技术"weight                 = 2identifier             = "技术"url                    = "/tecs/"title                  = "技术分享"[[menu.main]]name                   = "技术系列"weight                 = 3identifier             = "系列"url                    = "/books/"title                  = "技术系列"[[menu.main]]name                   = "随笔"weight                 = 4identifier             = "随笔"url                    = "/free/"title                  = "生活随笔"[[menu.main]]name                   = "关于"weight                 = 5identifier             = "关于"url                    = "/about/"title                  = "关于"

效果如图

配置其他参数

[params]author = "zhaoxr"description = "The road through the summit is always difficult and lonely"avatar = "avatar.jpeg"[[params.social]]name = "github"url = "https://github.com/zhao-xiaoer"[[params.social]]name = "csdn"url = "https://me.csdn.net/qq_34581279"

效果如图

遇到的问题

此主题没有跳转csdn的图标?在/assets/css下.scss文件,可通过F12调试确定github图标,参照配置即可
此主题不支持上述配置的多个模块,如何添加?

通过官方文档发现,hugo在主目录下layouts没有模板文件时,会找到themes下的layouts文件夹内的模板文件进行渲染
```
baseof.html #渲染模块
list.html   #渲染模块下文章列表
single.html #渲染单个详情页面
terms.html  #渲染文章浏览总数
```
增加如下main参数遍历,即可展示
```
<main class="app-container">{{ block "main" . }}{{ .Content }}{{ end }}
</main>
```

具体效果查看本博客: https://blog/zhaojq.top 具体代码查看本人gitHub: https://github.com/zhao-xiaoer

如果想配置其他特性,可参数官方文档.

如何个性化hugo个人博客网站相关推荐

使用Hugo搭建自己的个人博客网站
一.使用Hugo(基于Go语言的博客框架)搭建个人博客网站 1.Windows 64位系统下安装Hugo a.Hugo框架下载地址,找到hugo_0.55.4_Windows-64bit.zip文件进 ...
使用 hugo oss 搭建个人博客网站
系列文章目录文章目录系列文章目录前言一.下载hugo 二.oss 三.域名四.创建博客上传五.发布,上传文章前言本文主要详解如何用最低的成本搭建个人博客网站原本我是直接用的githu ...
手把手教你使用Hugo搭建个人博客网站|保姆级教学
搭建个人博客网上目前用的比较多的博客框架是Hexo.Hugo.Jekyll.本文详细介绍利用最新的Hugo(基于Go语言的博客框架)在windows上搭建个人博客网站,从域名注册到后期维护,全程保姆级 ...
快速构建属于自己的博客网站
①5行代码搭建属于自己的博客网站安装前提: 已安装Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本,一般来说优先推荐最新版) 打开命令行终端 ...
GitHub Pages + Hexo搭建个人博客网站，史上最全教程
文章目录一.准备工作 1. GitHub账号 2. 安装Git 3. 安装NodeJS 二.创建仓库三.安装Hexo 四.更换主题 1. NexT 主题 2. Fluid主题五.创建文章六.个 ...
Hexo+Github: 博客网站搭建完全教程(看这篇就够了)
本篇教程首次发布在个人博客:sunhwee.com,想要获得最佳阅读体验,欢迎前往,建议用电脑查看教程文档. 文章目录阅读须知博客开源前言第一部分搭建 Hexo搭建步骤 1. 安装Git 2 ...
谁不想拥有自己的博客网站？
# 拥有个人博客网站的好处想发啥发啥,不怕被审核掉网站风格自己改造,想怎么炫酷就怎么炫酷有幸做大后还可以可以承接广告拥有属于自己的一片小天地 - 下面我们就一起来看看怎么搭建一个博客网站,这里 ...
asp毕业设计——基于asp+access的博客网站设计与实现（毕业论文+程序源码）——博客网站
基于asp+access的博客网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+access的博客网站设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦.需要下载开题报告P ...
11个最流行的静态(博客)网站生成工具
11个最流行的静态(博客)网站生成工具最近特别流行使用静态网站搭建博客,本博客就是host在GitHub Pages的静态网站.静态网站非常适合专注于内容的网站,例如,博客.那你可能会问,为什么不用 ...