hexo-theme-arknights

デモページ　　

Dr.Yue_plus: http://arknights.theme.hexo.yue.zone/
Dr.ToUNVRSe https://tounvrse.github.io/
Dr.Ye: https://laurenfrost.github.io/
Dr.LingYun: https://dr-lingyun.gitee.io/
Dr.XIMU：http://b.ligzs.cn/
Dr.tyqtyq https://tyq0712.github.io/
Dr.TTsdzb https://ark.ttsdzb.monster/
Dr.Angine https://angine.tech/
Dr.sjfhsjfh https://sjfh.top/
Dr.Voilone https://note.voiblog.top/
Zhongye1 https://zhongye1.github.io/
Dr.yuanli-LFSWhttps://blog.yuanli-lfsw.com/
Dr.Rimrose: https://blog.rimrose.site
Dr.Laplacian: https://rhinelab.kr
Dr.Chen: https://light-of-hers.github.io
Dr.Linyee https://linyee.world/
Dr.Flacier https://fldicoahkiin.github.io
Dr.LZW https://lzwnb.github.io/blog/

このテーマを使ったあなたのブログリンク、ここに付けたいなら大歓迎~　　

インストール

環境

Node.js 16.13.x 以上
最新版 Hexo

Hexo 6.0.0 以上； hexo-cli 4.3.0 以上；

`hexo-cli` を使用して新しいブログプロジェクトを作成します。

hexo init Hexo
cd Hexo
npm install
git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights --depth=1

依存関係をインストールする

npm ユーザー：

npm install hexo-server hexo-browsersync hexo-renderer-pug --save

yarn ユーザー：

yarn add hexo-server hexo-browsersync hexo-renderer-pug

設定ファイルの変更

Hexo 公式サイトを参考に <Hexo>/_config.yml を変更します。
- theme: 初期値のlandscape を arknights に変更してください。
- コードハイライトを有効にします：
```
highlight:
  hljs: true
```
<Hexo>/themes/arknights/_config.yml を 切り取って Hexo ディレクトリに移動し、·_config.arknights.yml` という名前に変更します。
参考：
- 代替テーマ設定
テーマの設定ファイルは、中国語のコメントを参考に変更できます。

リソースファイルの変更

必要に応じて Hexo/source/ ディレクトリに以下のファイルを追加します

CNAME：GitHub Pages のデプロイ時のカスタムドメイン
img/：ディレクトリ下の Alipay.png と WeChat.png を自分の受取用 QR コード（1:1 比率の png 画像）にします；

必要に応じて Hexo/themes/arknights/source/ ディレクトリ下の以下を変更します

favicon.ico：ブラウザのタブ上のアイコン（64*64、解像度が高すぎると表示されません） README.md: デプロイリポジトリの README

執筆

執筆 | Hexo を参考にします。
テーマリポジトリの Hexo ブランチにはいくつかのサンプルテキストがあります
記事にタグとカテゴリを追加し、より多くの特性は Hexo | Front-matter を参考にできます、例：
```
---
title: 'Hello World !'
date: 2020-04-15 21:54:02
tags: code
category: Example
---
```
 の前の内容は要約と呼ばれ、ホームページに表示され、本文にも表示するかどうかを設定できます。

ナビゲーションバーにページを追加する

例えば、about ページを新規作成する
- Hexo ディレクトリで hexo new page 'about' を実行します
- その後、Hexo/source/ ディレクトリに about フォルダが追加されます
Hexo/source/about/index.md ファイルを編集します
_config.arknights.yml を編集し、リンクを追加します：
```
menu:
  About: /about
