Kürzlich wollte ich beim Aufbau eines Blogs die Funktion eines Fotoalbums realisieren. Ich fand viele Informationen, die alle darauf hindeuteten, dass ich Plug-Ins oder Skripte verwenden musste. Ich habe viel Zeit damit verbracht, diesen Materialien zu folgen , aber ich habe es nicht bemerkt, aber ich habe nicht aufgegeben. Später habe ich endlich einen Artikel gefunden. Durch diesen Artikel habe ich es endlich erkannt. Es war dieser Artikel, der mir ein besseres Verständnis des Blog-Webdesigns vermittelte.
Persönlich denke ich, dass diese Methode sehr klar im Denken ist. Durch Code wird das Fotoalbum Schritt für Schritt erstellt. Im Gegensatz zu anderen Tutorials verstehen viele Vorgänge die Prinzipien nicht. Bitte lesen Sie den gesamten Artikel geduldig. Ich glaube, Sie können das verstehen Fotoalbum so gründlich wie ich. Funktionsrealisierung.
Die Wirkung meines Blogs: Fotoalbum | Mr. Luo (yuansec.top) 
https://www.yuansec.top/photos/
1. Bereiten Sie das Zeichenbett vor
Da ich eine Website über Github erstelle und die Albumfunktion viele Bilder enthält, wird nicht empfohlen, Bilder lokal hochzuladen, da dies das Laden Ihrer Website verlangsamt und das Laden Ihrer Website verlangsamt. Das Bilderbett Die Beschleunigung kann die Ladegeschwindigkeit von Bildern erheblich verbessern, sodass die Ladegeschwindigkeit der Website Ihres Vaters nicht beeinträchtigt wird (wenn Sie wie ich Github verwenden, verwenden Sie am besten den Bildbett-Link für die Bilder auf der Website).
Hier habe ich persönlich zwei Pläne
1. Vig-Tisch
Informationen zur spezifischen Verwendung finden Sie in meinem vorherigen Artikel
Kostenloses Kartenbettschema – Blog von vig table_yuansec – CSDN-Blog
2. Durch das Bildbett gehen (empfohlen)
Empfohlener Grund: einfach zu bedienen und schnell
1. Fügen Sie den Abschnitt „Fotoalbum“ hinzu
1. Erstellen Sie zunächst ein Albumsymbol
Ich werde nicht näher auf diesen Schritt eingehen. Wenn Sie es nicht wissen, können Sie sich selbst ein Tutorial suchen oder auf einen Artikel verweisen, den ich zuvor gepostet habe.
2. Fotoalbumbereich hinzufügen
Geben Sie den Code im Stammverzeichnis des Blogs ein
hexo new page photosUnter dem Quellordner des Blog-Stammverzeichnisses wird ein Fotoordner erstellt. Klicken Sie darauf. Darin befindet sich eine Datei index.md. Öffnen Sie diese Datei, ändern Sie den Titel in Album (den gewünschten Namen) und stellen Sie den Typ auf ein Fotos
Öffnen Sie dann die Datei _config.yml im Verzeichnis \themes\next, suchen Sie das Menü und fügen Sie die Spalte „Fotos“ hinzu
Stellen Sie abschließend das folgende Chinesisch ein, öffnen Sie die Datei zh-CN.yml im Verzeichnis \themes\next\linguals und fügen Sie Chinesisch hinzu
2. Gestalten Sie die Album-Homepage
1. Fügen Sie die Konfigurationsdatei für das Album-Homepage-Design hinzu
Öffnen Sie die Datei main.styl unter \themes\next\source\css und fügen Sie den folgenden Code hinzu
/*相册主页面*/
.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. Fotoalbum hinzufügen
Erstellen Sie einige neue Ordner im Ordner Stammverzeichnis\Quelle\Fotos. Der Code hier ist 3. Sie können drei Ordner erstellen oder den Code erhöhen oder verringern und dann die Datei index.md öffnen, um den Code hinzuzufügen
---
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>Ändern Sie im Code „Albumdateiname 1 im Fotoverzeichnis“ in den von Ihnen erstellten Dateinamen und „Bildbett-URL-Link“ in den Bildbett-URL-Link Ihres Bildes.
3. Unteralben hinzufügen
1. Fügen Sie Unteralbum-Themenstildateien hinzu
Öffnen Sie die Datei main.styl unter \themes\next\source\css und fügen Sie den folgenden Code hinzu
.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. Bilder hinzufügen
Öffnen Sie einfach eine Albumdatei im Fotoverzeichnis und erstellen Sie eine neue index.md-Datei
Code hinzufügen
<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>Ändern Sie einfach den „Bildbett-URL-Link“ in einen Bildlink
4. Klicken Sie auf das Bild, um den Effekt zu vergrößern
Wechseln Sie zunächst in das Verzeichnis next/source/lib und laden Sie das Plug-in herunter
git clone https://github.com/theme-next/theme-next-fancybox3 fancyboxÄndern Sie die Datei next/_config.yml
fancybox: stimmt
Zusammenfassen
allgemeine Designideen
Erstellen Sie einen Albumfunktionsbereich – entwerfen Sie den Anzeigestil der Album-Startseite – fügen Sie Unteralben hinzu – entwerfen Sie den Anzeigestil für Bilder in Unteralben – fügen Sie Bilder zu jedem Unteralbum hinzu
Die allgemeine Idee ist wie folgt, sie ist nicht schwer zu verstehen und alle Prozesse werden durch das Schreiben von Code selbst erstellt. Es ist nicht erforderlich, Plug-Ins und Skripte herunterzuladen. Wenn die endgültigen Anzeigeergebnisse und meine einen Ausweg haben, können Sie dies tun Lesen Sie diesen Artikel, um das eigentliche Prinzip des Webseitenlayouts zu verstehen
Erlernen Sie das Flex-Layout in 30 Minuten – Zhihu (zhihu.com)