打造专属搜索引擎门户:yacy_webclient_bootstrap二次开发完整清单(页面/颜色/导航)
【免费下载链接】yacy_webclient_bootstrapYaCy Search Client using bootstrapcss项目地址: https://gitcode.com/gh_mirrors/ya/yacy_webclient_bootstrap
yacy_webclient_bootstrap 是一个基于 Bootstrap 框架构建的搜索引擎门户模板,专为 YaCy 搜索引擎设计,让你快速搭建可自定义的搜索界面。无论你是技术新手还是前端爱好者,只需修改几个配置文件,就能拥有属于自己品牌的搜索门户。
本文整理了从连接搜索引擎、定制页面外观到调整导航菜单的完整操作清单,帮你一步步完成二次开发。
为什么选择这个搜索引擎门户模板 🧩
yacy_webclient_bootstrap 提供开箱即用的搜索门户框架,内置能力包括:
- 响应式布局:自动适配桌面和移动端
- 联想搜索:输入关键词时实时弹出建议词
- 多结果视图:支持段落列表、数据表格、图片网格三种展示模式
- 侧边栏筛选:按主题、文件类型、站点、作者等维度过滤结果
你无需从零编写前端代码,在现有模板上"换皮"即可完成定制。
快速上手:连接你自己的搜索引擎 ⚡
所有搜索请求的入口集中在 js/setup.js 中。只需修改search_api和suggest_api两个变量的地址,将指向你的 YaCy 服务器。
💡 页面通过 JSONP 方式获取数据,因此搜索服务地址可以和页面托管地址不同。本地运行 YaCy(默认端口 8090)时,直接把地址指向
localhost:8090即可。
自定义门户页面 📄
修改 Logo、标题和欢迎语
首页 index.html 的 Logo、页面标题、搜索框提示文字全部由 js/setup.js 中的变量控制:
| 变量名 | 控制内容 |
|---|---|
logo | 导航栏和首页 Logo 图片路径 |
headline | 浏览器标题栏 + 导航栏显示文字 |
greeting | 首页 Logo 下方的欢迎语 |
queryplaceholder | 搜索输入框占位提示文字 |
homepage | Logo 点击后跳转的主页地址 |
替换 Logo 只需将新图片放入images/目录,再把setup.js中的logo变量指向新路径。
添加或删除页面
搜索结果页 yacysearch/index.html 通过 URL 参数layout切换展示模式(段落 / 表格 / 图片网格)。不需要的布局可以移除对应渲染代码。
使用说明和关于页分别在 yacysearch/usage.html 和 yacysearch/about.html,文字内容可自由编辑。
定制颜色方案 🎯
门户主色调(4 个值改变全站风格)
门户页配色集中在 css/yacysearch-portal.css,采用语义化类名,修改 4 个色值即可焕然一新:
| CSS 类名 | 控制区域 | 默认色值 |
|---|---|---|
.headerbackgroundcolor | 头部背景 | #444 |
.headlinecolor | 标题文字 | #2080C0 |
.linkcolor | 全站链接 | #EA672E |
.navigationbackground | 导航条背景 | #222 |
结果页与全局配色
搜索结果页和整体皮肤在 css/style.css 中定义,核心配色:
- 正文:
#18294A(深藏蓝) - 菜单标题背景:
#84B3DE(浅蓝) - 表头 / 按钮 / 悬停:
#5cb85c(绿色)
布局结构与侧边栏定位在 css/bootstrap-base.css,字体与通用元素样式在 css/base.css。结果页列表样式见 css/yacysearch-result.css。
自定义导航菜单 📑
顶部下拉菜单
index.html 和 yacysearch/index.html 的导航栏右侧都有一个问号图标的下拉菜单(含"关于"、"使用说明"、外部链接等条目)。直接编辑对应<li>节点即可增删菜单项。
侧边栏筛选面板
结果页左侧筛选面板(主题标签云、文件类型、站点、作者)由 yacysearch/index.html 中的 JavaScript 动态生成。只保留部分维度时,注释掉对应的facet渲染语句即可。
关键文件路径速查表 📂
| 文件 | 用途 |
|---|---|
| js/setup.js | 服务器地址、标题、Logo 等核心配置 |
| index.html | 搜索门户首页 |
| yacysearch/index.html | 搜索结果页 |
| css/yacysearch-portal.css | 门户颜色主题 |
| css/style.css | 全局皮肤与配色 |
| css/bootstrap-base.css | Bootstrap 布局结构 |
| css/base.css | 字体与通用元素 |
| js/yacysearch.js | 搜索核心逻辑(Backbone.js) |
| yacysearch/usage.html | 使用说明页 |
| yacysearch/about.html | 关于页 |
部署你的搜索门户 🚀
完成修改后,将项目文件夹部署到任意静态文件服务器即可。通过file://协议本地打开时,搜索请求自动指向本机 YaCy(localhost:8090);部署在http://地址下则指向setup.js中配置的远程服务。
⚠️ 项目采用 CC-BY 2.0 协议(见 LICENSE.txt),发布时请保留归属声明。
【免费下载链接】yacy_webclient_bootstrapYaCy Search Client using bootstrapcss项目地址: https://gitcode.com/gh_mirrors/ya/yacy_webclient_bootstrap
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考