はじめ

ひとまずリリースまでを本編をとしてやってますが、
まだまだ細かい設定をやらないとブログっぽくないためこちらに記載します。

本編では、Cardというテーマを使用してましたが、
lightというテーマに変更しました。

概要

・ファビコンの設置
・Copyrightの設定
・検索の文字を変更
・タイムラインの長さを変更
・HOMEボタンを有効化
・検索機能の仕様を変更
・検索ボックスを一番下に移動
・コメントを削除



## ファビコンの設定
### 手順
#### 1.ファビコンを配置

```path
themes\light\source\favicon.png

ファイル名はソースで固定されているので注意

サーバを再起動するとファビコンが設定されました！

Copyrightの設定

初期設定だと「Hexo」が設定されているので変更する

手順

1._config.ymlを変更

_config.yml

author: shinpinoshi

サーバを再起動するとcopyrightが変更される。

検索の文字を変更

「Suche」ってなんやねんって話なので変更します。

手順

1.de.ymlを変更

\themes\light\languages\de.yml

categories: Category
search: Search
tags: Tags
tagcloud: Tag-Cloud
tweets: Tweet
prev: Previous page
next: Next page
comment: Comment
archive_a: Archive
archive_b: "Archive: %s"
page: Page %d
recent_posts: New Post

あまり好みじゃなかったので色々変更しておきました。

サーバを再起動すると変更されます。

タイムラインの長さを変更

なんかタイムライン長くね？って思ったので変更します。

手順

1.記事内に下記の文字列を入れる

このコメントまでの文字列が表示される

<!-- more -->

または記事に下記のようにexceptを設定する

サイトをF5更新すると変更される。

HOMEボタンを有効化

HOMEボタンを押すと404になるので、改修する

手順

1.config.ymlを下記のように編集

_config.yml

menu:
  Home: /

これで問題なく画面遷移できるようになりました。

（初期値だとHomeが空文字となっており、URLにNULLという文字列が入るのが原因）

検索機能の仕様を変更

検索を行うとGoogle検索されてしまうので、サイト内検索できるように変更する

Enterを押すとGoogle検索される

手順

1.hexo-generator-searchをインストール

_config.yml

npm install hexo-generator-searchdb --save

2.プロジェクト直下の_config.ymlを追記

\site\_config.yml

search:
  path: search.xml
  field: post
  format: xml

3.テーマの_config.ymlを追記

\site\themes\light\_config.yml

search:
  enable: true
  service: local

4.テーマのsearch.ejsを追記

\site\themes\light\layout_widget\search.ejs

<div class="search">
  <input type="text" id="local-search-input" placeholder="Search">
  <div id="local-search-result"></div>
  <script>
    window.ROOT_PATH = '<%- config.root %>';
  </script>
  <script src="<%- config.root %>js/search.js"></script>
</div>

5.search.jsを新規作成

\site\themes\light\source\js\search.js

(function () {
  var input = document.getElementById('local-search-input');
  var resultContainer = document.getElementById('local-search-result');

  if (!input) return;

  var data = [];
  var xhr = new XMLHttpRequest();
  // Hexo root を反映した絶対パス
  xhr.open('GET', (window.ROOT_PATH || '/') + 'search.xml', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var parser = new DOMParser();
        var xml = parser.parseFromString(xhr.responseText, 'text/xml');
        var entries = xml.getElementsByTagName('entry');
        for (var i = 0; i < entries.length; i++) {
          data.push({
            title: entries[i].getElementsByTagName('title')[0].textContent,
            content: entries[i].getElementsByTagName('content')[0].textContent,
            url: entries[i].getElementsByTagName('url')[0].textContent
          });
        }
      } else {
        console.error('search.xml の読み込みに失敗しました', xhr.status);
      }
    }
  };
  xhr.send(null);

  input.addEventListener('input', function () {
    var str = this.value.trim().toLowerCase();
    var resultHTML = '';
    if (str.length > 0) {
      data.forEach(function (post) {
        if (post.title.toLowerCase().includes(str) || post.content.toLowerCase().includes(str)) {
          // 本文の一部を抜粋（50文字まで）
          var snippet = post.content.replace(/<[^>]+>/g, ''); // HTMLタグ除去
          if (snippet.length > 50) snippet = snippet.slice(0, 50) + '…';
          resultHTML += `
            <a href="${post.url}" class="search-result-item">
              <div class="search-result-title">${post.title}</div>
              <div class="search-result-snippet">${snippet}</div>
            </a>
          `;
        }
      });
    }
    resultContainer.innerHTML = resultHTML || '<div class="search-no-result">検索結果がありません</div>';
  });

})();

あとは自分好みにレイアウトを変更して下記のような感じに仕上がりました。
（もう少し調整すればいい感じになるかもです！）

ちなみにCSSは下記のような感じでやってます。

css.css

#local-search-result {
  margin-top: 0.2em;
}

.search-result-item {
  display: block;
  padding: 0.8em;
  margin-bottom: 0.2em;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  border: 1px solid #ddd;
  background-color: white;
}

.search-result-item:hover {
  background-color: #f7f7f7;
  text-decoration: none;
}

.search-result-title {
  font-weight: bold;
  margin-bottom: 0.3em;
}

.search-result-snippet {
  font-size: 0.9em;
}

.search-no-result {
  font-style: italic;
  padding: 0.5em;
}

検索ボックスを一番下に配置

検索ボックスをウェジットの一番下に配置したい

手順

1._config.iniのwidgetsの順番を変更する

\site\themes\light_config.yml

widgets:
- category
- tag
- archive
- search

サーバを再起動すると無事順番が変わりました！

コメント機能を削除

コメント機能は不要なので、削除したい

手順

1._config.iniのcomment_providerをfalseに設定

\site\themes\light_config.yml

comment_provider: false

2.comment.ejsをコメントアウト

\site\themes\light\layout_partial\comment.ejs

ファイル内をすべて削除

コメントアウトの場合、F12で確認するとコメントアウトしたHTMLブロックがそのまま残されるのであまりお勧めしません。

無事消えました！

締め

結構いい感じになったのではないでしょうか？
何か変更したいことが思いついたらここに追記していきますね！

以上お疲れさまでした！