企业官网建设流程全解析

摘要：文字博客像上世纪九十年代的 BBS，加上三样东西立刻「有个人样」：图片（先压缩、再用figure短代码）、代码高亮（四行配置搞定行号 + 配色）、以及 TOC 目录。文末附 Hugo 内置短代码速查表，details折叠用来放练习题答案特别好用。

承接上篇：文章写好了，标签配好了。老周今天要「审美暴击」了。

一、老周的审美暴击

小林得意地打开博客，展示昨天写的第一篇文章。

老周看了一眼，沉默了三秒。

「你知道你这篇文章像什么吗？」

「像什么？」

「像上世纪九十年代的 BBS。纯文字，没图，代码块连高亮都没有。你管这叫技术博客？」

小林委屈：「我大学写实验报告就这样……」

「大学是大学，公司是公司。今天教你三件事：图片、代码高亮、TOC。搞完你这篇博客至少能看。」

二、图片：先压缩，再排版

「先说你昨天那张 Hugo Logo。你放哪了？」

「static/images/啊。」

「对。但你有没有发现，图片的显示大小是主题的 CSS 控制的，你写![]()只是插入图片，控制不了大小。所以——图片本身的尺寸不要太大，不然主题再好看也救不了你。」

检查一下：

ls-lhstatic/images/

-rw-r--r-- 1 devops devops 2.3M Sep 13 10:00 hugo-logo.png

「一张 Logo 2.3M，你首页加载要等三秒。」

用 ImageMagick 压缩

sudoaptinstall-yimagemagick convert hugo-logo.png-resize800x hugo-logo-small.png

-resize 800x表示宽度缩到 800，高度等比例。

ls-lhstatic/images/

-rw-r--r-- 1 devops devops 80K Sep 13 10:05 hugo-logo-small.png -rw-r--r-- 1 devops devops 2.3M Sep 13 10:00 hugo-logo.png

2.3M → 80K。「这差距也太大了吧。」

命令已更新：Ubuntu 24.04 及更早版本自带的是 ImageMagick 6，命令是convert；如果你装的是ImageMagick 7，主命令变成了magick，写法是magick input.png -resize 800x output.png（或magick convert ...）。conver