hugo 是一个快速、灵活的静态网站生成器；使用
Go语言开发，优化了运行速度。并且支持时时渲染。本期介绍如何在文章底部增加微信公众号、微信赞赏、支付宝赞赏二维码！
hugo【公众号、赞赏图片美化】#
hugo 官网，如果您想快速开始，请查看hugo 官方文档。hugo虽然没有hexo拥有大量精美的主题，但是hugo社区非常活跃，如果您喜欢hugo简约风格、运行速度，请给 GitHub hugo 一个 star。
效果演示#
图片裁剪#
这里提醒您，请注意不要把付款码展示到互联网中，此处使用的收款码。
微信收款码、支付宝收款码保存后，不是纯二维码图片；需要裁剪处理。这里使用iLoveIMG，处理流程分为2步：
调整图像的大小
裁剪图片
图片样式#
1.HTML#
html代码插入文章底部，请将src链接修改使用您自己的图片链接。其他属性无需调整。
<div class="pay-container">
<div class="pay-item">
<img src="https://oss.artoio.com/images/artoio/2025/11/11/wechatpay.jpg"
alt="微信赞赏"
class="pay-img glow-image">
<div class="pay-text wechat">微信赞赏</div>
</div>
<div class="pay-item">
<img src="https://oss.artoio.com/images/artoio/2025/11/07/202511071716438.jpg"
alt="关注公众号"
class="pay-img glow-image">
<div class="pay-text mp">关注公众号</div>
</div>
<div class="pay-item">
<img src="https://oss.artoio.com/images/artoio/2025/11/11/alipay.jpg"
alt="支付宝赞赏"
class="pay-img glow-image">
<div class="pay-text alipay">支付宝赞赏</div>
</div>
</div>
2.CSS#
css样式提供了几种功能；发光效果颜色您可以根据自身需要进行自定义。以下css代码请写入文件assets/css/custom.css。
- 适配手机端、PC端浏览器。美观度：手机端图片显示为竖列；PC端图片显示为横列。
- 鼠标点击时，图片放大。
- 鼠标悬停时，增加发光效果。
/* 微信公众号、微信赞赏、支付宝赞赏样式 */
.pay-container {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
padding: 12px 0;
}
.pay-item {
text-align: center;
}
.pay-img {
width: 150px;
border-radius: 10px;
cursor: pointer;
transition: all 0.4s ease;
border: 2px solid transparent; /* 颜色由 class 控制 */
}
.pay-text {
margin-top: 8px;
font-weight: 600;
}
/* Brand Border + Text Color */
.wechat { color: #07C160; }
.mp { color: #07C160; }
.alipay { color: #1296DB; }
.wechat ~ .pay-img,
.pay-img.wechat {
border-color: #07C160;
}
/* Hover glow */
.glow-image {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2),
0 0 10px rgba(255, 215, 0, 0.3);
}
.glow-image:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
0 0 20px rgba(255, 215, 0, 0.9),
0 0 30px rgba(255, 69, 0, 0.4);
transform: translateY(-2px) scale(1.02);
}
/* ✅ Mobile: vertical layout & bigger images */
@media (max-width: 600px) {
.pay-container {
flex-direction: column;
align-items: center;
gap: 20px;
}
.pay-img {
width: 200px;
}
}
结语#
总结而言，Hugo 以其简约而优雅的设计理念，为我们提供了一个专注于内容的创作平台。它让复杂的构建流程隐于幕后，将前端资源的优雅处理交由 Hugo Pipes，将全部的舞台留给了您的文字和创意。告别繁琐的依赖和数据库维护，拥抱 Hugo 带来的纯粹、快速和安全的静态体验，让您的网站如风一般轻盈。
