hexo(3)プラグインのインストール

ローカル検索プラグイン#

インストール#

npm install hexo-generator-searchdb --save

設定#

ルートディレクトリの_config.ymlファイルに、以下の内容を追加します：

search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

次に、_config.maupassant.ymlでself_search属性をtrueに設定します。

最後に、以下のコマンドを実行します。プラグインをインストールした後は、以下の操作を行わないと効果が見られません：

hexo clean  # キャッシュをクリア
hexo g # ファイルを再生成
hexo s # 実行

コードハイライト#

現在、hexo 6.0 以上のバージョンにはコードハイライトが統合されており、直接有効にできます。package.json で自分の hexo バージョンを確認してください。実際に使用できますが、表示スタイルが現在使用しているテーマとスタイルが衝突するため、手動でインストールすることにしました。

公式ハイライトプラグイン設定ドキュメントを参照することをお勧めします。英語のドキュメントを確認することをお勧めします。中国語のドキュメントは少し遅れているため、設定後に効果がない可能性があります。

手動インストールを行う場合は、引き続き操作を行ってください。

hexo-prism-plugin プラグインのリンク。このリポジトリには修正されていないバグがあります。私は自分でリポジトリをフォークし、バグを修正した後、新しいパッケージを再リリースしました ——hexo-prism-plugin-advanced。今後もメンテナンスを続ける可能性があります。

インストール#

npm install hexo-prism-plugin --save # インストールは推奨しません
npm i hexo-prism-plugin-advanced --save # インストールを推奨します

設定#

ルートディレクトリの_config.ymlファイルに、以下の内容を追加します：

highlight:  
  enable: true  
  line_number: true  
  auto_detect: true  
  tab_replace: ''  
  wrap: true  
  hljs: true  
prismjs:  
  enable: true  
  preprocess: true  
  line_number: true  
  tab_replace: ''

これを以下のように置き換えます：

highlight:  
  enable: false

ルートディレクトリの_config.ymlファイルに、以下の内容を追加します：

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'ghcolors'      # 公式のテーマスタイルは多数ありますので、公式サイトで確認できます
  line_number: true    # デフォルトはfalse
  custom_css: 'path/to/your/custom.css'     # オプション、なければこの行を削除できます

問題に直面した場合#

使用中に直面する問題は、異なるテーマによってはこの問題が発生しない場合があります：

ホームページに表示される記事の要約にコードブロックを含めないでください。記事の最初の段落にコードブロックがあると、スタイルが乱れる原因になります。
コードブロックのコピーボタンが消えます。
コードブロック内の '{}' が '{' と '}' にエスケープされます。私のパッケージではこのバグを修正しましたので、hexo-prism-plugin-advanced をインストールしている場合はこの問題は発生しません。

問題 1 の修正#

これはプラグインのバグだと思います。また、要約にコードブロックを表示するのはあまり美しくないため、自分で避けるべきです。

問題 2 の修正#

第一歩：

themes/maupassant/source/js/copycode.jsの以下のコードを修正します：

$(".highlight .code pre").before(copyHtml); // 12行目

これを以下のように置き換えます：

$("pre code").before(copyHtml);
$("pre").wrap('<div class="code-block-wrapper"></div'); // この行を追加します

この行の意味は、コードブロックにコピーボタンを挿入することです。プラグインを使用しているため、スタイルが変更され、ボタンの挿入に失敗したため、コピーボタンが表示されなくなりました。

第二歩：

themes/maupassant/source/css/copycode.scssを以下のように修正します：

.btn-copy {  
    position: sticky;  
    height: 12px;  
    left: 96%;  
    width: 32px;  
    margin-left: 96%;  
    cursor: pointer;  
    border-radius: 6px;  
    -webkit-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;  
    user-select: none;  
    -webkit-appearance: none;  
    color: #808080;  
    -webkit-transition: opacity .3s ease-in-out;  
    -o-transition: opacity .3s ease-in-out;  
    transition: opacity .3s ease-in-out;  
    opacity: 0;  
}  
.btn-copy:hover{  
  color: #000;  
}  
  
pre:hover .btn-copy{  
  opacity: 1;  
}

問題 3 の修正#

node_modules/hexo-prism-plugin/src/index.jsに以下のコードを追加します。キャッシュをクリアし、再実行することを忘れないでください：

