本功能是 Vibe 出来的，用的是 MiniMax M3 模型。

准备工作

去年在做婚礼请帖时，也就是「👩‍❤️‍👨 我们结婚啦」这个站点，有用过高德地图的 API，所以这次还是用它。如果你是第一次接入，要先去 高德开放平台 注册开发者账号、申请 Web 端 JS API 的 Key。

Key 准备好之后，剩下的工作就交给 AI 了。

数据驱动

旅行数据单独放在 data/travel.yaml，每条记录包含城市名、经纬度、访问时间、可选备注：

- name: Karlsruhe
  lng: 8.403653
  lat: 49.006889
  visited: 2016-04
  note: KIT 求学岁月

新增一个城市就在文件末尾追加一条，hugo 重新 build 后地图自动多一个绿点。

Hugo Shortcode

为了让以后别的页面也能复用，写了一个 amap shortcode。它从 data/travel.yaml 读出城市列表，渲染成一个 map 容器加一份 JSON payload，后面的渲染逻辑交给一个独立 JS 文件。

<div id="amap-container" class="amap-container"></div>
<script type="application/json" id="amap-travel-data">
  {{- $travel | jsonify -}}
</script>

渲染

地图本身的逻辑用一个 IIFE 包起来，关键几步：

1. 解析 JSON payload。Hugo jsonify 模板输出的 JSON 字符串放在 <script type="application/json"> 里时，.textContent 会拿到外层带引号的字符串，需要 JSON.parse 两次
2. 每个城市创建 AMap.Marker。content 字段直接传一段 HTML 字符串（24px 绿圆点 + 白边）
3. 计算所有 markers 的边界，map.setFitView 自动框选到合适缩放
4. 点击 marker 弹 InfoWindow 显示城市名、访问时间、备注

为了避免每个 marker 都重复字符串拼接，加了一个 visitCount 字典，同一城市多次访问时显示一个红色小角标。

结论

之前把 Key 写死在 hugo.toml 里，后来发现不太安全，改成读取 HUGO_AMAP_KEY 环境变量，同时在 Cloudflare Pages 里配成 Secret，本地开发用 hugo.toml 测试。

地图在「关于」页都能看到。点击绿色圆点会弹一个小窗显示城市名、访问时间、备注。

目前只是实现了功能，实际去过的地方还要再整理，有些地方确实年代久远，一时半会儿想不起来。

近期 OpenAI 开放了 gpt-3.5-turbo，第三方开发者可以使用 API 来把 ChatGPT 整合到自己的软件和业务中去。趁着新鲜劲，把玩一下。

ChatGPT 是一个基于 OpenAI 的 gpt-3.5-turbo 模型的云端人工智能聊天机器人，它可以进行自然语言处理和语言生成任务。gpt-3.5-turbo 模型是在 GPT-3 模型的基础上升级和改进的，具有更高的准确性和表现力，它可以自动识别语义和情感，并根据上下文生成合适的回答。

准备工作

在开始之前，需要进行一些准备工作。

账号申请

首先，确保你有 OpenAI 账号，国内用户参考「这篇文章」申请一个。

账号申请成功后，去到 Account API Keys 生成自己的 key。

复制保存 key 到本地安全位置，该 key 仅生成的时候出现，避免泄露，谨慎使用！

目前，OpenAI 提供 $18 的免费试用额度，以 $ 0.002 / 1000 tokens 算，大概可以白嫖 900 万个 tokens。不过需要注意的是，免费额度有时间限制，像我就到今年六月过期。

配置环境

本教程使用 Python 调用 ChatGPT-3.5-API，所以需先安装 Python，如果是 Linux 系统，确保有安装 pip，Windows 系统包含在 Python 安装包中，无需单独安装 pip。

安装好 Python 环境后，使用 pip 安装 openai 库，在命令行窗口中输入以下命令：

pip install openai

如果是系统有安装多个 Python 版本，可参考「之前文章」使用 py.exe 指定 pip 版本安装：

py -3 -m pip install openai

等 openai 库安装完成后，就可以写 Python 脚本调用 API 了。

使用 API

使用文本编辑器如 VS Code 创建一个新的 .py 文件，比如 chat-demo.py。

先导入 openai 模块，然后使用 openai.Completion.create 方法来发送请求并获取响应。可参考以下代码示例：

import openai

openai.api_key="<your key>"  # 替换成你自己的 API key
messages = []
system_message = input("What type of chatbot you want me to be?\n")
messages.append({"role":"system","content":system_message})

print("Great! I am ready to be " + system_message + "!\n" + "You can now type your messages.")
message = input("")
messages.append({"role":"user","content": message})

response=openai.ChatCompletion.create(
  model="gpt-3.5-turbo",
  messages=messages
)

reply = response["choices"][0]["message"]["content"]
print(reply)

最后，保存文件并在命令行中运行代码，看看效果。

py -3 .\chat-demo.py

最后

这只是个简单的小例子，更多有趣的功能还待大家自己去发掘，感兴趣的可移步「官方文档」查看详细用法。

参考

• API Reference - OpenAI API