欢迎来到 Yimi小站

这里记录我的技术学习、生活感悟和随想杂谈

  • Yimi小站 致力于分享有价值的技术内容和生活思考
  • 欢迎通过社交媒体与我交流,分享你的想法和建议
  • 持续学习,持续分享,一起成长进步
  • 探索技术的深度,感受生活的温度
Home Banner

Hugo博客搭建教程(五):页脚优化与个性化定制

这篇主要是一些个性化定制和优化,包括添加备案信息、运行时间统计、访问统计等。 添加备案信息 配置备案号 在hugo.toml中添加备案配置: # 页脚配置 [params.footer] text = '<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">备案号:冀ICP备19017061-1号</a>' ⚠️ 注意:请替换为你自己的真实备案号 确保HTML渲染支持: 在配置文件中添加: # Markup配置 - 支持HTML渲染 [markup] [markup.goldmark] [markup.goldmark.renderer] unsafe = true 💡 配置更新:在hugo.toml文件中添加备案号配置和HTML渲染支持。备案号使用HTML链接格式,unsafe=true允许在Markdown中使用HTML标签。 更新页脚模板 编辑页脚模板: 更新 layouts\partials\footer.html: {{- if not (.Param "hideFooter") }} <footer class="footer"> {{- if site.Copyright }} <span>{{ site.Copyright | markdownify }}</span> {{- else }} <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span> {{- end }} {{- with site.Params.footer.text }} {{- print " · "}} {{ . | markdownify }} {{- end }} <span> {{- print " · "}} Powered by <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> & <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a> </span> </footer> {{- end }} 💡 页脚效果:更新后的页脚会显示版权信息、可点击的备案号链接(指向工信部网站)、以及技术支持信息,布局简洁清晰。 ...

January 5, 2025 · 3 min · 547 words · Yimi

Hugo博客搭建教程(四):评论系统与社交功能

前面几篇把博客的基本框架搭好了,这篇主要是添加一些交互功能,比如评论系统、社交链接什么的。 配置Giscus评论系统 什么是Giscus? Giscus是基于GitHub Discussions的评论系统,特点: 🆓 完全免费 🔒 数据安全,存储在GitHub 🌙 支持深色/浅色主题 🚀 加载速度快 💬 支持回复和表情反应 创建GitHub仓库 登录GitHub:访问 https://github.com 创建新仓库: 点击右上角的 “+” 按钮 选择 “New repository” 仓库名称:yimi-blog (或你喜欢的名称) 设置为 Public (公开) 勾选 “Add a README file” 点击 “Create repository” 💡 仓库创建:GitHub的创建仓库页面包含仓库名称输入框、公开/私有选择、README文件选项等。确保选择"Public"并勾选"Add a README file"。 启用Discussions功能 进入仓库设置: 在你的仓库页面,点击 “Settings” 标签 向下滚动找到 “Features” 部分 勾选 “Discussions” 选项 💡 功能启用:在仓库设置页面的"Features"部分,找到"Discussions"选项并勾选。这会为仓库启用讨论功能,用于存储评论数据。 创建讨论分类: 点击仓库的 “Discussions” 标签 GitHub会自动创建默认分类 建议创建一个 “Announcements” 分类用于评论 配置Giscus 访问Giscus配置页面:https://giscus.app/zh-CN 填写仓库信息: 仓库:你的用户名/yimi-blog 页面 ↔️ discussion 映射关系:选择 “pathname” Discussion 分类:选择 “Announcements” 💡 配置页面:Giscus官网提供了一个配置向导,输入仓库信息后会自动生成配置代码。页面会实时显示预览效果和配置参数。 ...

January 5, 2025 · 3 min · 557 words · Yimi

Hugo博客搭建教程(三):内容完善与页面配置