これは、パッケージを再インストールするたびにこの部分を修正する必要があることを意味します。面倒だと感じる場合は、私がリリースしたパッケージをインストールできます。

const map = {  
  '&#39;': '\'',  
  '&amp;': '&',  
  '&gt;': '>',  
  '&lt;': '<',  
  '&quot;': '"',
  '&#123;':'{', // この行を追加
  '&#125;':'}' // この行を追加
};

文字数統計#

インストール#

hexo-wordcount プラグインのリンク

npm i --save hexo-wordcount

設定#

ルートディレクトリの_config.ymlファイルに、以下の内容を追加します：

post_wordcount:  
  date: true # 公開日  
  update: true # 更新日  
  wordCount: true # 記事の文字数統計  
  totalCount: true # サイトの総文字数  
  min2read: true # 記事の読了時間  
  readCount: true # 記事の閲覧回数

次に、_config.maupassant.ymlでwordcount属性をtrueに設定します。

高度な設定：

themes/maupassant/layout/_partial/wordcount.pugファイルで、読書速度などを変更できます。

span.post-time  
  span.post-meta-item-text= ' | '  
  span.post-meta-item-icon  
    i.fa.fa-keyboard-o  
    span.post-count= ' '+wordcount(page.content)  
    span.post-meta-item-text= " "+__('word_cnt')  
span.post-time= ' | '  
  span.post-meta-item-icon  
    i.fa.fa-clock-o  
    span.post-count= ' '+min2read(page.content, {cn: 200, en: 160}) # 中国語と英語の読書速度を変更
    span.post-meta-item-text= ' '+__('read_time')

中国語リンクをピンインに変換#

インストール#

hexo-permalink-pinyin 公式リンク

npm i hexo-permalink-pinyin --save

設定#

ルートディレクトリの_config.ymlファイルに、以下の内容を追加します：

permalink_pinyin:
  enable: true

emoji 表情サポートの追加#

インストール#

# hexo-filter-github-emojis 公式リンク

npm install hexo-filter-github-emojis --save

設定#

ルートディレクトリの_config.ymlファイルに、以下の内容を追加します：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

サイトマップのインストール#

より良い SEO のために、百度のサイト収録を追加します。

hexo-generator-sitemap 公式リンク

npm install hexo-generator-sitemap --save

設定#

ルートディレクトリの_config.ymlファイルに、以下の内容を追加します：

sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  rel: false
  tags: true
  categories: true

特定の記事がクロールされないようにしたい場合は、front matterでsitemap: falseを設定できます。

豆瓣カードのインストール#

hexo-douban-card 公式リンク

映画や書籍を紹介するブログ記事を書くときに、豆瓣から情報を直接取得してブログに表示できます。スクリーンショットは以下の通りです。

npm install hexo-douban-card --save

使用方法#

記事の適切な位置に直接挿入します。

{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

パラメータの説明#

第一項douban はプラグイン名を示します。
第二項はオプション：movie,book,music
第三項には対応する ID を入力してください。ID は豆瓣で検索した内容の URL の subject の後に続く数字です。

bilibili 動画カードの追加#

現在、多くのプラグインには公式サイトがなく、直接埋め込むと美観が損なわれます。

bilibili でシェアボタンをクリックし、埋め込みリンクを記事にコピーするだけで済みます。スタイルがあまり美しくないと感じる場合は、リンクに以下のスタイルを追加できます：

style="width: 100%; height: 500px; max-width: 100%；align:center; padding:20px 0;"

最終的なリンク表示は以下のようになります：

<iframe src="//player.bilibili.com/player.html?aid=839629572&bvid=BV1Y54y1m743&cid=237240818&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%; height: 500px; max-width: 100%；align:center; padding:20px 0;"> </iframe>

RSS 機能のインストール#

hexo-feed 公式リンク

npm install hexo-feed --save-dev

インストールが完了したら、以下のコマンドを使用します：

hexo cl 
hexo g

ルートディレクトリのpublicフォルダにrss.xml、atom.xml、feed.jsonの 3 つのファイルが生成されているのが確認できます。

設定ファイル_config.maupassant.ymlで RSS パスを設定できます。

info:  
  #######  
  outlinkitem:  
 ######  
    - name: rss  
      outlink: /rss.xml  
      message: RSS