顺带推广一下自己的小站,巴士 369,伴您到永久:
https://www.bas369.com/楼主你的博客主题,搜索改为站内搜索的时候,我使用的参考文档:
给 hexo 博客添加 全文搜索引擎 功能:
--------- 下载搜索 和 关闭 按钮的图标;
下载地址:
https://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip 解决在 html 中引入 font-awesome 的 css 文件后, 图标显示不出来:
只需要把 font-awesome 中的 fonts 文件夹放在与 font-awesome.csss 所在的 css 文件夹 同级 的位置,问题就解决;
--------- 移入对应的 \themes\nexmoe\source\css 文件夹;
--------- 安装搜索插件:
cd /d C:\Users\%username%\Desktop\server\blog\blog_v2ray && npm install hexo-generator-search --save
--------- 修改 项目 目录下的 _config.yml 配置文件( 注意:不是 nexmoe 的配置文件 ),添加下面内容:
search:
path: search.xml
field: post
--------- 打开 \themes\nexmoe\layout\_widget\search.ejs 模板文件;
参考 hexo-theme-next 主题的模板文件:
https://github.com/theme-next/hexo-theme-next/blob/master/layout/_partials/search/localsearch.swig 清空 \themes\nexmoe\layout\_widget\search.ejs 代码,替换为以下的代码:
<!-- 使用 /js/local-search.js 不要使用 js/local-search.js ,因为最前面的 / 表示网站的根目录,不加的话,在文章页面会无法载入 local-search.js 脚本文件 ; -->
<script src="/js/local-search.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.css" />
<div class="nexmoe-widget-wrap">
<div class="nexmoe-widget nexmoe-search">
<form id="search_form">
<!-- 参考:
https://github.com/theme-next/hexo-theme-next/blob/master/layout/_partials/search/localsearch.swig -->
<label><a role="button" class="popup-trigger" style="display:inline-block;color:#a3a8ae;width:100%;padding:20px;height:58px;line-height:23.5px;text-align:center;font-size:16px;"><i class="fa fa-search fa-fw fa-lg" style="margin-right:5px;"></i>全文搜索</a></label>
</form>
</div>
</div>
--------- 在 \themes\nexmoe\layout\_widget\search.ejs 模板文件中,添加样式表:
样式表数据参考来源:
使用 firefox 浏览器,打开 调用了
http://theme-next.iissnan.com/third-party-services.html#local-search 服务的网页: https://liam.page/about/ ;
打开其他调用了
http://theme-next.iissnan.com/third-party-services.html#local-search 服务的网页也是可以的;
按 F12 打开调试器 --- 点击 查看器 --- 点击 调试栏 的元素选择器 --- 选择 页面内容左侧搜索按钮 --- 查看 调试栏 查看器 中间的栏目 --- 下拉滚动条 --- 找到右侧的 main.css --- 提取其中的搜索相关的样式表
以下 样式表的 第一部分参考了 main.css 的 :root { 设置的样式表;第二部分直接提取自 main.css 的样式表;
第三部分提取自:
https://github.com/theme-next/hexo-theme-next/blob/master/source/css/_common/components/third-party/search.styl 并对该样式表中的 条件判断代码 进行了修改;
样式表的不同来源部分,中间以空行分割;
--------- 打开 \themes\nexmoe\layout\layout.ejs 模板文件;
找到以下代码:
<%- partial('_partial/after-footer') %>
<%- partial('_partial/analytics') %>
<%- partial('_partial/music') %>
在代码的后面,添加下面的代码:
<div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off" placeholder="搜索..." spellcheck="false" type="search" class="search-input">
</div>
<span class="popup-btn-close">
<i class="fa fa-times-circle"></i>
</span>
</div>
<div id="search-result">
<div id="no-result">
<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
</div>
</div>
</div>
</div>
--------- 打开 \themes\nexmoe\source\js 脚本文件;
屏蔽脚本尾部的 function search() { 函数;
--------- 下载其他给 hexo-generator-search 添加功能的辅助脚本文件:
下载地址:
https://github.com/theme-next/hexo-theme-next/blob/master/source/js/local-search.js --------- 移入对应的 \themes\nexmoe\source\js 文件夹;
--------- 对 \themes\nexmoe\source\js\local-search.js 脚本文件进行修改;
脚本文件中 CONFIG 属性的参数,取值来自于 hexo-theme-next 主题的配置文件;
hexo-theme-next 主题的配置文件参考地址:
https://github.com/theme-next/hexo-theme-next/blob/master/_config.yml 关于 Local Search 搜索插件的部分,取值如下:
# Local Search
# Dependencies:
https://github.com/theme-next/hexo-generator-searchdb local_search:
enable: false
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
# --------- 指定在 搜索结果的列表 中,每一篇 文章 显示几段 和 搜索关键词 相关的段落;
# --------- 默认值为 1,即 搜索结果的列表中, 每一篇文章 中 只显示 第一个 和 搜索关键词 相关的段落;
# --------- 如果设置值为 -1,那么 搜索结果的列表中 ,将 显示 每一篇文章 中 所有的 和 搜索关键词 相关的段落;不同的段落之间 以 虚线 分割 ;
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false
修改 let searchPath = CONFIG.path; 代码 ;
修改 if (CONFIG.localsearch.unescape) { 代码 ;
修改 let upperBound = parseInt(CONFIG.localsearch.top_n_per_article, 10); 代码 ;
修改 if (CONFIG.localsearch.preload) { 代码 ;
修改 if (CONFIG.localsearch.trigger === 'auto') { 代码 ;