01_Hexo-Hexo + Pureでブログを構築 - カスタマイズ

[記事パス]: 
	\source\_posts
[サイト設定ファイル]: 
	\_config.yml
[テーマ設定ファイル]: 
	\themes\pure\_config.yml	"について、自己紹介、通知"
[友リンクファイル]: 
	\source\_data\links.yml
[言語]: 
	\themes\pure\languages
[左下隅の実行時間]: 
	\themes\pure\layout\_common\footer.ejs	"時間、著作権"
[コメント役割設定]: 
	\themes\pure\layout\_script\_comment\valine.ejs
[cssスタイル]:
	\themes\pure\source\css\style.css
[検索バー制限]: 
	\themes\pure\source\js\insight.js	"160行"

六。コンテンツサンプル#

---
title: Test
date: 2022-08-28 00:09:00
updated: 2022-08-28 00:09:01
thumbnail: https://image.cpen.top/image/test.png
tags:
    - Test
category:
    - Test
toc: true
top: true
---
説明<!-- more -->

記事が複数のカテゴリを指定する#

複数のカテゴリ

もし私たちの要求が、記事を同時に二つ以上の異なるカテゴリに分けることであれば、公式が示す方法は次の通りです：
categories:
  - [Sports]
  - [Baseball]
参考記事：Hexo 一篇文章多个 categories https://www.jianshu.com/p/4438c417611e

七。カスタマイズ#

7.1 検索ボックスインデックスの突破 5#

F12で検索ボックスのクラスセレクタを ins-section-header に設定
grep で設定ファイルを\themes\pure\source\js\insight.jsに設定
Ctrl + F で 5 を検索し、160 行目に移動して制限を変更

7.2 左側のアバターリンク、target を_self に変更#

a タグ、target を '_blank' → '_self' に変更

7.3 記事目次、1 級タイトルがジャンプしない#

時々、1 級タイトルがジャンプしないことがあります

~~設定ファイル \node_modules\hexo\lib\plugins\helper\toc.js~~

~~\node_modules\hexo\lib\plugins\helper\toc.jsファイルを更新すると、正常に戻りました。時々正常に動作します。。。~~

~~参考 https://hwame.top/ 如何取消文章目录的自动编号~~

.node_modules\hexo-renderer-markdown-it\index.jsの level を 1 に変更

参考記事：

https://blog.csdn.net/Fosu_Chenai/article/details/111192850 コメント

7.4 スクロールバーを太く + 小さな矢印を追加#

css スタイルを変更、パス .\hexo-source\themes\pure\source\css\style.css

Ctlrl + Fでscrollbarを見つける；
heightを上げて、コードボックスの右側のスクロールバーを太くする；
右側のドロップダウンバーを太くする；

7.4.1 コードボックスを太くする

/*
 * scrollbar
 */

::-webkit-scrollbar {
  width: 15px;
  height: 14px;					# 高さを上げる
  background: transparent;
}

7.4.2 右側のドロップダウンバーを太く + 小さな矢印を追加

/*
 * スクロールバーの矢印							
 */
::-webkit-scrollbar-button {
    width: 0px;
    height: 4px;
    display: block; 
    background-color: #c3c3c3;
}
::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* ボタン */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* 上 */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0px 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* 下 */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

参考記事

7.5 Valine コメントボックスに一言を追加#

参考記事

https://blog.justlovesmile.top/posts/27831.html

偶然見つけた記事で、この機能を自分で追加しました。

パス：.\themes\pure\layout\_script\_comment\valine.ejs；

最後の</script>タグの前に追加；c=j リクエストで网易云の文を取得し、ネット抑圧を始めましょう；

    fetch('https://v1.hitokoto.cn/?c=j')
    .then(response => response.json())
    .then(data => {
      document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)

変更方法：
ブログに valine を追加する位置を見つけます。例えば、Ayer テーマの位置は hexo\themes\ayer\layout_partial\post\valine.ejs です。
内部に次のコードを追加します：
<script type="text/javascript">
   fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)
</script>
API インターフェースの説明：
（1）https://v1.hitokoto.cn/ （7 種類のカテゴリからランダムに抽出）
（2）https://v1.hitokoto.cn/?c=b （漫画のカテゴリの文を取得）
パラメータ説明
a アニメ
b 漫画
c ゲーム
d 文学
e オリジナル
f ネットから
g その他
h 映画・テレビ
i 詩
j 网易云
k 哲学
l 冗談
その他アニメタイプとして処理
複数のカテゴリを選択できます。例： ?c=a&c=c
（3）https://v1.hitokoto.cn/?c=f&encode=text （ネットからの文を取得し、プレーンテキスト形式で出力）

戻り値の形式の説明
戻りパラメータ名説明
id 一言の識別
hitokoto 一言の本文。エンコード方式は unicode。utf-8 を使用。
type タイプ
from 一言の出所
from_who 一言の作者
creator 追加者
creator_uid 追加者のユーザー識別
reviewer 審査員の識別
uuid 一言のユニーク識別；https://hitokoto.cn?uuid=[uuid] にリンクしてこの一言の完全な情報を確認できます
commit_from 提出方法
created_at 追加時間
length 文の長さ
例えば：戻り値の data から data.hitokoto で文の本文を取得

作者: Justlovesmile
リンク: https://blog.justlovesmile.top/posts/27831.html
出典: Justlovesmile's BLOG
著作権は作者に帰属します。商業利用は作者に連絡して許可を得てください。非商業利用は出典を明記してください。

PS：この方のブログは本当に素敵です～～

7.6 左側のアーカイブ、カテゴリをデフォルトで折りたたむ#

デフォルトでは展開されています

以下のファイルを変更し、折りたたみ状態にします。図のように
- style="height: 0px" は書かなくても大丈夫です。折りたたみ状態はデフォルトで 0 です～～

.\themes\pure\layout\categories.ejs

.\themes\pure\layout\_partial\archive.ejs

八。未解決の小さな要求#

（解決済み、#7.3）1 級ディレクトリ、右側のナビゲーションバーが時々ジャンプに失敗する；
Valine コメントシステム、下のコメントが @された後、@情報が表示されず、他の人は成功している；

私の

他の方の
引用時に #を使用すると、ナビゲーション目次が誤って 1 級タイトルと見なされる；
（解決済み）/public ディレクトリに生成された静的ファイルがすべて圧縮されている、~~他の人のは圧縮されていないのを見たが、理由は不明。~~ これは設定したためです https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md ブログ最適化ファイルが圧縮されました
（解決済み）記事内部の 1 級、2 級...... タイトルの左側にアンカーポイントがない

理想的な効果図

環境設定の問題のようです。仮想マシンで静的ファイルをプッシュすると表示されますが、実際の Windows 機でプッシュするとアンカーポイントが表示されません。Git を再インストールしても表示されません（おそらく Git の問題ではない）。。。

静的ファイルが圧縮されたため、すべてのhexo-neat設定をコメントアウトしました。
参考
https://github.com/cofess/hexo-theme-pure#hexo-neat
https://github.com/rozbo/hexo-neat#options

無傷大雅、~~私は一般的に 1 級タイトルに記事のタイトルを書く~~；コメント欄はただの飾りです；~~静的ファイルが圧縮されているのは、他の人が私が故意にやっていると思うかもしれません、へへ~~~~

最後にまとめ：カスタマイズは適度に、時間がかかりすぎて向上が得られないなら、前端のビデオをいくつか見たり、いくつかの記事を書いたりする方が良い。。。