Hugo使用Jane主题支持搜索实现
<p>操作系统:Windows7 64Bit Ultimate版本。</p>
<h2 id="1-安装hugo">1. 安装Hugo</h2>
<p>从hugo官网下载Hugo并安装。</p>
<p><a href="https://gohugo.io/">Hugo官网</a></p>
<h2 id="2-添加hugoexe-到path路径">2. 添加Hugo.exe 到PATH路径</h2>
<p>测试</p>
<p>执行:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-console" data-lang="console"><span style="display:flex;"><span>hugo version
</span></span></code></pre></div><p>显示:</p>
<p><img alt="Hugo_version.png)" src="https://www.dennisthink.com/image/2023/01/Hugo_version.png"></p>
<h2 id="3-新建站点">3. 新建站点</h2>
<p>例如在目录 Github/searchLast下建立search,其中search是你网站的名字。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-console" data-lang="console"><span style="display:flex;"><span>hugo new site search
</span></span></code></pre></div><p>执行完成后使用tree命令查看文件路径:</p>
<pre tabindex="0"><code>tree
</code></pre><p>显示:</p>
<p><img alt="Hugo_new_site_folder_show.png" src="https://www.dennisthink.com/image/2023/01/Hugo_new_site_folder_show.png"></p>
<h2 id="4-安装jane主题">4. 安装jane主题</h2>
<p>执行下列的命令安装</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-console" data-lang="console"><span style="display:flex;"><span>git clone https://github.com/xianmin/hugo-theme-jane.git themes/jane
</span></span></code></pre></div><p>执行命令显示:</p>
<p><img alt="Install_jane_theme.png" src="https://www.dennisthink.com/image/2023/01/Install_jane_theme.png"></p>
<p>安装成功显示:</p>
<p><img alt="Install_jane_theme_succeed.png" src="https://www.dennisthink.com/image/2023/01/Install_jane_theme_succeed.png"></p>
<h2 id="5-将githubsearchlastsearchthemesjaneexamplesite目录下的configtoml拷贝到githubsearchlastsearch目录">5. 将GitHub\searchLast\search\themes\jane\exampleSite\目录下的config.toml拷贝到GitHub\searchLast\search\目录</h2>
<p>执行 hugo server
<img alt="Run_hugo_server_first.png" src="https://www.dennisthink.com/image/2023/01/Run_hugo_server_first.png"></p>
<p>访问主页面
<img alt="Jane_site_demo.png" src="https://www.dennisthink.com/image/2023/01/Jane_site_demo.png"></p>
<h2 id="6--在themesjanelayouts目录下添加indexjson内容如下">6. 在themes/jane/layouts/目录下添加index.json,内容如下</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{<span style="color:#960050;background-color:#1e0010">{-</span> <span style="color:#960050;background-color:#1e0010">$.Scratch.Add</span> <span style="color:#f92672">"index"</span> <span style="color:#960050;background-color:#1e0010">slice</span> <span style="color:#960050;background-color:#1e0010">-</span>}<span style="color:#960050;background-color:#1e0010">}</span>
</span></span><span style="display:flex;"><span>{<span style="color:#960050;background-color:#1e0010">{-</span> <span style="color:#960050;background-color:#1e0010">range</span> <span style="color:#960050;background-color:#1e0010">.Site.RegularPages</span> <span style="color:#960050;background-color:#1e0010">-</span>}<span style="color:#960050;background-color:#1e0010">}</span>
</span></span><span style="display:flex;"><span> {<span style="color:#960050;background-color:#1e0010">{-</span> <span style="color:#960050;background-color:#1e0010">$.Scratch.Add</span> <span style="color:#f92672">"index"</span> <span style="color:#960050;background-color:#1e0010">(dict</span> <span style="color:#e6db74">"title"</span> <span style="color:#960050;background-color:#1e0010">.Title</span> <span style="color:#e6db74">"tags"</span> <span style="color:#960050;background-color:#1e0010">.Params.tags</span> <span style="color:#e6db74">"categories"</span> <span style="color:#960050;background-color:#1e0010">.Params.categories</span> <span style="color:#e6db74">"contents"</span> <span style="color:#960050;background-color:#1e0010">.Plain</span> <span style="color:#e6db74">"permalink"</span> <span style="color:#960050;background-color:#1e0010">.Permalink)</span> <span style="color:#960050;background-color:#1e0010">-</span>}<span style="color:#960050;background-color:#1e0010">}</span>
</span></span><span style="display:flex;"><span>{<span style="color:#960050;background-color:#1e0010">{-</span> <span style="color:#960050;background-color:#1e0010">end</span> <span style="color:#960050;background-color:#1e0010">-</span>}<span style="color:#960050;background-color:#1e0010">}</span>
</span></span><span style="display:flex;"><span>{<span style="color:#960050;background-color:#1e0010">{-</span> <span style="color:#960050;background-color:#1e0010">$.Scratch.Get</span> <span style="color:#f92672">"index"</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#960050;background-color:#1e0010">jsonify</span> <span style="color:#960050;background-color:#1e0010">-</span>}<span style="color:#960050;background-color:#1e0010">}</span>
</span></span></code></pre></div><h2 id="7-在githubsearchlastsearch目录的configtoml文件末尾增加">7. 在GitHub\searchLast\search\目录的config.toml文件末尾增加</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-console" data-lang="console"><span style="display:flex;"><span>[outputs]
</span></span><span style="display:flex;"><span> home = ["HTML", "RSS", "JSON"]
</span></span></code></pre></div><h2 id="8-在githubsearchlastsearchthemesjanelayouts_default目录下添加searchhtml内容如下">8. 在GitHub\searchLast\search\themes\jane\layouts_default\目录下添加search.html,内容如下</h2>
<p>search.html</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e"><!DOCTYPE html></span>
</span></span><span style="display:flex;"><span><<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">"{{ $.Site.LanguageCode | default "</span> <span style="color:#a6e22e">en</span><span style="color:#960050;background-color:#1e0010">"</span> <span style="color:#960050;background-color:#1e0010">}}"</span> <span style="color:#a6e22e">itemscope</span> <span style="color:#a6e22e">itemtype</span><span style="color:#f92672">=</span><span style="color:#e6db74">"http://schema.org/WebPage"</span>>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><<span style="color:#f92672">head</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"utf-8"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">http-equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">"X-UA-Compatible"</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">"IE=edge"</span>>
</span></span><span style="display:flex;"><span> {{ partial "head.html" . }}
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">header</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"header"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"header container"</span>>
</span></span><span style="display:flex;"><span> {{ partial "header.html" . }}
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">header</span>>
</span></span><span style="display:flex;"><span></<span style="color:#f92672">head</span>>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><<span style="color:#f92672">body</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mobile-panel"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">main</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"main"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"main bg-llight wallpaper"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"content-wrapper"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"content"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"content container"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">article</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"post bg-white"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">section</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"search-results"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">h3</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"text-align:center"</span>>Matching pages</<span style="color:#f92672">h3</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">section</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"search-result-template"</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"text/x-js-template"</span>>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">section</span><span style="color:#f92672">></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">hr</span> <span style="color:#a6e22e">align</span><span style="color:#f92672">=</span><span style="color:#a6e22e">center</span><span style="color:#f92672">></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"summary-${key}"</span><span style="color:#f92672">></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"${link}"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"color:red"</span><span style="color:#f92672">><</span><span style="color:#a6e22e">u</span><span style="color:#f92672">></span><span style="color:#a6e22e">$</span>{<span style="color:#a6e22e">title</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/u></a></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span><span style="color:#a6e22e">$</span>{<span style="color:#a6e22e">snippet</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/p></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span><span style="color:#a6e22e">$</span>{ <span style="color:#a6e22e">isset</span> <span style="color:#a6e22e">tags</span> }<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span><span style="color:#a6e22e">Tags</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">$</span>{<span style="color:#a6e22e">tags</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/p>${ end }<p></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span><span style="color:#a6e22e">$</span>{ <span style="color:#a6e22e">isset</span> <span style="color:#a6e22e">categories</span> }<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span><span style="color:#a6e22e">Categories</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">$</span>{<span style="color:#a6e22e">categories</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/p>${ end }<p></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/section></span>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">script</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/js/jquery-3.3.1.min.js"</span>></<span style="color:#f92672">script</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"</span>></<span style="color:#f92672">script</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"</span>></<span style="color:#f92672">script</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"{{ "</span><span style="color:#a6e22e">js</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">search</span><span style="color:#960050;background-color:#1e0010">.</span><span style="color:#a6e22e">js</span><span style="color:#960050;background-color:#1e0010">"</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">absURL</span> <span style="color:#960050;background-color:#1e0010">}}"</span>></<span style="color:#f92672">script</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">article</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">main</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">footer</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"footer"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"footer"</span>>
</span></span><span style="display:flex;"><span> {{ partial "footer.html" . }}
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">footer</span>>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"back-to-top"</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"back-to-top"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">i</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"iconfont"</span>>
</span></span><span style="display:flex;"><span> {{/* icon up */}}
</span></span><span style="display:flex;"><span> {{ partial "svg/up.svg" }}
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">i</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
</span></span><span style="display:flex;"><span></<span style="color:#f92672">body</span>>
</span></span><span style="display:flex;"><span></<span style="color:#f92672">html</span>>
</span></span></code></pre></div><h3 id="9-修改-githubsearchlastsearchthemesthemesjanepartials目录下的headerhtml">9. 修改 GitHub\searchLast\search\themes\themes/jane/partials/目录下的header.html</h3>
<p>添加如下内容到<code>{{ if .Site.Params.search.google.enable }}</code>前面</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"menu-item"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"menu-item-link"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">form</span> <span style="color:#a6e22e">action</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/search"</span> <span style="color:#a6e22e">method</span><span style="color:#f92672">=</span><span style="color:#e6db74">"GET"</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"search"</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">"s"</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"search-query"</span> <span style="color:#a6e22e">placeholder</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>>
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">button</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"submit"</span>>search</<span style="color:#f92672">button</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">form</span>>
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">a</span>>
</span></span><span style="display:flex;"><span></<span style="color:#f92672">li</span>>
</span></span></code></pre></div><h3 id="10-在githubsearchlastsearchcontent目录下增加searchmd内容如下">10. 在GitHub\searchLast\search\content目录下增加search.md,内容如下</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-m" data-lang="m"><span style="display:flex;"><span><span style="color:#f92672">---</span>
</span></span><span style="display:flex;"><span>title<span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">"搜索功能"</span>
</span></span><span style="display:flex;"><span>sitemap<span style="color:#960050;background-color:#1e0010">:</span>
</span></span><span style="display:flex;"><span> priority <span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#ae81ff">0.1</span>
</span></span><span style="display:flex;"><span>layout<span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">"search"</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">---</span>
</span></span></code></pre></div><h3 id="11-在-githubsearchlastsearchthemesjanestaticjs目录下增加searchjs">11. 在 GitHub\searchLast\search\themes\jane\static/js/目录下增加search.js</h3>
<p>内容如下:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#a6e22e">summaryInclude</span><span style="color:#f92672">=</span><span style="color:#ae81ff">60</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">fuseOptions</span> <span style="color:#f92672">=</span> {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">shouldSort</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">includeMatches</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">threshold</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.0</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">tokenize</span><span style="color:#f92672">:</span><span style="color:#66d9ef">true</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">location</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">distance</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">100</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">maxPatternLength</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">32</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">minMatchCharLength</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>,
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">keys</span><span style="color:#f92672">:</span> [
</span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">"title"</span>,<span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0.8</span>},
</span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">"contents"</span>,<span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0.5</span>},
</span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">"tags"</span>,<span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0.3</span>},
</span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">"categories"</span>,<span style="color:#a6e22e">weight</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0.3</span>}
</span></span><span style="display:flex;"><span> ]
</span></span><span style="display:flex;"><span>};
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">searchQuery</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">param</span>(<span style="color:#e6db74">"s"</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">searchQuery</span>){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#search-query"</span>).<span style="color:#a6e22e">val</span>(<span style="color:#a6e22e">searchQuery</span>);
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">"Search:"</span>,<span style="color:#a6e22e">searchQuery</span>)
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">executeSearch</span>(<span style="color:#a6e22e">searchQuery</span>);
</span></span><span style="display:flex;"><span>}<span style="color:#66d9ef">else</span> {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">'#search-results'</span>).<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">"<p>Please enter a word or phrase above</p>"</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">executeSearch</span>(<span style="color:#a6e22e">searchQuery</span>){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">getJSON</span>( <span style="color:#e6db74">"/index.json"</span>, <span style="color:#66d9ef">function</span>( <span style="color:#a6e22e">data</span> ) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pages</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">fuse</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Fuse</span>(<span style="color:#a6e22e">pages</span>, <span style="color:#a6e22e">fuseOptions</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">result</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">fuse</span>.<span style="color:#a6e22e">search</span>(<span style="color:#a6e22e">searchQuery</span>);
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>({<span style="color:#e6db74">"matches"</span><span style="color:#f92672">:</span><span style="color:#a6e22e">result</span>});
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">></span> <span style="color:#ae81ff">0</span>){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">populateResults</span>(<span style="color:#a6e22e">result</span>);
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">'#search-results'</span>).<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">"<p>No matches found</p>"</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">populateResults</span>(<span style="color:#a6e22e">result</span>){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">each</span>(<span style="color:#a6e22e">result</span>,<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">key</span>,<span style="color:#a6e22e">value</span>){
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">contents</span><span style="color:#f92672">=</span> <span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">contents</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">snippet</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">""</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">snippetHighlights</span><span style="color:#f92672">=</span>[];
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">tags</span> <span style="color:#f92672">=</span>[];
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>( <span style="color:#a6e22e">fuseOptions</span>.<span style="color:#a6e22e">tokenize</span> ){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">snippetHighlights</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">searchQuery</span>);
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">each</span>(<span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">matches</span>,<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">matchKey</span>,<span style="color:#a6e22e">mvalue</span>){
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">key</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">"tags"</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">key</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">"categories"</span> ){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">snippetHighlights</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">value</span>);
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">key</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">"contents"</span>){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">start</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">indices</span>[<span style="color:#ae81ff">0</span>][<span style="color:#ae81ff">0</span>]<span style="color:#f92672">-</span><span style="color:#a6e22e">summaryInclude</span><span style="color:#f92672">></span><span style="color:#ae81ff">0</span><span style="color:#f92672">?</span><span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">indices</span>[<span style="color:#ae81ff">0</span>][<span style="color:#ae81ff">0</span>]<span style="color:#f92672">-</span><span style="color:#a6e22e">summaryInclude</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">end</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">indices</span>[<span style="color:#ae81ff">0</span>][<span style="color:#ae81ff">1</span>]<span style="color:#f92672">+</span><span style="color:#a6e22e">summaryInclude</span><span style="color:#f92672"><</span><span style="color:#a6e22e">contents</span>.<span style="color:#a6e22e">length</span><span style="color:#f92672">?</span><span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">indices</span>[<span style="color:#ae81ff">0</span>][<span style="color:#ae81ff">1</span>]<span style="color:#f92672">+</span><span style="color:#a6e22e">summaryInclude</span><span style="color:#f92672">:</span><span style="color:#a6e22e">contents</span>.<span style="color:#a6e22e">length</span>;
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">snippet</span> <span style="color:#f92672">+=</span> <span style="color:#a6e22e">contents</span>.<span style="color:#a6e22e">substring</span>(<span style="color:#a6e22e">start</span>,<span style="color:#a6e22e">end</span>);
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">snippetHighlights</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">substring</span>(<span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">indices</span>[<span style="color:#ae81ff">0</span>][<span style="color:#ae81ff">0</span>],<span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">indices</span>[<span style="color:#ae81ff">0</span>][<span style="color:#ae81ff">1</span>]<span style="color:#f92672">-</span><span style="color:#a6e22e">mvalue</span>.<span style="color:#a6e22e">indices</span>[<span style="color:#ae81ff">0</span>][<span style="color:#ae81ff">0</span>]<span style="color:#f92672">+</span><span style="color:#ae81ff">1</span>));
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">snippet</span>.<span style="color:#a6e22e">length</span><span style="color:#f92672"><</span><span style="color:#ae81ff">1</span>){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">snippet</span> <span style="color:#f92672">+=</span> <span style="color:#a6e22e">contents</span>.<span style="color:#a6e22e">substring</span>(<span style="color:#ae81ff">0</span>,<span style="color:#a6e22e">summaryInclude</span><span style="color:#f92672">*</span><span style="color:#ae81ff">2</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//pull template from hugo templarte definition
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">templateDefinition</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">'#search-result-template'</span>).<span style="color:#a6e22e">html</span>();
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//replace values
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">output</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">render</span>(<span style="color:#a6e22e">templateDefinition</span>,{<span style="color:#a6e22e">key</span><span style="color:#f92672">:</span><span style="color:#a6e22e">key</span>,<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">title</span>,<span style="color:#a6e22e">link</span><span style="color:#f92672">:</span><span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">permalink</span>,<span style="color:#a6e22e">tags</span><span style="color:#f92672">:</span><span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">tags</span>,<span style="color:#a6e22e">categories</span><span style="color:#f92672">:</span><span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">categories</span>,<span style="color:#a6e22e">snippet</span><span style="color:#f92672">:</span><span style="color:#a6e22e">snippet</span>});
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">'#search-results'</span>).<span style="color:#a6e22e">append</span>(<span style="color:#a6e22e">output</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">each</span>(<span style="color:#a6e22e">snippetHighlights</span>,<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">snipkey</span>,<span style="color:#a6e22e">snipvalue</span>){
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#summary-"</span><span style="color:#f92672">+</span><span style="color:#a6e22e">key</span>).<span style="color:#a6e22e">mark</span>(<span style="color:#a6e22e">snipvalue</span>);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">param</span>(<span style="color:#a6e22e">name</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> decodeURIComponent((<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">search</span>.<span style="color:#a6e22e">split</span>(<span style="color:#a6e22e">name</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">'='</span>)[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">||</span> <span style="color:#e6db74">''</span>).<span style="color:#a6e22e">split</span>(<span style="color:#e6db74">'&'</span>)[<span style="color:#ae81ff">0</span>]).<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">/\+/g</span>, <span style="color:#e6db74">' '</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">render</span>(<span style="color:#a6e22e">templateString</span>, <span style="color:#a6e22e">data</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">conditionalMatches</span>,<span style="color:#a6e22e">conditionalPattern</span>,<span style="color:#a6e22e">copy</span>;
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">conditionalPattern</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">/\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g</span>;
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">copy</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">templateString</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">while</span> ((<span style="color:#a6e22e">conditionalMatches</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">conditionalPattern</span>.<span style="color:#a6e22e">exec</span>(<span style="color:#a6e22e">templateString</span>)) <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">conditionalMatches</span>[<span style="color:#ae81ff">1</span>]]){
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//valid key, remove conditionals, leave contents.
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">copy</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">copy</span>.<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">conditionalMatches</span>[<span style="color:#ae81ff">0</span>],<span style="color:#a6e22e">conditionalMatches</span>[<span style="color:#ae81ff">2</span>]);
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//not valid, remove entire section
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">copy</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">copy</span>.<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">conditionalMatches</span>[<span style="color:#ae81ff">0</span>],<span style="color:#e6db74">''</span>);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">templateString</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">copy</span>;
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//now any conditionals removed we can do simple substitution
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">key</span>, <span style="color:#a6e22e">find</span>, <span style="color:#a6e22e">re</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#a6e22e">key</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">data</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">find</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'\\$\\{\\s*'</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">key</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">'\\s*\\}'</span>;
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">re</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> RegExp(<span style="color:#a6e22e">find</span>, <span style="color:#e6db74">'g'</span>);
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">templateString</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">templateString</span>.<span style="color:#a6e22e">replace</span>(<span style="color:#a6e22e">re</span>, <span style="color:#a6e22e">data</span>[<span style="color:#a6e22e">key</span>]);
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">templateString</span>;
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>从网络上下载 <em><strong>jquery-3.3.1.min.js</strong></em> ,并将其拷贝到 GitHub\searchLast\search\themes\jane\static/js/目录下。</p>
<h3 id="11-重新启动hugo-server">11. 重新启动hugo server</h3>
<p>访问: <a href="http://127.0.0.1:1313/">测试页面</a></p>
<p>页面显示:
<img src="https://www.dennisthink.com/image/2023/01/Add_Search_button_succeed.png"></p>
<h3 id="12-增加两篇文章">12. 增加两篇文章</h3>
<p>在 GitHub\searchLast\search 目录
执行</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-console" data-lang="console"><span style="display:flex;"><span>hugo new post/first.md
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-console" data-lang="console"><span style="display:flex;"><span>hugo new post/second.md
</span></span></code></pre></div><h3 id="13-修改firstmd的-draft-true-为-draft-false-并在文件末尾增加">13. 修改first.md的 draft: true 为 draft: false 并在文件末尾增加</h3>
<p>this is my first blog</p>
<h3 id="13-修改secondmd的-draft-true-为-draft-false-并在文件末尾增加">13. 修改second.md的 draft: true 为 draft: false 并在文件末尾增加</h3>
<p>this is my second blog</p>
<h3 id="14-执行-依次执行-hugo-和-hugo-server">14. 执行 依次执行 hugo 和 hugo server</h3>
<h3 id="15-访问-httplocalhost1313post">15. 访问 http://localhost:1313/post/</h3>
<p>查找first
<img alt="prepare_search.png" src="https://www.dennisthink.com/image/2023/01/prepare_search.png"></p>
<p>显示查找结果
<img alt="Search_result_show.png" src="https://www.dennisthink.com/image/2023/01/Search_result_show.png"></p>