```

ページネーションの禁止

この設定は Hexo の設定ファイル _config.yml の約 88 行目にあります。

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

per_page: を 0 に変更すればよいです。

コメントシステム

Valine

このテーマはValineをサポートしています。 Valineのクイックスタートを参考に、Hexoディレクトリの_config.arknights.ymlファイルを変更してください：

valine:
  enable: false
  app_id: # APP ID
  app_key: # APP KEY
  server_url: # APP DOMAIN（LeanCloud 国際版）
  avatar: 'retro' # (''/mp/identicon/monsterid/wavatar/robohash/retro/hide)
  avatar_cdn: 'https://dn-qiniu-avatar.qbox.me/avatar/' # カスタム avatar CDN

メール通知を有効にする：zhaojun1998 / Valine-Admin

注意！ Valine を LeanCloud国際版 で使用する場合のみ、server_url: を設定する必要があります。この設定は、LeanCloud アプリの設定 -> アプリケーション証明書 -> ドメインホワイトリスト -> Requestドメインで、.api.lncldglobal.comで終わるドメインを見つけ、https://のプレフィックスを追加すればよいです。

Gitalk

このテーマは Gitalk をサポートしています。 Gitalk の公式ドキュメントを参考に、Hexo ディレクトリの _config.arknights.yml ファイルを変更してください：

gitalk:
  enable: false
  client_id: # GitHub アプリの Client ID
  client_secret: # GitHub アプリの Client Secret
  repo: # コメントデータを保存する GitHub リポジトリ
  owner: # その GitHub リポジトリの所有者
  admin: [] # その GitHub リポジトリに書き込み権限を持つユーザー
            # 例: [adminA,adminB]
  id: # (オプション) ページの一意の識別子
      # 例: location.pathname

Waline

このテーマは Waline をサポートしています。
Waline の公式ドキュメントを参考に、Hexo ディレクトリの _config.arknights.yml ファイルを変更してください:

waline:
  enable: false
  server_url: # Server_Url

Artalk

このテーマは Artalk をサポートしています。 Artalk の公式ドキュメントを参考に、Hexo ディレクトリの _config.arknights.yml ファイルを変更してください:

artalk:
  enable: false
  server: https://artalk.server.instance/ # あなたの Artalk サービスのアドレス
  site_name: My Blog # サイト名、複数のサイトを区別するために使用（オプション）

数学公式

このテーマは数学公式を表示するための2つの方法をサポートしています：

方法一：静的レンダリング

数学公式を表示するために、Hexoフィルターの hexo-filter-mathjax を静的レンダリングとして使用することができます。

数学公式をより良く処理するためのマークダウンレンダラー hexo-renderer-pandoc に切り替えることをお勧めします。

Hexoディレクトリで以下のコマンドを実行します：

# hexo-filter-mathjaxプラグインをインストール
cnpm install hexo-filter-mathjax --save
# キャッシュをクリア
hexo clean

以下の内容を <Hexo>/_config.yml ファイルに追加します：

mathjax:
  tags: none # あるいは 'ams' また 'all'
  single_dollars: true # $⋯$ で囲んでインライン LaTeX 方程式を書く
  cjk_width: 0.9 # CJK 統合漢字の幅
  normal_width: 0.6 # 正常文字（等幅）の幅
  append_css: true # CSS を全部のページに加える
  every_page: false #  true に設定されると、記事の頭の `mathjax` の値を問わずに、 mathjax が使用される

mathjax を利用したい記事の Front-matter に mathjax: true を追加すると：
```
---
title: On the Electrodynamics of Moving Bodies
categories: Physics
date: 1905-06-30 12:00:00
mathjax: true
---
```
記事の中で LaTeX 方程式が使用可能になります。
インライン方程式（…… $<数式>$ ……）は、頭の $ と後ろの $ の間で間隔は不要です：
```
- $ \epsilon_0 $
+ $\epsilon_0$
- $ \frac{\partial}{\partial t} $
+ $\frac{\partial}{\partial t}$
```
LaTeX と Markdown の文法の差異にご注意ください。必要とされる時は半角のバックスラッシュ \ （日本語環境では半角円記号 '¥'）でエスケープしてください：
```
- $\epsilon_0$
+ $\epsilon\_0$
- \begin{eqnarray*}
+ \begin{eqnarray\*}
```

その2：動的レンダリング

このテーマでは、MathJax を利用して、数式をブラウザサイドで動的レンダリングすることもできます。

まずは、デフォルトのレンダラー hexo-renderer-marked をアンインストールし、その代わりとして hexo-renderer-kramed をインストールします。
```
$ npm uninstall hexo-renderer-marked --save
$ npm install hexo-renderer-kramed --save
```

また、 <Hexo>/_config.yml を、以下のように変更します。

  # 公式支持
  mathjax:
-   enable: false
+   enable: true
  version: '2.6.1'  # 重要

そして、記事の中で以下のように LaTeX 文法を利用して、数式を表示出来ます。

% インライン数式
% 両側に「`」を付けてください。「`」と「$」の間に隙間あってはいけません。
`$\sigma$`

% ディスプレイ数式
$$
\begin{aligned}f(x) &= \sum_{i=1}^{\infty}{\frac{x}{2^i}} \\
&= x\end{aligned}
$$

この方法を使うと、 LaTeX と Markdown の文法の差を気にせずに数式を書くことができます。以下のように数式を書いても、何の問題もなくレンダリングされます。
```
\epsilon_0
\begin{eqnarray*}
```

レンダラー hexo-renderer-marked は他の設定もできますので、公式ドキュメントを参考にしてみてください：https://github.com/sun11/hexo-renderer-kramed

以上の方法は、それぞれに長所と短所があります：

動的レンダリングは、 LaTeX 文法のエスケープせずに書くことができる為、他のフレームワークやブログサイトからの記事導入は簡単にできます。ですが、クライアントサイドレンダリングですので、ページ上の数式表示は若干遅れます。
静的生成は、数式を素早く表示することができますが、 LaTeX 文法のエスケープをしなくてはいけません。
hexo-renderer-pandoc を利用して、文法をエスケープする手間がかからなくても、数式を素早く表示できますが、 Pandoc をインストールしなくてはいけません。

グラフのサポート

Hexo ディレクトリの _config.arknights.yml ファイルを変更します：

  # グラフのサポート
  mermaid:
-   enable: false
+   enable: true
    version: '8.13.5'

このテーマは mermaid-js を使用して各種グラフを描画します。例を見る

構文：

<div class="mermaid">
  graph LR
  A[Hard edge] -->|Link text| B(Round edge)
  B --> C{Decision}
  C -->|One| D[Result one]
  C -->|Two| E[Result two]
</div>

もし コードブロック を使い慣れていれば完全にサポートします。

文字数/読取り時間の統計

依存：hexo-wordcount：

npm ユーザー：

cnpm install hexo-wordcount --save

yarn ユーザー：

yarn add hexo-wordcount

その後、Hexo ディレクトリ の下の _ config.arknights.yml ファイルを変更する：

post:
  count: true # 文字数統計を表示するかどうか
  time: true # 読書時間統計を表示するかどうか

ブラウズ統計

不蒜子を使用してブラウズ統計を取得します。 Hexoディレクトリ の下にある _ config.arknights.yml ファイルを変更して有効にするには：

busuanzi:
  enable: false
  sitePV: true # サイト総アクセス数
  siteUV: true # サイト訪問者数
  pagePV: true # ページアクセス数

ドキュメント暗号化

修正された hexo-blog-encrypt プラグインはこのトピックに適合して統合されています（現在は default と up トピックのみがサポートされています）。

詳細構成リファレンス hexo-blog-encrypt/ReadMe.zh.md

Hexo/_config.yml ファイルに次の内容を追加します。

# Security
encrypt: # hexo-blog-encrypt
  abstract: Rhodes Islandと™ 弱神経接続を取得するにはパスワードが必要です
  message: Rhodes Islandと入力してください™ 弱神経接続を取得する際のパスワード：
  tags:
  - {name: tagName, password: パスワードA}
  - {name: tagName, password: パスワードB}
  wrong_pass_message: Rhodes Islandと™ パスワードの有効化に失敗しました。再試行してください。
  wrong_hash_message: Rhodes Islandと™ 有効パスワードが失敗しました。現在は一時権限を使用して表示されています。

または記事の Front-matter セクション内の設定：

---
title: Hello World
tags:
- 日記として暗号化
date: 2016-03-30 21:12:21
password: mikemessi
abstract：Rhodes Islandと™ 弱神経接続を取得するにはパスワードが必要です
message：Rhodes Islandと入力してください™ 弱神経接続を取得する際のパスワード：
wrong_pass_message：Rhodes Islandと™ パスワードの有効化に失敗しました。再試行してください。
wrong_hash_message：Rhodes Islandと™ 有効パスワードが失敗しました。現在は一時権限を使用して表示されています。
---

検索

デフォルトでオンになっています。オフにするには、Hexo/_config.arknights.yml ファイルで次の手順に従います。

search:
  enable: false

Front-matter

Hexo サポートの Front-matter もサポート：

# 投稿/更新日
post-time: true/false

# 記事の読み込み時間/語数の統計
post-count: true/false

# 記事の読み取り回数
busuanzi: true/false

# 以上すべてオン/オフ
post-info: true/false

# サイドバーのディレクトリ
post-index: true/false

# に報いる
reward: true/false

追加ラベル

admonition

{% note/warning/success/failure/detail [title] [open/fold] [color] %}
content
{% end[note/warning/success/failure/detail] %}

ヒント、警告、エラーなどのブロックコンテンツを追加します。その中で、note/warning/success/failure はアイコンがあり、detail はアイコンがありません。

hide

{% hide content %}

コンテンツを非表示にし、content は markdown レンダリングをサポートし、引用符を使用する必要はありません。

link card/linkc

{% linkcard %}
Title1:
    avatar: https://someLink/someAvatar.png
    src: https://someLink/
    img: https://somelink/somePicture.png
    descr: someDescr
    style:
    	color: someColor
Title2:
    avatar: https://someLink/someName.png
    src: https://someLink/
{% endlinkcard %}

友達チェーンのセットを生成できます。タイトル（title）、リンク（src）は必須です。スタイル（style）は CSS フォーマットに準拠しています。

カスタム CSS/JS ファイルの導入

Hexo/source/css/ ディレクトリに自分の CSS ファイルを置くことができます。 Hexo/source/js/ ディレクトリに自分の JavaScript スクリプトファイルを置くことができます。

次に Hexo/_config.arknights.yml ファイルを変更します：

  # `<head>` タグ内に CSS スタイルシートを導入
  stylesheets:
+ - /css/custom.css
  
  # `<body>` の末尾に JavaScript スクリプトを導入
  scripts:
+ - /js/custom.js

リソースフォルダはユーザーリソースを保存する場所です。 _posts フォルダ以外で、先頭が _（アンダースコア）で名付けられたファイル/フォルダや隠しファイルは無視されます。 Markdown と HTML ファイルは解析されて public フォルダに置かれ、他のファイルはコピーされます。

—— Hexo 公式ドキュメントより

テーマの開発にあなたの力を

Issues と PR は大歓迎。

ブレンチの説明

ブレンチ	説明
main	比較的安定したバージョン
gh-pages	github-page
hexo	Hexo ファイルとテスト用 `.md` ファイル

開発中に遭遇する可能性のある問題と解決方法

TS ファイルの変更が反映されない

TypeScript は手動でコンパイルする必要があります。typescript をグローバルにインストールした後、arknights\source\js\_src ディレクトリで tsc を実行してコンパイルしてください。

`hexo serve --debug` を実行すると、長い記事が完全にレンダリングされない

これはホットリロードプラグイン hexo-browsersync が原因で、公開には影響ありません。

解決方法：そのプラグインを無効にします。（公開に影響がないので、無視しても構いません）

開発に参加するために必要なドキュメント

Hexo 公式ドキュメント
Stylus 公式ドキュメント
Pug 公式ドキュメント
何人かの大物のブログを引用して

メンバー

ToUNVRSe
Yue_plus
TTsdzb
arkerny
DarkLingYun
Laurenfrost
安擎Angine
飞龙project
sjfhsjfh
Thexvoilone
RyoJerryYu
wmz1024
madisontanle
SherkeyXD
soundofautumn
LongFengShuanWu
Zhongye1
ChisatoNishikigi73

開発の環境

まずは nodejs と yarn をインストール。そして以下のコマンド通り：

yarn global add hexo-cli yo generator-hexo-theme
git clone -b hexo https://github.com/Yue-plus/hexo-theme-arknights.git
cd hexo-theme-arknights
git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights
yarn install
hexo serve --debug

支援テーマの開発

このテーマはお気に入れば：

star 頂戴いたします (/▽＼)
- star 100 達成したら、新しいテーマの開発をスケジュールに入れます。
- 新しいテーマ開発中：
  - Yue-plus/astro-arknights
  - Yue-plus/vuepress-theme-rhinelab
開発者の arknight id：24444750（中国 Bilibili 鯖）
Tencent QQ の交流グループ：618221514
Reward：

Files

README.ja.md

Latest commit

History

README.ja.md

File metadata and controls

hexo-theme-arknights

デモページ

Dr.Yue_plus: http://arknights.theme.hexo.yue.zone/

Dr.ToUNVRSe https://tounvrse.github.io/

インストール

環境

hexo-cli を使用して新しいブログ プロジェクトを作成します。

依存関係をインストールする

設定ファイルの変更

リソースファイルの変更

執筆

ナビゲーションバーにページを追加する

ページネーションの禁止

コメントシステム

Valine

Gitalk

Waline

Artalk

数学公式

方法一：静的レンダリング

その2：動的レンダリング

グラフのサポート

文字数/読取り時間の統計

ブラウズ統計

ドキュメント暗号化

検索

Front-matter

追加ラベル

admonition

hide

link card/linkc

カスタム CSS/JS ファイルの導入

テーマの開発にあなたの力を

ブレンチの説明

開発中に遭遇する可能性のある問題と解決方法

TS ファイルの変更が反映されない

hexo serve --debug を実行すると、長い記事が完全にレンダリングされない

開発に参加するために必要なドキュメント

メンバー

開発の環境

支援テーマの開発

デモページ　　

`hexo-cli` を使用して新しいブログプロジェクトを作成します。

`hexo serve --debug` を実行すると、長い記事が完全にレンダリングされない