今天用 AI 协助写程序解决一个问题，整体感觉真不错。问题不复杂，但真要写程序实现，对于非前端选手来说还是有一定难度。具体是，结合外部数据和模版生成特定页面，页面左右，右边是一片文章分段落，左边是一棵树，树节点就是文章段落，点击树节点，右边需要自动定位到该段落。
我先问了个简单问题：以json作为数据源，模板语言生成 html。
回给我几个选项，还给了例子，虽然不熟悉前端，但能照着写。
因为写yaml更简单，所以我又问：以yaml为数据源，模板语言生成html。
回复了几个，我从中挑了一个模版语言，nunjucks，之前从未用过。看了下例子，还挺简单。
接着问，因为希望yaml数据不是直接在html文件里：将数据存为json格式的文件，用nunjucks编写的模板文件，运行后生成html。将上述json文件改成yaml，程序也相应修改。
给了个完整的程序，确实能跑。
我接着问了个完整的问题：给一段 html，包含js，完成以下工作。页面左边为一棵树，树的节点由 yaml 数据定义。页面右边为div包裹的页面，该页面分段落，段落和左边的树节点对应。当点击左边树节点时，右边页面可以自动定位到该段落。
发现一些小问题，点击没法定位。换了种问法：右边段落改成定位到锚点。这下回的基本准确。
然后我进一步问：左边节点和右边段落和内容都从同一个yaml文件中获取。
真就帮我改好了。
网友评论