概述
这是一个免费的研究主题，叫做“每个人的研究”，是孩子们暑假的作业，但他说他不知道做什么，所以我建议在主页上做。
Netlify CMS如果你使用 ，你可以通过黑客在 3 分钟内创建一个高质量的网站。
能够以“爆炸性的速度”做到这一点很重要，因为无论如何我都是半途而废的。
现场施工
使用 Hugo 实现 Netlify CMS 有两种方法：一种是创建和自定义自己的 Hugo 站点，另一种是使用 Netlify CMS 提供的模板。
前者允许更详细的定制，但需要更多时间。我会重复一遍，但我会选择后一种方法，因为我看重“爆炸速度”。
关于制作方法，art_aco 的文章《Let's try NetlifyCMS》有详细的截图说明，请参考。
这次带着孩子和这篇文章“尝试过 Netlify CMS我是边看边做的。
结果是高度完美，却创造了一个神秘的咖啡店。
所以我在这里和那里调整它，让它看起来像它。
孩子的成品我不能给你看，但是我在定制的过程中学到了一点知识，所以我自己试了一下（笑）
创建虚拟商店站点的步骤
这一次，我决定创建一个名为“花店”的虚拟商店网站。不是EC网站，只是店铺介绍网站。
为了尽可能地利用原始素材，我尽量按照排版结构，主要进行图文的日语化和替换。
成品截图
我先给你看成品。
主页（首页）
“处理产品”页面
原始内容名称为Product
“关于本站”页面
原始内容名称为Value
“博客”页面
原始内容名称为Post
修改地点
修改时，可以从 Web 管理屏幕更改内容，但设计需要调整源。
因此，这次我从源头编辑内容设计，并没有使用网页管理屏幕。
对于 Hugo，设计部署在 layouts 目录下，内容部署在 contents 目录下。
更正文件（可能有遗漏，可能适当，请作为参考）
- config.toml
- 也许你不必碰这个
- 站点/config.toml
- 元信息和语言设置
- 站点/布局/index.html
- 首页日文本地化(1)
- 站点/布局/_default/list.html
- 博客页面图片和日语本地化
- 站点/布局/_default/li.html
- 首页日文本地化(2)
- 博客页面的日文翻译
- 站点/布局/partials/head.html
- 元信息 (ogp)
- 站点/布局/partials/2-up.html
- 首页日文本地化(3)
- 站点/布局/partials/blog.html
- 首页日文本地化(4)
- 博客页面的日文翻译
- site/layouts/partials/contact-form.html
- 查询表日文本地化
- site/layouts/partials/text-and-image.html
- 首页图片 (5)
- 站点/布局/post/single.html
- 博客正文页面的日文翻译
- 站点/内容/_index.md
- 首页图片和日文翻译（由于目标部分太多而省略）
- 站点/内容/值/_index.md
- 此站点的图像和日语本地化
- 站点/内容/post/_index.md
- 由于首页的博客标题是Posts，所以翻译成日文（6）
- 网站/内容/帖子/
- 博客图片和日语本地化
- 站点/内容/产品/_index.md
- 产品图片和日文本地化
- 站点/内容/联系人/_index.md
- 日语查询
- 网站/静态/img/logo.svg (7)
- 标志
- 花了最长的时间（笑）
- 站点/内容/_index.md
- 首页图片和日文翻译（由于目标部分太多而省略）
site/content/_index.md修正最多，但请参考下图，其他部分用红色编号。发布首页以外的更正截图让我筋疲力尽，所以我会停下来。
坏消息
在制作过程中，我注意到在本地启动开发服务器时显示的屏幕与部署到 Netlify 时显示的屏幕之间的设计略有不同。我认为它涉及css，但我停止追逐。因为以“爆炸速度”制造它很重要。
在最后
完全日本化是很麻烦的。
尤其是当它仅使用 Web 管理屏幕不完整时。
破碎的设计发布演示站点和来源。请及时做好暑假作业（笑）
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308624601.html