使用只有一个网页的网站模板创建的站点

去年秋天我帮朋友弄一个摄影作品集站点。他预算为零，网站要求“能看就行，模板但别太寒碜”。创建我扔给他一个单页 HTML 模板，站点花了二十分钟替换文字和图片，使用传到虚拟主机上。个网三天后他打电话说：“怎么点哪个链接都在原地打转？网站”——没错，所有导航都指向 #，模板所谓“关于”“作品”“联系”全挤在同一屏里，创建滚动条拉到底就是站点全部内容。这个站点至今还活着，使用就是个网那种典型的“只有一个网页的网站模板”产物。

这种模板在 GitHub 上泛滥成灾。网站名字通常叫 single-page-portfolio 或者 one-page-resume，下载量动辄几千。结构大同小异：顶部导航栏、全屏 hero 区域、三到四个内容区块、页脚。所有“页面”都是锚点跳转，href="#about" 这种。你拿到手，改改文字，换张背景图，一个站点就诞生了。我统计过自己经手的 14 个类似项目，其中 11 个最后只用了这一个文件。剩下的 3 个？后来加了博客，拆成了多页，但那是后话。

单页模板有个隐秘的好处：它逼你删东西。多页站点容易堆砌——关于我们、团队介绍、发展历程、常见问题……每个页面都像凑字数。而单页模板的物理空间有限，你只能保留最核心的内容。我见过一个独立开发者用单页模板做产品落地页，整个页面只有三句话、一个演示视频、一个下载按钮。转化率比之前五页的官网高了四成。他说：“没地方放废话，用户也没地方分心。”

当然，问题也很明显。SEO 几乎是灾难。所有关键词挤在一个 <title> 和几个 <h2> 里，搜索引擎很难判断页面重点。我试过给一个单页模板加结构化数据，折腾半天，收录效果依然不如人意。另一个坑是导航体验——用户习惯“关于”和“联系”分开，你硬把它们塞进同一页，有些人会困惑。我观察过 20 个非技术用户使用单页站点的行为，其中 7 个人在滚动两屏后试图点击导航栏的“联系”，结果只是跳到了页脚，他们明显愣了一下。

不过话说回来，这种模板最适合什么场景？个人简历、活动预告、产品早期验证、临时 landing page。我甚至见过一个乐队用单页模板做巡演日程，每个城市一个 <section>，背景色不同。简洁得让人舒服。如果你要放 50 篇博客文章，那还是老老实实上 WordPress。但如果你的全部内容就是一段自我介绍加几张图，单页模板反而是最诚实的容器——它不假装自己有很多东西。

最后说个技术细节。很多单页模板用 scroll-behavior: smooth; 实现平滑滚动，但在 iOS Safari 上偶尔会卡顿。我通常会把 scroll-padding-top 设成导航栏高度，否则锚点跳转后标题会被固定导航遮住。这些坑，模板作者不会告诉你。你得自己踩一遍。

我至今保留着那个摄影站点的源码。朋友偶尔还会发新照片让我替换。每次打开那个只有 index.html 的文件夹，我都觉得它像一把瑞士军刀——功能不多，但足够应付大多数“我就想要个简单页面”的需求。

很赞哦!（443）