直接上代码，就完事了 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 <!DOCTYPE html> <html> <body> <style> .parent { margin-top:25px; position: relative; } .parent .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:100%; } </style> <div class="parent"> <audio controls class="child"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </body> </html>
引言 起初我是使用 Hexo+NexT 来搭建博客的，我对 Hexo 不满意的地方有两个，一个是生成速度，另外一个是依赖太多，以至于我都要把我的 Hexo 环境打包成 docker 分发到每一个写博客的机子。而 Hugo 就完美解决了这两个问题，可也并不是说 Hugo 毫无缺点。Hugo 最大的缺点是生态尚未完善，看着 github 上面那些 star 数量都不超过一千的主题实在是不太敢使用。但是 Hugo 的生成速度足以实时预览，这个是 Hexo 难以匹敌的。同时迁移成本也是我从 Hexo 迁移到 Hugo 的考虑之一，几乎没有迁移成本让我瞬间有了动力，要是说仅有的迁移成本，那也是 Hexo 的站内链接不适用而已。我不用考虑图片迁移问题，毕竟我是使用 Githb+Picgo 来进行图床存储的。如果你是一个 Rust 粉，你也可以考虑 Zola ，只不过 Zola 的生态更加贫瘠，对于我这种前端小白来说不太友好😭 感谢为爱发电的开源作者们 👉 Picgo Github 仓库 👉 Hugo 官方中文文档 👉 Hugo Papermod Theme Github 仓库 正文 PaperMod theme 配置小技巧 代码块显示行数(Code block line number display) 1 2 # config.yaml pygmentsOptions: linenos=table Hexo 生成的 URL 是和文章标题一一对应的，而 Hugo 会默认将标题的首字母小写，本来就是小站长，好不容易被收录的网站岂能丢掉? 一句话禁止 URL 自动首字母小写 ...
非常简单况且比我写的 CSS 好很多，我的那个 CSS 在 firefox 显示不正常，之前我找不到是因为我的搜索词语不对，我之前搜索使用的是 photo album ，而 Next 使用的相册关键词是 group pictures！ 1 2 {% grouppicture [your_picture_number]-[layout] %} {% endgrouppicture %} layout 的取值范围为 2～10 1 2 3 4 5 {% grouppicture 3-3 %}    {% endgrouppicture %} 更加详细的效果参考 这里
直接上我的 markdown 源码就好了 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 <style> .blog_photo_album_grid { -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; column-count: 3; column-gap: 10px; column-fill: auto; } .blog_photo_album_block { background-color: none; display: block; padding: 10px; word-wrap: break-word; margin-bottom: 10px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; border-style: solid; border-width: 1px; border-radius: 5px; border-color: #f0f0f0; box-shadow: 3px 3px 3px #f0f0f0; } </style> <div class="blog_photo_album_grid"> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/doge.svg"><h5 align="center">Hey, bro?</h5></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/brine_duck.jpg"><div align="center">教工餐厅卤鸭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/hall_chick_8.jpg"><div align="center">咖喱鸡扒饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/gongcha_pancake.jpg"><div align="center">贡茶手抓饼</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/griddle_braised_rice.jpg"><div align="center">烤盘饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/lanzhou_beef_noodles.jpg"><div align="center">兰州牛肉面</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/gongcha_pancake_1.jpg"><div align="center">贡茶手抓饼+1</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/hall_duck_8.jpg"><div align="center">黑椒鸭扒饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/eggtar.jpg"><div align="center">亲手做的蛋挞</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/eggtar_1.jpg"><div align="center">亲手做的蛋挞+1</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/chashao.jpg"><div align="center">旺角叉烧饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/tea_cake.jpg"><div align="center">饭堂小吃</div></div> </div> 效果可以参考👇 ...
修改主题配置文件 开启 fancybox开关即可 1 2 3 # FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images. # For more information: https://fancyapps.com/fancybox fancybox: true