搜索框几个位置

搜索框加在header下 以下位置不遮挡

<nav class="navbar border fixed split-nav">
  <div class="nav-brand">
    <h3><a href="<%= themeConfig.domain %>"><%= themeConfig.siteName %></a></h3>
  </div>

<!-- 加搜索框 -->
  <form id="gridea-search-form" action="<%= themeConfig.domain %>/search/">
    <input name="q" />
  </form>
<!-- 加搜索框 -->

右侧几个位置，自己看位置放吧。

以官方 主题开发样板 为例，在其基础上新增文件：

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

./templates/_blocks/header.ejs

公共模板，在适当位置添加搜索框供其他页面引用：

<form id="gridea-search-form" action="<%= themeConfig.domain %>/search/">
    <input name="q" />
</form>

现有部分不可修改，可以添加 class 或 style 等其他属性。

./templates/search.ejs
搜索页面，可基于其他页面修改，然后添加搜索结果渲染节点及依赖脚本。

依赖的脚本 <script>必须置于 之前，切勿随意改变顺序，防止加载出错。
./assets/media/gridea-search/result-template.ejs
搜索结果列表模板，在浏览器端解析，基本复用 ./templates/includes/post-list.ejs，但修改了摘要内容 <%- post.abstract %> 为 <%- post.searchedPreview %>，用于含关键词的搜索结果预览。

搜索结果列表暂无分页功能，请勿使用 pagination 字段。
样式自定义：

  1. 显示搜索中和无搜索结果
<div id="gridea-search-result" data-update="<%= site.utils.now %>">
   <div class="searching">搜索中......</div>
   <div class="no-result" style="display:none">未搜索到相关文章</div>
</div>

保留已有属性如 class、id 等，可新增属性，添加图标或动画。

  1. 搜索输入框
    保留已有属性，可新增属性，添加图标或动画。
  2. 关键词高亮
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</style>