ContextQMD
Back to Gpt Academic

主题定制

docs/customization/theme_customization.md

latest10.1 KB
Original Source

主题定制

GPT Academic 提供了丰富的界面定制选项，从简单的主题切换到字体调整，再到功能区的显示控制，您可以根据个人喜好打造独特的使用体验。本文将介绍各种定制方法，从最简单的界面操作开始，逐步深入到配置文件修改和高级定制。

快速切换主题

最简单的定制方式是通过界面直接切换主题。在 GPT Academic 界面中，点击右上角的浮动工具栏，切换到「界面外观」标签页，您会看到主题选择下拉菜单。

内置主题

项目预置了三种风格迥异的主题，无需任何配置即可使用：

主题名称风格特点适用场景
Default橙色调，简洁明快通用场景，默认推荐
Chuanhu-Small-and-Beautiful绿色调，清新舒适长时间阅读
High-Contrast高对比度，黑白分明视觉辅助需求

切换主题后效果立即生效，无需刷新页面。系统会自动记住您的选择，下次访问时保持相同的主题。

HuggingFace 主题库

除了内置主题，您还可以使用 Gradio 主题商店 中的任意主题。这些主题由社区贡献，风格丰富多样，从科技感十足的暗黑风格到活泼可爱的二次元风格应有尽有。

要使用这些主题，需要在配置文件中设置主题名称。主题名称的格式为 用户名/主题名，例如：

python
THEME = "Gstaff/Xkcd"        # XKCD 漫画风格
THEME = "NoCrypt/Miku"       # 初音未来主题
THEME = "gradio/seafoam"     # 海洋绿主题

!!! note "网络要求" 从 HuggingFace 下载主题需要访问外网。如果您配置了代理，项目会自动通过代理下载主题文件。首次加载可能需要几秒钟，之后会缓存到本地。

字体定制

文字是界面的核心元素，选择合适的字体可以显著提升阅读体验。GPT Academic 支持多种字体切换方式。

界面切换字体

在「界面外观」标签页中，字体类型下拉菜单提供了丰富的字体选项：

系统字体：这些字体需要您的系统中已安装才能正常显示。

  • 宋体（SimSun）—— 标准印刷体，适合正式文档
  • 黑体（SimHei）—— 无衬线体，现代简洁
  • 楷体（KaiTi）—— 手写风格，温和亲切
  • 仿宋（FangSong）—— 古典风格
  • 华文系列 —— 更精细的中文字体

网络字体：这些字体从 CDN 加载，无需本地安装。

  • 思源宋体（Source Han Serif CN）—— 开源高质量字体
  • 月星楷（Moon Stars Kai HW）—— 手写楷体
  • 珠圆体（MaokenZhuyuanTi）—— 圆润可爱
  • 平方萌萌哒（PING FANG MENG MENG DA）—— 活泼风格

切换字体后，对话区域的文字会立即应用新字体。

调整字体大小

在字体类型下方有一个字体大小滑块，默认值为 15。根据您的屏幕尺寸和视力情况，可以将其调整到 12（紧凑）到 20（宽松）之间。

添加自定义字体

如果预设的字体都不能满足您的需求，还可以添加自定义网络字体。字体配置的格式为：

字体昵称(字体英文名@字体CSS链接)

例如，要添加「霞鹜文楷」字体：

python
AVAIL_FONTS = [
    # ... 保留原有字体 ...
    "霞鹜文楷(LXGW WenKai@https://cdn.jsdelivr.net/npm/[email protected]/style.css)",
]

只要字体提供了标准的 CSS webfont 文件，就可以通过这种方式引入。

界面布局调整

GPT Academic 的界面由多个功能区组成，您可以根据使用习惯显示或隐藏不同的区域。

功能区显示控制

在「界面外观」标签页的「显示/隐藏功能区」复选框组中，可以控制以下区域的可见性：

功能区说明
基础功能区包含学术润色、翻译等常用按钮
函数插件区包含所有插件的下拉菜单
浮动输入区在对话区域上方的快捷输入框
输入清除键快速清空输入框的按钮
插件参数区部分插件需要的额外参数输入

如果您主要使用插件功能而很少用基础按钮，可以隐藏「基础功能区」以获得更简洁的界面。

其他界面元素

「显示/隐藏自定义菜单」复选框组控制更多界面元素：

  • 自定义菜单：用户自定义的快捷按钮区域
  • 主标题 / 副标题：页面顶部的标题文字
  • 显示 logo：GPT Academic 的品牌标识
  • 添加 Live2D 形象：在页面右下角显示可互动的虚拟形象

整体布局模式

通过修改配置文件中的 LAYOUT 参数，可以切换整体布局模式：

python
LAYOUT = "LEFT-RIGHT"   # 左右布局：输入区在左，对话区在右
LAYOUT = "TOP-DOWN"     # 上下布局：输入区在上，对话区在下

