巴黎午夜漫步:用 Eleventy 多语言博客构建可检索的城市旅行指南 示例工程【免费下载链接】samplesA repo containing samples tied to new functionality in each release of Google Chrome.项目地址https://gitcode.com/gh_mirrors/samp/samples点击查看免费下载夜幕降临后的巴黎是光与影交织的城市也是一座幽灵之城。深夜十点之后拉丁区狭窄的鹅卵石街道上你几乎可以想象昔日的哲学家与革命家们正在昏暗的咖啡馆角落里争论不休。这篇旅行指南以 巴黎午夜漫步 一文为原型带你复盘塞纳河畔的深夜散步路线、街头美食与安全贴士同时结合本仓库 trailblazers 站点的 Eleventy 源码说明这类图文内容是如何以 Markdown Front Matter 的形式被结构化、多语言化并最终渲染成静态博客页面的。读完本文你将掌握三件事一是完整复现塞纳河午夜散步—蒙马特收尾—街角美食的巴黎夜游动线二是看懂一篇带标题、标签、作者、日期和封面图字段的旅行博文在 Eleventy 中对应的数据模型与渲染流程三是了解本站如何用 i18n 插件和本地化集合为同一篇文章产出英语、西班牙语、日语多版本页面。从元数据看一篇旅行博文的技术骨架原文档trailblazers/content/ja/blog/paris-midnight-stroll/index.md的正文第一行不是文字而是一段 YAML Front Matter这是 Eleventy 数据级联Data Cascade的入口。把文档的标题、摘要、日期、标签、作者全部结构化--- title: パリ歴史を辿る真夜中の散歩 description: セーヌ川沿いの深夜の散歩は、究極のパリジャン・ロマンスです。 date: 2026-03-10 tags: [都市, フランス, ロマンス] author: maya ---这些字段在渲染链路中被逐级消费title / description被 post.njk 布局 渲染为页面h1与分享数据navigator.share时作为text同时作为归档列表卡片的核心文案。date通过readableDate(locale)过滤器输出本地化日期并在归档列表中以datetime属性标注机器可读时间。tags参与 tags-schema.njk 生成的tags-schema.json校验枚举并驱动零维护的标签页。author在 eleventy.config.js 中定义的authorLocaleCombos集合把作者maya / ashok / julia与三种语言组合生成作者专属页面。同一篇文章的英语版本trailblazers/content/en/blog/paris-midnight-stroll/index.md与西班牙语版本trailblazers/content/es/blog/paris-midnight-stroll/index.md采用完全相同的 Front Matter 结构只是title、description、tags换成了对应语言这正是多语言站点内容分离、结构统一的典型做法。正文中的 Markdown 图片语法[![フランス、パリ](https://raw.gitcode.com/gh_mirrors/samp/samples/raw/92e10978e30fb18693920e372297b17be3274431/trailblazers/content/es/blog/reykjavik-northern-lights/cover.jpg?utm_sourcegitcode_repo_files)](https://link.gitcode.com/i/455696a1f9aa43ed74dd2400961ad0dd)引用与文档同目录的封面图而目录下的 cover.jpg 会被 eleventyImageTransformPlugin 自动转换为 AVIF / WebP 并补上width、height、loadinglazy、decodingasync等属性规避布局偏移。塞纳河畔的午夜散步路线复盘原文档的核心叙事是一条反常规的夜游动线避开白天的拥挤观光团选择深夜 10 点后出行从塞纳河畔一路走到蒙马特。具体分解如下起点拉丁区カルチエ・ラタン——深夜十点后在狭窄的鹅卵石街道上穿行氛围感的来源是想象历史人物在昏暗咖啡馆中争论的场景。塞纳河段从新桥ポン・ヌフ出发沿河夜行途经夜晚如同珠宝盒般发光的**卢浮宫ルーヴル**外观。收尾蒙马特モンマルトル——在**特特尔广场テルトル広場观看路灯下仍在创作的本地画家最后在圣心大教堂サクレ・クール寺院**的台阶上于凌晨 2 点俯瞰全城。这条路线在仓库中的多语言对照版本英语版、西班牙语版里保持了完全一致的四个叙事小节——塞纳河夜曲、街头灵魂美食、贴士、亮点——只是语言不同。这意味着旅行内容的叙事骨架一旦确定就可以通过语言文件批量衍生多语言页面。从渲染实现看这类正文会被 content.11tydata.js 与 blog.11tydata.js 的数据级联补上默认布局与posts标签最终套用 post.njk 布局输出为静态 HTML并在文章底部由posts_${locale}集合自动生成上一篇/下一篇导航。街角美食两顿有记忆点的夜宵原文档对巴黎美食的描述刻意避开米其林星级聚焦街头与市井招牌推荐圣日耳曼德佩サン・ジェルマン・デ・プレ附近街边摊的榛果巧克力酱香蕉可丽饼ヌテラとバナナのクレープ趁热倚着路灯吃是格别的一餐。深夜正餐一家供应经典牛排薯条ステーキ・フリートSteak Frites的传统小酒馆ビストロ配浓郁胡椒酱汁作者形容为食物形态的拥抱。这段内容在站点中的呈现方式值得注意每篇文章正文末尾post.njk 布局 会依次插入飞行航班组件flight-widget.njk、旅行助手组件travel-agent-widget.njk、T 恤组件tshirt-widget.njk和国家地图组件country-map.njk这些 组件文件 属于站点级的增强交互模块与正文的纯 Markdown 内容分离体现了 Eleventy布局与内容解耦的设计——作者只管写文字交互组件由模板层统一注入。实用贴士与安全提示原文档完整保留原文档的ヒントとアドバイス一节包含三条可直接落地的建议在此完整保留并补充说明自拍的陷阱如果讨厌人潮日落时分的特罗卡德罗广场トロカデロ広場要避开。想更美且更安静地看埃菲尔铁塔可以转向战神公园シャン・ド・マルス公園或寻找**比尔阿克姆桥ビル・アケム橋**这类隐蔽桥梁。步行是硬性要求巴黎最适合用双脚丈量准备一双好看又耐穿的步行鞋——作者的原话是你的脚踝会感谢你。夜间安全巴黎整体安全但要提防热门景点周边的卖花人和编手链的人一句礼貌而坚定、轻声细语的Non, merci不用了谢谢通常就足够应对。亮点清单与一句话收尾原文档以四条ハイライトHighlights总结这次夜游的不可错过瞬间夜间的卢浮宫金字塔亮灯时没有白天那 3 万名游客。塞纳河畔步道欣赏城市建筑骨骼的最佳视角。凌晨 2 点的圣心大教堂巴黎最安静、最具魔法感的观景点。完美的可丽饼定义巴黎体验的简单快乐。结尾一句夜间的巴黎不只是一个地方而是一种情绪点明全文主旨这是一座邀请你放慢脚步、抬头仰望、允许自己稍稍迷路的城市。这句话同时也是本仓库中该旅行主题系列内容如 trailblazers/content/ja/blog 目录下的阿马尔菲海岸、阿姆斯特丹运河等目的地文章统一的情感基调。站点视角这篇博文在 Eleventy 中的完整生命周期把上面所有零散证据串起来这篇日语博文从 Markdown 到线上页面的完整链路是输入content/ja/blog/paris-midnight-stroll/index.md含 Front Matter 与正文同目录cover.jpg。数据级联content.11tydata.js 提供默认布局blog.11tydata.js 打上posts标签目录结构本身content/ja/通过 ja.json 声明locale: ja与dir: ltr。集合与分页eleventy.config.js 按en/es/ja三种主语言构建posts_${lang}集合blog.njk 用filterByLocale(locale)过滤出当前语言的文章列表postslist.njk 渲染归档卡片封面图直接取自post.url cover.jpg。多语言与本地化eleventy-plugin-i18n配合fallbackLocales如en-US → en、es-ES → es处理语言回退每篇文章以/{locale}/blog/...的 permalink 输出并为每种语言生成 Atom feed/{lang}/feed/feed.xml。输出dir.output指向dist目录pathPrefix: /samples/trailblazers/dist/见 eleventy.config.js支持子路径部署。所以当你看到这篇巴黎夜游散文时看到的不仅是文字更是一个完整的、面向搜索引擎与多语言读者的静态站点内容单元——Front Matter 管结构化、i18n 管语言、Image 插件管图片性能、集合管归档与导航。如果你想在本地复现这套站点可以在仓库 trailblazers 目录下执行npm install后运行npx 11ty/eleventy --serve启动开发服务器或在构建模式下运行npx 11ty/eleventy生成生产级静态文件。封面图说明文中配图来自本仓库trailblazers/content/ja/blog/paris-midnight-stroll/cover.jpg呈现亚历山大三世桥黄昏夜景与巴黎夜游主题直接对应。赞分享示例工程【免费下载链接】samplesA repo containing samples tied to new functionality in each release of Google Chrome.项目地址https://gitcode.com/gh_mirrors/samp/samples点击查看免费下载相关推荐哈瓦那旅行指南复古街道与鲜活历史——trailblazers 城市漫步笔记哈瓦那旅行指南复古街道与鲜活历史——trailblazers 城市漫步笔记 哈瓦那是一座仿佛被冻结在时间中的城市1950 年代的老爷车驶过马拉贡海滨大道殖示例工程用 Eleventy 搭建静态博客eleventy-base-blog 起步模板全解与 Vercel 构建集成实战用 Eleventy 搭建静态博客eleventy base blog 起步模板全解与 Vercel 构建集成实战 本文围绕 Vercel 开源仓库中内嵌的CLI后端云原生trailblazers 旅行博客实战以 Santorini 圣托里尼文章为例拆解 Eleventy 多语言内容结构与创作发布流程trailblazers 旅行博客实战以 Santorini 圣托里尼文章为例拆解 Eleventy 多语言内容结构与创作发布流程 导读 本文以开源仓库 s示例工程上一篇【亲测免费】 Codeforces-go 使用教程下一篇Gopeed 项目教程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考