ChatGPT-Next-Web 进阶：个性化定制

在上一篇文章中，我介绍了如何在宝塔面板简单本地部署ChatGPT-Next-Web。在本篇文章中，我将教大家如何个性化定制ChatGPT-Next-Web，通过修改界面样式和定制网站信息。我们可以轻松更改背景颜色、调整主题样式，添加自定义图标（logo）以使界面更个性化。在新建聊天界面中，我们可以自定义问候语、导出模板以及各种指令语言。同时，通过修改网站标题和SEO信息，我们能够打造一个与品牌或使用风格一致的独特界面。

定制主题（界面样式）

修改颜色

  1. 找到文件：globals.scssE69325C7-4C20-46da-82E9-FBA98F3BC877.png

  2. 修改颜色代码，对应的可以参考下图，有亮色、深色两个主题，深色的white和black对应的颜色和亮色的颜色是相反的。多改几次就知道了。061CF011-0904-450e-AA0B-42348F55654A.png

修改字体

在globals.scss文件内搜索关键词“font”定位然后记住所在行号进行修改，应该支持谷歌字库。F2EA77E2-9995-482d-AE5D-7E951ED37EC4.png

替换app/icons/chatgpt.svg，直接在app/icons页面上传一个同名同后缀文件（chatgpt.svg）进行替换。

修改网站icon（图标）

直接在public文件夹替换favicon.ico

修改启动页图标

启动页图标有亮色、深色两个主题，需要替换两个文件
①在app/icons页面上传一个同名同后缀（bot.svg）文件进行替换
②在app/icons页面上传一个同名同后缀（black-bot.svg）文件进行替换20ED8FE4-0DBD-408f-9B04-0FD1CF7920EF.png

定制网站信息

修改网站标题、信息

找到文件：layout.tsx58F3003C-E574-4d8f-B387-497AC91B58CD.png

修改侧边栏标题、副标题

  1. 找到文件：sidebar.tsx

  2. 搜索关键词“sidebar-title”3C56ED60-FDE2-4891-909D-255FE29770BE.png

定制新建聊天界面问候语

  1. 找到文件app/locales/cn.ts

  2. 搜索关键词“bothello”，BotHello就是新建对话时出现的欢迎语## 定制新建聊天界面模板和指令语言F0613658-6D20-440e-A42C-BABD390EF78E.png