如何定制化修改网页标题与图标
前言
ChatGPT Next Web 项目已经在 Github 获得 22k star,承蒙大家厚爱。不过为了保证终端用户的使用体验,我并没有在项目中提供定制化 UI 修改的说明文档,本文补全了这一遗憾,希望能够帮到你。 你可以订阅本专栏,此处会定时更新 ChatGPT Next Web 项目的定制化教程以及大语言模型的高级玩法教程。
注意:定制化能力需要在源码基础上改动,改动之后将与上游代码签名不一致,界面会始终提示“存在更新”,而且未来代码更新,可能会出现冲突,需要手动解决。
准备代码并编译
直接从 Github Clone 代码:
# 酌情替换为你自己的仓库链接
git clone https://github.com/Yidadaa/ChatGPT-Next-Web.git
# 根据你自己的操作系统安装 nodejs 18 和 yarn,具体步骤自行搜索即可
# 修改 yarn 镜像为国内镜像,加速访问
yarn config set registry https://registry.npmmirror.com
# 先编译一遍,保证代码可用
yarn install && yarn build
# 如果 build 完成,没有报错,即可尝试启动服务
yarn start
# 浏览器访问 localhost:3000 即可,切记,此时还不能正常使用,这里只要保证页面能正常打开就行
修改代码
修改网页标题和 SEO 信息
打开 app/layout.tsx
,修改第 9 行 metadata 变量中的 3 个字段的值为任意你想改的值:
修改侧边栏标题、副标题
打开 app/components/sidebar.tsx
,修改 99 行和 101 行两个 div 标签内的值:
修改侧边栏 Logo
替换 app/icons/chatgpt.svg
文件为你喜欢的 logo 文件即可,必须是 svg 格式。
修改网页标签栏 Icon
打开下方网站,然后根据下图图示操作:
Favicon.io – The Ultimate Favicon Generator (Free)
修改侧边栏底部的 Github 按钮以及链接
打开 app/components/sidebar.tsx
,然后:
如果你只是想变更按钮的图标和链接指向,则可以:
将上述几行代码修改为:
<div className={styles["sidebar-action"]}>
<a href="http://你的链接" target="_blank">
<IconButton icon={<GithubIcon />} shadow />
</a>
</div>
同时,可以修改 app/icons/github.svg
文件内容为你想要的图标,必须是 svg 格式。
重新编译代码
现在可以重新编译代码,查看修改是否成功:
yarn build
yarn start
你也可以一直开着 dev 模式,每次修改完文件保存之后,刷新浏览器页面就能看到改动效果:
yarn dev
部署改动后的代码
更简单的部署方法?服务器部署费时费力,而且要花精力维护,配置反 ddos 等运维工作,强烈建议将代码 push 到 github 上,然后使用 vercel 来快速部署,只需要指定 OPENAI_API_KEY
和 CODE
两个选项即可。
强烈推荐使用 docker 部署,省去很多麻烦。
-
首先你要根据你目前的操作系统,安装 docker,要求版本在 20 以上; -
然后使用命令打包镜像: docker build -t chatgpt-next-web .
-
使用命令查看镜像是否打包成功: docker images
-
启动 docker 镜像,其中的 PROXY_URL
和BASE_URL
任取一个即可,如果你的服务器本身可以直连 OpenAI,则无需指定这两个环境变量:
docker run -d -p 3000:3000 \
-e OPENAI_API_KEY="sk-xxxx" \
-e CODE="页面访问密码" \
--net=host \
-e PROXY_URL="http://127.0.0.1:7890" \
-e BASE_URL="https://你的 openai 代理地址"\
chatgpt-next-web
-
启动镜像之后,浏览器访问 localhost:3000
查看是否成功。
Ngnix 反向代理
下方是将 3000 端口代理到 80 的 ngnix 配置,酌情修改,请注意,如果你在使用其他域名或 IP 地址,需要将 server_name
替换为相应的域名或 IP 地址:
server {
listen 80 ssl http2;
server_name localhost;
client_max_body_size 128M;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_read_timeout 60;
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_redirect off;
proxy_buffering off;
proxy_cache off;
chunked_transfer_encoding on;
keepalive_timeout 300;
tcp_nopush on;
tcp_nodelay on;
proxy_ssl_session_reuse on;
}
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。