於是開始寫了

…才怪

身為程式宅當然是打開Github，看看hexo有什麼神奇好用的擴充套件可以用，文章內容才不是blog的重點。

我說過了重點都在課本Document裡!

hexo官方的plugins中，就有許多可以用的擴充套件，但是多半是英文，在下班之後還要聚精凝神看英文實在不是一件人道的事情，雖然有tag，但是多半還是懶得看。

不過我還是有稍微看一下啦

在一番參考研讀之後，打算先以文章搜尋工具hexo-generator-search開始學習怎麼操控hexo。

首先當然是:

Install

1
npm install hexo-generator-search --save

Option

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

選項簡單來說，

  • path: 把你的文章產生出用於搜尋的xml，要放的位置
  • field: 可以選擇要搜尋的類別(post或page)
  • content: 要顯示的內容

而主要安裝的方式，雖然沒有直接地說要怎麼安裝，但是作者有給個參考。

以下是我的安裝步驟:

  1. 建立名字叫search.ejs的view，放在themes/layout底下，參考
  2. 建立名字叫search.js的js function，放在themes/source/js底下，參考
  3. 把search.ejs加入引用jquery以及剛剛建立的search.js
    1
    2
    3
    4
    5
    6
    7
    <script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
    <!--LINK SEARCH-->
    <script type="text/javascript" src="/js/search.js"></script>
  4. 然後微調一下介面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div id="site_search">
        <div class="form-group">
        <p><%= config.title %>: <em class="ui-keyword">~</em></p>
        (reverse-i-search)`':
        <input type="text" id="local-search-input" name="q" results="0" 
            placeholder="<%= __(' _') %>" 
            class="st-search-input st-default-search-input form-control"
            style="color: white;
                    background-color: #2b2b2b;
                    border-color: #2b2b2b;
                    outline:  none;"
        />
        </div>
       <div id="local-search-result"></div>
    </div>

然後就變成以下的樣子:
git-show-case

結論

隨打搜尋的速度很不錯，也為了把這個搜尋頁面搞得像terminal，後端工程師還是得下了一點摸索前端的時間。

不過現在這樣看來，是有可能會搜尋到奇怪的東西，不過應該可以透過調整js function把常用的標點符號用regex 過濾掉，就可以解決這些問題，不過天晚了，就先睡覺吧。