最近、ブログを構築する過程でフォトアルバム機能を実現したいと思い、プラグインやスクリプトを使用する必要があると多くの情報を見つけました。と思っていましたが、諦めずに、その後、ある記事を見つけました。この記事を通して、ようやく気づきました。この記事のおかげで、ブログのWebデザインに対する理解が深まりました。
個人的には、この方法は考え方が非常に明確だと思います。コードを通じて、フォト アルバムが段階的に構築されます。他のチュートリアルとは異なり、原理を理解していない操作が多くあります。記事全体を辛抱強く読んでください。理解できると思います。フォトアルバムとしての機能を徹底実現。
私のブログの効果:写真集 | 羅氏 (yuansec.top) 
https://www.yuansec.top/photos/
1.製図ベッドを準備する
私は github 経由で Web サイトを構築しており、アルバム機能に多くの写真があるため、Web サイトの読み込みが遅くなるローカルアップロード写真の使用はお勧めできません。また、ピクチャーベッドアクセラレーションを使用すると、写真の読み込み速度が大幅に向上します。あなたのお父さんのウェブサイトの読み込み速度を低下させないように（私のようにgithubを使用している場合は、ウェブサイト上の写真には画像ベッドのリンクを使用するのが最善です）
ここで私は個人的に2つの計画を立てています
1. ヴィグテーブル
具体的な使い方については前回の記事を参照してください
無料のマップ ベッド スキーム - vig table_yuansec のブログ - CSDN ブログ
2.ピクチャーベッドを通過（推奨）
画像ベッドを通過 - 無料の画像アップロード、プロの画像外部リンク、無料の公共画像ベッド
推奨される理由: 使いやすく、速い
1.フォトアルバムセクションを追加
1.まずアルバムアイコンを作成します
この手順については詳しく説明しませんが、分からない場合は、自分でチュートリアルを見つけるか、以前に投稿した記事を参照してください。
次のテーマのカスタム サイドバー リンク アイコン (新しい方法) - Yuansec のブログ - CSDN ブログ
2.アルバムセクションを追加
ブログのルート ディレクトリにコードを入力します。
hexo new page photosブログのルート ディレクトリのソース フォルダーの下に写真フォルダーが生成されます。それをクリックすると、その中にindex.md ファイルがあります。このファイルを開き、タイトルをアルバム (任意の名前) に変更し、タイプを に設定します。写真
次に、\themes\next ディレクトリにある _config.yml ファイルを開き、メニューを見つけて、写真列を追加します。
最後に、次の中国語を設定し、\messages\next\langages ディレクトリにある zh-CN.yml ファイルを開き、中国語を追加します
2. アルバムのホームページをデザインする
1.アルバムホームページのテーマ設定ファイルを追加します
\themes\next\source\css の下にある main.styl ファイルを開き、次のコードを追加します。
/*相册主页面*/
.photos-page {
margin-top: -50px;
}
.photos-list {
display: flex;//指定容器
flex-direction: row;//水平为主轴
flex-wrap: nowrap;//不自动换行
justify-content: space-between;//两侧对其
align-items: flex-start;//水平对齐
}
.photos-column a {
border-bottom: 0px;
}
.photos-item {
margin-bottom: -50px
}
/*相册标题样式*/
.photos-item p {
margin: -25px auto -10px;
max-width: 50%;
text-align: center;
font-size: 15px;
color: $black-deep;
background: rgba(255,255,255,.3);
border-radius: 7px;
border: 1px solid $black-deep;
box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
/*相册封面显示以及点击面积*/
.photos-column a img {
height: 250px;
width: 300px;
object-fit: cover;
}2.フォトアルバムを追加する
ルート ディレクトリ\source\photos フォルダーの下にいくつかの新しいフォルダーを作成します。ここでのコードは 3 です。フォルダーを 3 つ作成することも、コードを増減してから、index.md ファイルを開いてコードを追加することもできます
---
title: 相册
type: photos
---
<div class="photos-page">
<div class="photos-list">
<div class="photos-column">
<div class="photos-item">
<a href="photos目录下的相册文件名1"><img src="图床url链接">
</a>
<br>
<p>-相册名1-</p>
</div>
</div>
<div class="photos-column">
<div class="photos-item">
<a href="photos目录下的相册文件名2"><img src="图床url链接">
</a>
<br>
<p>-相册名2-</p>
</div>
</div>
<div class="photos-column">
<div class="photos-item">
<a href="photos目录下的相册文件名3"><img src="图床url链接">
</a>
<br>
<p>-相册名3-</p>
</div>
</div>
</div>
</div>
<br>
<br>コード中の「写真ディレクトリ下のアルバムファイル名1」を作成したファイル名に変更し、「ピクチャーベッドURLリンク」を写真のピクチャーベッドURLリンクに変更します。
3. サブアルバムを追加する
1. サブアルバムのテーマスタイルファイルを追加する
\themes\next\source\css の下にある main.styl ファイルを開き、次のコードを追加します。
.img-list{
display: flex;
flex-direction: column;//垂直为主轴
}
.img-column {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start
}
.img-column a{
border-bottom: 0px;
}
/*图片显示面积*/
.img-column a img {
height: 280px;
width: 330px;
object-fit: scale-down;
}2. 写真を追加する
写真ディレクトリ内のアルバム ファイルを開き、新しいindex.mdファイルを作成するだけです。
コードを追加
<div class="photos-page">
<div class="img-list">
<div class="img-column">
<img src="图床url链接"></a>
<img src="图床url链接"></a>
<img src="图床url链接"></a>
</div>
<div class="img2-column">
<img src="图床url链接"></a>
<img src="图床url链接"></a>
</div>
</div>
</div>「画像ベッドのURLリンク」を画像リンクに変更するだけです
4. 画像をクリックすると効果が拡大されます
まず next/source/lib ディレクトリに移動し、プラグインをダウンロードします。
git clone https://github.com/theme-next/theme-next-fancybox3 fancyboxnext/_config.yml ファイルを変更します。
ファンシーボックス: true
要約する
全体的なデザインのアイデア
アルバム機能セクションの作成 - アルバム ホーム ページの表示スタイルの設計 - サブアルバムの追加 - サブアルバムの画像の表示スタイルの設計 - 各サブアルバムへの画像の追加
一般的なアイデアは次のとおりです。理解するのは難しくありません。すべてのプロセスは自分でコードを書くことによって構築されます。プラグインやスクリプトをダウンロードする必要はありません。最終的な表示結果と私の結果に解決策がある場合は、次のようにすることができます。この記事を読んで、Web ページのレイアウトの本当の原理を理解してください。