前面两篇把基础的站点和主题搞定了,这篇继续完善内容,主要是创建一些必要的页面,配置首页信息,添加图片什么的。 创建重要页面 创建关于页面 创建关于页面文件: hugo new about.md 编辑关于页面: 打开 content\about.md,替换内容: +++ title = "关于我" date = 2025-01-05T00:00:00+08:00 draft = false showToc = false +++ ## 👋 你好,我是 Yimi 欢迎来到我的小站!这里是我记录学习、分享思考的地方。 ### 🎯 关于这个博客 这个博客主要分享: - 💻 技术学习笔记和心得 - 📚 读书感悟和知识总结 - 🌱 生活感悟和随想杂谈 - 🔧 实用工具和资源推荐 ### 📫 联系方式 - 📧 邮箱:hdxiaoke@126.com - 💬 QQ群:726049236 - 🌐 博客:https://你的域名.com ### 🚀 技术栈 本博客使用以下技术构建: - **Hugo**:静态网站生成器 - **PaperMod**:简洁优雅的主题 - **Markdown**:内容编写格式 感谢你的访问,希望我的分享对你有所帮助! 💡 编辑说明:使用文本编辑器打开about.md文件,替换为上述内容。这个页面将成为你的个人介绍页面,可以根据实际情况修改内容。 ...

January 5, 2025 · 3 min · 474 words · Yimi

Hugo博客搭建教程(二):创建站点与主题安装

上一篇把环境搭好了,这篇开始创建Hugo站点和安装主题。 创建Hugo站点 打开命令行 进入工作目录: 按 Win + R,输入 cmd,回车 输入命令切换到工作目录: cd /d D:\myblog 💡 目录切换:执行命令后,命令提示符的路径会变为"D:\myblog>",表示已成功切换到工作目录。 创建新站点 执行创建命令: hugo new site myblog 查看创建结果: dir 应该看到创建了 myblog 文件夹 💡 创建成功:Hugo会显示"Congratulations! Your new Hugo site is created"的成功信息,并列出创建的目录结构。dir命令会显示新创建的myblog文件夹。 查看站点结构 进入站点目录: cd myblog 查看目录结构: dir 标准Hugo站点结构: myblog\ ├── archetypes\ # 文章模板 ├── assets\ # 资源文件 ├── content\ # 内容目录 ├── data\ # 数据文件 ├── layouts\ # 布局模板 ├── static\ # 静态文件 ├── themes\ # 主题目录 └── hugo.toml # 配置文件 💡 目录结构:在文件资源管理器中可以看到Hugo创建的标准目录结构,每个文件夹都有特定的用途。其中themes文件夹现在是空的,我们接下来会在其中安装主题。 ...

January 5, 2025 · 3 min · 487 words · Yimi

Hugo博客搭建教程(一):环境准备与Hugo安装

最近决定用Hugo重新搭建个人博客,记录一下整个过程,也算是给自己做个备忘录。 这篇先说说环境准备,主要是Git和Hugo的安装。之前折腾过几次,这次想把步骤记录得详细一些。 需要准备的工具 Git:用来下载主题和管理代码 Hugo:静态网站生成器,博客的核心 文本编辑器:我用的VS Code,其他的也行 浏览器:预览用 安装Git Git主要用来下载主题和管理代码,后面部署到GitHub也需要用到。 下载Git 去Git官网 https://git-scm.com/ 下载Windows版本。官网首页右侧有个蓝色的"Download"按钮,会自动检测系统,点击就能下载最新版本。 下载完成后会得到一个exe安装包,文件名类似 Git-2.43.0-64-bit.exe。 安装Git 双击exe文件开始安装。安装过程中有几个选项需要注意: 安装路径保持默认就行 组件选择也用默认的 编辑器我选的VS Code,你可以选自己习惯的 重要的是在"Adjusting your PATH environment"页面要选择第二个选项"Git from the command line and also from 3rd-party software",这样才能在命令行里用Git 其他选项基本都用默认设置,一路Next就行。 验证Git安装 打开命令提示符:按 Win + R,输入 cmd,回车 检查版本:输入以下命令 git --version 看到版本信息:如 git version 2.43.0.windows.1 表示安装成功 💡 命令行说明:在黑色的命令提示符窗口中,输入命令后按回车,会显示类似"git version 2.43.0.windows.1"的版本信息,说明Git安装成功。 配置Git用户信息 git config --global user.name "你的用户名" git config --global user.email "你的邮箱@example.com" 🚀 第二步:下载Hugo 选择下载方式 我们采用手动下载的方式,这样更直观,适合初学者。 下载Hugo 访问Hugo发布页:https://github.com/gohugoio/hugo/releases ...

January 5, 2025 · 1 min · 166 words · Yimi