如何自定义 degoog 外观安装社区主题与从零开发自定义主题的完整指南【免费下载链接】degoogSearch engine aggregator with a comprehensive plugin/extension system项目地址: https://gitcode.com/gh_mirrors/de/degoogdegoog 是一个开源搜索引擎聚合器可以将多个搜索引擎的结果聚合在一处展示并且内置了完整的主题Theme系统——你可以一键切换社区主题也可以从零开发属于你自己的 degoog 主题彻底改变搜索主页与结果页的配色、字体、版式甚至页面结构。本文将带你快速完成两种玩法。 认识 degoog 的主题系统在 degoog 中一个主题就是一个文件夹里面包含一份theme.json清单文件、CSS 样式文件和若干 HTML 模板文件。服务器启动时会自动扫描主题目录默认是data/themes/可由环境变量DEGOOG_THEMES_DIR指定见 paths.ts加载所有合法主题。项目内置了官方主题 degoog-theme结构非常值得参考清单文件theme.json页面模板layout.html、search.html结果卡片模板search-templates/result.html首页模板index-templates/header.html下图是 degoog 主题渲染出的搜索主页效果️ 一键切换主题最快上手方式如果你已经安装了主题切换只需三步打开 degoog 设置页进入主题Themes标签页在主题列表中找到想用的主题点击卡片上的Apply按钮刷新页面新外观立即生效。主题页面前端逻辑位于 src/client/settings/themes/其中 built-in-card.tsx 负责内置主题卡片apply-button.tsx 负责应用操作。后端接口很简单GET /api/themes列出全部主题POST /api/theme/active设置当前主题需要设置页认证见 themes.ts。应用自定义主题后结果页也会跟着换新装效果如下 安装社区主题社区维护着大量第三方主题与插件仓库安装流程和安装其他扩展一致在设置页添加社区扩展仓库在扩展/主题列表中勾选主题执行安装主题会被下载到data/themes/主题名/目录并自动重载。安装时系统会识别主题目录中的themes/名称结构见 item-specs.ts安装完成后回到主题标签页点击 Apply 即可。️ 从零开发自己的 degoog 主题开发主题不需要任何前端框架知识核心就是写一个文件夹my-theme/ ├── theme.json # 主题清单必须 ├── style.css # 主题样式可选 ├── layout.html # 页面骨架可选 ├── index.html # 首页可选 └── search.html # 搜索页可选1️⃣ 编写 theme.json 清单清单决定了主题的身份和组成部分关键字段如下完整定义见 registry.tsx字段作用name主题名称必填没有它主题会被跳过css主样式表文件名会重写路径后以/theme/style.css对外提供html各页面的 HTML 文件如layout、index、search、404templates局部模板如result结果卡片、image-card图片卡片、home-logo等settingsSchema主题可配置项会在设置页生成对应的配置界面dataAttrsFromSettings把用户配置写成data-*属性注入页面方便 CSS 选择器读取最小可用清单示例{ name: my-theme, css: style.css, html: { layout: layout.html } }2️⃣ 覆盖 HTML 与模板你不必重写整个页面——只提供想改的部分即可。比如只想换首页 Logo就声明templates.home-logo指向你的logo.html只想改搜索结果卡片样式就提供templates.result。未提供的部分会自动回落到内置模板这极大降低了开发门槛。3️⃣ 让主题支持个性化配置在清单中加入settingsSchema用户就能在设置里调节主题参数配合dataAttrsFromSettings这些值会作为data-*属性输出到页面上实现见 getActiveThemeDataAttrs你在 CSS 中就可以用[data-xxx值]做条件样式。4️⃣ 部署与生效把主题文件夹放入data/themes/目录然后在设置页的主题列表中选择它并点击 Apply。主题加载、CSS 编译与模板读取的完整流程都实现在 src/server/extensions/themes/registry.tsx调试时可对照该文件定位问题。 实用文件路径速查主题注册与加载逻辑src/server/extensions/themes/registry.tsx主题 API 路由src/server/routes/extensions/themes.ts内置主题完整示例src/public/themes/degoog-theme/主题设置页前端src/client/settings/themes/主题目录配置src/server/utils/paths.ts无论是安装一个现成的社区主题还是动手开发一个独一无二的外观degoog 的主题系统都能让换个新皮肤变成一件轻松甚至有趣的事。【免费下载链接】degoogSearch engine aggregator with a comprehensive plugin/extension system项目地址: https://gitcode.com/gh_mirrors/de/degoog创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考