次のテーマは現在最もよく使用されていますが、なぜそれほど多く使用されているのでしょうか?もちろん、それはほとんどの人の美学と一致しています。次 (v7.8.0) を使用しています。ダウンロード アドレス: theme-next/hexo-theme-next
1 基本設定
1.1 テーマの設定
ブログ ルート ディレクトリのブログ フォルダを開き、Git Bash を右クリックし、次のコードを入力して次のテーマをディレクトリ Blog/themes にダウンロードします。
git clone https://github.com/theme-next/hexo-theme-next themes/next
ルート ディレクトリ (サイト構成ファイルと呼ばれる) で _config.yml を開き、テーマを変更します (コロンの後にスペースが必要であることに注意してください)。
# Site
title: CarpeDiem's Blog # 标题
subtitle: '虽不能至，心向往之'
description: '不闻不若闻之，闻之不若见之，见之不若知之，知之不若行之。' # 简介或格言
keywords: "Python, Linux, Java, 算法, 人工智能"
author: Carpe Diem # 作者
language: zh-CN # 主题语言 en/zh-CN
timezone: Asia/Shanghai # 中国的时区
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-bamboo # 主体修改为 next
テーマ言語は主に、テーマ/次/言語の簡体字中国語が zh-CN か zh-Hans であるかによって異なります。
次のテーマには、次の図に示すように、MUSE、Mist、PISCES、Gemini の 4 種類があります (設定ごとに 1 回設定でき、お気に入りの 1 つを決定します)。ここでは Gemini を選択し、ディレクトリ Blog/themes/next/
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini # 选择的主题
注意: ルート ディレクトリ Blog の下の _config.yml と Blog/themes/next/ の下の _config.yml を区別するように注意してください。混同すると、対応するディレクトリを見つけることができなくなります。設定
ルート ディレクトリに戻って Git Bash を開き、次の 3 つのコマンドを入力します。
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
1.2 設定メニュー
テーマ設定ファイル (messages/next の下にある _config.yml) を開き、menu を検索して、その前にある # を削除します。
menu:
home: / || home #首页
archives: /archives/ || archive #归档
categories: /categories/ || th #分类
tags: /tags/ || tags #标签
about: /about/ || user #关于
resources: /resources/ || download #资源
# schedule: /schedule/ || calendar #日历
# sitemap: /sitemap.xml || sitemap #站点地图，供搜索引擎爬取
# commonweal: /404/ || heartbeat #腾讯公益404
「||」の前にターゲット リンクがあり、その後にアイコン名が続きます。次に使用するすべてのアイコンはアイコン ライブラリ - Font Awesome 中国語 Web サイト< a i= 2> この Web サイトで使用したいアイコンがある場合は、fontawesome でアイコンの名前を検索してください。リソースは自分で追加しました。
新しく追加したメニューは中国語に翻訳する必要があります。theme/next/languages/zh-CN.yml を開いてメニューの下に設定します:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
resources: 资源
search: 搜索
ルート ディレクトリで Git Bash を開き、次のコードを入力します。
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"
この時点で、カテゴリ、タグ、概要、リソースの 4 つのファイルがルート ディレクトリのソース フォルダに生成されます。各ファイルには 1 つの index.md ファイルがあります。内容は次のとおりです。
---
title: 分类
date: 2020-02-10 22:07:08
type: "categories"
comments: false
---
---
title: 标签
date: 2020-02-10 22:07:08
type: "tags"
comments: false
---
---
title: 关于
date: 2020-02-10 22:07:08
type: "about"
comments: false
---
---
title: 资源
date: 2020-02-10 22:07:08
type: "resources"
comments: false
---
注: コメントが有効になっている場合、デフォルトのページにコメントが表示されます。オフにする必要がある場合は、フィールドのコメントを追加し、値を false に設定します。
1.3 Web サイトの構築時間を設定する
テーマ設定ファイル (themes/next の下にある _config.yml) を開き、since: を検索します。
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2023-06 # 建站时间
1.4 アバターの設定
テーマ設定ファイル (themes/next の下の _config.yml) を開き、アバターを検索します。URL の後に画像のリンク アドレスが続きます。
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif #图片的位置，也可以是http://xxx.com/avatar.png
# If true, the avatar will be dispalyed in circle.
rounded: true #头像展示在圈里
# If true, the avatar will be rotated with the cursor.
rotated: false #头像随光标旋转
1.5 Webサイトのアイコン設定
このアイコンは、無料のアイコン素材サイトであるEasyicon で見つけました。
16x16 と 32x32 のアイコンをダウンロードした後、テーマ設定ファイルを開き、ファビコンを見つけて、小と中をアイコンのパスに変更するだけです。
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
1.6 動的な背景を設定する
1.キャンバスネストスタイル
テーマ/次のディレクトリで Git Bash を開き、次のように入力します。
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
テーマ設定ファイル (messages/next の下にある _config.yml) を開き、canvas-nest を見つけて、 enable：false を true に変更します (canvas-nest が見つからない場合は、ファイルが変更されている可能性があります。次のコードをコピーして、theme/next) に貼り付けてみてください)
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines
2. JavaScript 3D ライブラリ スタイル
テーマ/次のディレクトリで Git Bash を開き、次のように入力します。
git clone https://github.com/theme-next/theme-next-three source/lib/three
テーマ設定ファイルを開きます, _config.yml は Themes/next の下にあり、3 つあります。ここには 3 つのスタイルがあります。どのスタイルが好みか試してみることができます。false を true に変更するだけです。私は Canvas-nest を選択しました。私はこのスタイルを選択しませんでした:
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: true
three_waves: false
canvas_lines: false
canvas_sphere: false
1.7 トップローディングバーを追加する
テーマ/次のディレクトリで Git Bash を開き、次のように入力します。
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
テーマ構成ファイル (テーマ/次の下の _config.yml) を開き、ペースを見つけて、enable: false を true に変更します。タイプ (テーマ) を選択することもできます。
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal
1.8 サイドバーの表示効果を設定する
テーマ構成ファイル (messages/next の下にある _config.yml) を開き、「サイドバー設定」を見つけて、次のように設定します。
sidebar:
# Sidebar Position. #设置侧边栏位置
position: left
#position: right
# - post 默认显示模式
# - always 一直显示
# - hide 初始隐藏
# - remove 移除侧边栏
display: post
1.9 サイドバーの推奨事項
テーマ設定ファイル (messages/next の下にある _config.yml) を開き、リンクを検索します (必要なリンクをその中に書き込みます)。
# Blog rolls
links_settings:
icon: fa fa-link
title: 推荐网站 # 修改名称
# Available values: block | inline
layout: block
links:
#Title: http://yoursite.com
菜鸟教程: https://www.runoob.com/
C语言中文网: http://c.biancheng.net/sitemap/
CS自学指南: https://csdiy.wiki/
Road To Coding: https://www.r2coding.com/#/
计算机专业学习路线: https://hackway.org/docs/cs/intro
鱼C论坛: https://fishc.com.cn
1.10 ソーシャルリンクを追加する
テーマ構成ファイル (messages/next の下にある _config.yml) を開き、「social」を検索します。
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/molimi || fab fa-github
E-Mail: mailto:[email protected] || fa fa-envelope
CSDN: https://blog.csdn.net/xq151750111 || fa fa-codiepie
「||」の前にリンクがあり、その後に FontAwesome アイコン名が続きます。
1.11 ブログ投稿内のリンクを青色に設定する
Themes/next/source/css/_common/components/post/post.styl ファイルを開き、次のコードをファイルの末尾にコピーします。
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
1.12 記事の文字数と読了時間を表示する
ブログのルート ディレクトリから Git Bash を開き、次のコマンドを実行してプラグインをインストールします。
npm install hexo-wordcount --save
次に、サイト構成ファイルを開き、ファイルの最後に次のコードを追加します。
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
1.13 記事の最後に著作権に関する記述を追加する
テーマ設定ファイル Themes/next/_config.yml で Creative_commons を見つけます。
creative_commons:
license: by-nc-sa
sidebar: false
post: true # 将false改为true即可显示版权信息
language:
1.14 コメントを追加する
Hexo 静的ブログの nextT テーマはさまざまなコメント システムを継承していますが、ここでは比較的使いやすい 2 つのコメント システム、Valine、Gitment、および Utterances を紹介します。
1.バリンコメントシステム
Valineコメントシステム、このシステムはログイン不要、バックエンド不要、最新のnextTテーマもインストール可能です。
Valine は LeanCloud システムに基づいているため、最初に LeanCloud にアカウントを登録する必要があります。LeanCloud 公式 Web サイト:https://console.leancloud.cn/login は、以下に示すように、登録してログインした後、コンソールにアクセスし、アプリケーションを作成し、開発バージョンを選択して、作成を確認します。
作成が成功すると、AppID と AppKey が生成され、以下に示すように、コンソール - アプリケーション資格情報で表示されます。
テーマの設定ファイル _config.yml で、バリンに関する設定を以下のように変更します。
上記の設定はあくまで参考です。最後に、再デプロイするだけです。
2. ギトメントコメントシステム
Gitment コメント システムは Github をベースに開発され、GitHub Issues のコメント システムに依存しており、最新の Next テーマもインストールをサポートしています。
インストールの前提条件: 次のテーマの更新 (5.1.2 テーマ以降)
1. OAuthアプリケーションを登録する
- github に登録し、https://github.com/settings/profile と入力します。
- 左側の「開発者設定」をクリックします
- 左側の「Oauth Apps」をクリックします
- 「新しいアプリケーションの登録」をクリックします
登録が完了すると、クライアント ID とクライアント シークレットを取得します。
2. ブログのコメントを保存するための新しいウェアハウスを作成する
ブログのコメントを保存するためだけに Github でプロジェクトを作成します
3. nextTテーマファイルを設定する
テーマ設定ファイルを編集します。themes\ next主题 \ _config.yml 次のように、gitment に関連する設定を見つけます。
gitment:
enable: true
mint: true
count: true
lazy: false #评论懒加载，如果true，则默认不展示评论，点击按钮查看评论
cleanly: false
language:
github_user: #github名称
github_repo: BlogComments #上一步新建存放评论的仓库名
client_id: b8bad0exxxx #上面注册 OAuth Application 的 Client ID
client_secret: bcee560xxxxxx #上面注册 OAuth Application 申请的 Client Secret
proxy_gateway:
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint
4. 初期化
セットアップが完了すると、Hexo が再デプロイされます。各記事の「コメントを初期化」ボタンをクリックします。
5. 管理
コメントは、コメントが保存される新しく作成されたリポジトリ内の課題に表示されます。
6.閉じる
ページのフロントマターにコメント フィールドを追加し、それを false に設定することで、ページ上のコメントを個別にオフにできます。たとえば、タグ ページにコメントが不要な場合は、タグ ページで次の設定を行います。
---
title: xxxxxxxxx
date: 2023-06-06 17:05:24
type: "tags"
comments: false
---
3. 発言コメントシステム
ここでは主に、Github Issues をベースにした軽量のブログ コメント システムである Utterances を紹介します。 Utteranceの設定と使い方を中心に紹介します。
Utterances は、Github Issues に基づいた軽量のコメント システムで、ブログや Wiki などに使用できます。次のような利点があります。
- オープンソース
- 追跡なし、広告なし、常に無料
- すべてのデータは Github Issues に保存されます
- Github の Primer デザイン言語に基づいたスタイル
- ナイトモード
- 軽量、ネイティブ TypeScript、「エバーグリーン」ブラウザでは Web フォント、JavaScript フレームワーク、またはポリフィルを使用しません。
すぐに始めましょう
- GitHub 上に新しいパブリック リポジトリ (リポジトリ) を作成し、Utterances GitHub アプリ をリポジトリにインストールします。
- Web ページ上の発話コメントを挿入する場所に次のコードを貼り付けます (ユーザー名とリポ名をそれぞれ GitHub ユーザー名とウェアハウス名に変更します)。
<script src="https://utteranc.es/client.js"
repo="username/reponame"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
- Web ページを更新すると、発言のコメント ボックスが表示されます。
設定の詳細については、—セルフホスト型発話チュートリアル: Github の問題に基づく軽量のブログ コメント システム を参照してください。
1.15 パーマリンクのデフォルト形式を変更する
記事名が中国語の場合、Hexo によってデフォルトで生成される永久リンクも中国語になりますが、これは SEO に不利であり、gitment コメントは中国語のリンクをサポートしていません。
Hexo ルート ディレクトリの _config.yml ファイルには初期設定が適用されます。ここで「年、月、日」を使用すると記事へのリンクが深くなりすぎるため、代わりに「article」を使用します。
# permalink: :year/:month/:day/:title/
permalink: article/:title.html
permalink_defaults:
生成される記事リンクは次のとおりです (「My Personal Blog」というタイトル)。https://[你的网站域名]/article/我的个人博客.html
リンク内に漢字が含まれるのは明らかに良くないので、代わりの方法を 3 つ紹介します。
1. プラグインのインストール方法 1 (推奨)
Hexo ルート ディレクトリで git bash を使用してコマンドを実行します。
npm install hexo-abbrlink --save
Hexo ルート ディレクトリにある _config.yml ファイルを次の構成に変更します。
# permalink: :year/:month/:day/:title/
# permalink: article/:title/
permalink: article/:abbrlink.html
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 进制：dec(default) and hex
permalink_defaults:
git bash
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
ウェブサイト ファイルを開くと、効果がわかります————https://[你的网站域名]/article/60762.html (そのうち 60,762 個がランダムに生成されます)
2. プラグインのインストール方法2
中国語のリンクをピンインに変換し、Hexo ルート ディレクトリで git bash を使用してコマンドを実行します。
npm i hexo-permalink-pinyin --save
Hexo ルート ディレクトリの _config.yml ファイルで、次の設定項目を変更します。
permalink: article/:title.html
permalink_pinyin:
enable: true
separator: '-' # default: '-'
permalink_defaults:
git bash
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
Web サイト ファイルをもう一度開いて、効果を確認します。 https://[你的网站域名]/article/wo-de-ge-ren-bo-ke.html (「私の個人ブログ」というタイトル)
3. URL名を使用する
各MD記事を書くときに、URL名をFront-matterに追加します。
---
title: Next 主题介绍
date: 2023-06-06 15:31:11
urlname: 2023060601
---
Hexo ルート ディレクトリの _config.yml ファイルで、次の設定項目を変更します。
permalink: article/:urlname.html # urlname值文章里必须填写，格式2023060601
permalink_defaults:
git bash
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
Web サイトのファイルを再度開くと、効果を確認できます。https://[你的网站域名]/article/2023060601.html
まとめ
最初の方法は私が試した中で最も良い方法で、3 番目の方法は URL 名を毎回手動で追加する必要があるため、2 番目の方法は記事の中国語のタイトル名が長すぎると効果が良くありません。