左右布局适合宽屏显示器，上下布局更适合窄屏或移动设备。

明暗模式

GPT Academic 支持明暗两种显示模式。在「界面外观」标签页中，点击「切换界面明暗 ☀」按钮可以在两种模式间切换。

您也可以在配置文件中设置默认模式：

python
DARK_MODE = True   # 默认使用暗色模式
DARK_MODE = False  # 默认使用亮色模式

明暗模式的偏好会保存在浏览器 Cookie 中，下次访问时自动应用。

Live2D 虚拟形象

Live2D 是一项有趣的功能，它会在页面右下角显示一个可互动的动漫角色。这个形象不仅能增添趣味，还会根据您的操作给出不同的反应。

启用 Live2D

要启用 Live2D 形象，在配置文件中设置：

python
ADD_WAIFU = True

或者在运行时，通过「界面外观」标签页中的「添加 Live2D 形象」复选框控制。

互动功能

Live2D 形象支持以下互动方式：

  • 点击：形象会给出随机回应
  • 拖拽：可以移动形象的位置
  • 工具按钮：形象旁边的小图标提供更多功能，如切换角色、拍照等

配置文件定制

上述大部分定制都可以通过界面完成，但如果您想设置默认值或进行更深入的定制，需要修改配置文件。

核心配置项

以下是与主题相关的核心配置项，位于 config.py 或 config_private.py 中：

python
# 主题配置
THEME = "Default"                                    # 当前主题
AVAIL_THEMES = ["Default", "Chuanhu-Small-and-Beautiful", "High-Contrast",
                "Gstaff/Xkcd", "NoCrypt/Miku"]       # 可选主题列表

# 字体配置
FONT = "Theme-Default-Font"                          # 当前字体
AVAIL_FONTS = [...]                                  # 可选字体列表

# 布局配置
LAYOUT = "LEFT-RIGHT"                                # 布局模式
CHATBOT_HEIGHT = 1115                                # 对话区高度（上下布局时生效）
DARK_MODE = True                                     # 默认明暗模式

# 其他界面选项
CODE_HIGHLIGHT = True                                # 代码高亮
ADD_WAIFU = True                                     # Live2D 形象
AUTO_OPEN_BROWSER = True                             # 启动时自动打开浏览器

配置优先级

GPT Academic 的配置有三个来源，优先级从高到低依次为：

  1. 环境变量 —— 适用于 Docker 部署
  2. config_private.py —— 推荐的个人配置方式
  3. config.py —— 默认配置文件

建议将您的个性化配置写入 config_private.py 文件（如果不存在则创建）。这样做的好处是：更新项目时不会丢失您的配置，也不会被 Git 追踪到。

高级定制

如果您有前端开发经验，可以进行更深层次的界面定制。

修改 CSS 样式

每个主题都有对应的 CSS 文件，位于 themes/ 目录下：

  • default.css —— Default 主题样式
  • green.css —— Chuanhu-Small-and-Beautiful 主题样式
  • contrast.css —— High-Contrast 主题样式
  • common.css —— 所有主题共用的样式

您可以直接修改这些文件来调整颜色、间距、边框等视觉效果。例如，要修改主按钮的颜色，可以在 CSS 文件中找到相应的选择器并修改。

创建自定义主题

如果您想创建一个全新的主题，可以参考现有主题的结构。以 themes/default.py 为例，主题定义主要包含两部分：

  1. adjust_theme() 函数：使用 Gradio 的 Theme API 定义颜色、字体等属性
  2. advanced_css：额外的 CSS 样式

创建新主题的步骤：

  1. 复制一个现有的主题文件（如 default.py 和 default.css）
  2. 修改 adjust_theme() 函数中的颜色定义
  3. 调整 CSS 文件中的样式细节
  4. 在 themes/theme.py 的 load_dynamic_theme() 函数中注册新主题
  5. 将新主题名称添加到 AVAIL_THEMES 配置列表

修改 JavaScript 行为

主题相关的 JavaScript 代码位于：

  • themes/init.js —— 初始化逻辑
  • themes/theme.js —— 主题切换逻辑
  • themes/common.js —— 通用功能

如果您想修改某些交互行为（如动画效果、快捷键响应等），可以在这些文件中进行调整。

最佳实践

在进行界面定制时，以下建议可以帮助您获得更好的体验：

选择护眼配色：如果您需要长时间使用，建议选择暗色模式或低对比度主题，减少眼睛疲劳。

保持界面简洁：隐藏不常用的功能区可以减少视觉干扰，提高工作效率。如果您主要使用对话功能，可以只保留「函数插件区」。

备份自定义配置：如果您进行了 CSS 或 JavaScript 修改，建议备份相关文件。项目更新时可能会覆盖这些文件。

测试不同设备：如果您会在多种设备上使用，建议测试不同屏幕尺寸下的显示效果。LEFT-RIGHT 布局在小屏幕上可能不太适用。

相关文档