About adding album pages to Hexo blog (implementing waterfall streaming album, implementing encrypted album)

• First, directly on the renderings, browse the address in detail:

About adding album page to Hexo blog (implementing waterfall stream album)

New Album page

1. In the sitesourceCreate a new one under the foldergalleryPhoto album page.

hexo new page gallery
Copy the code

2. Open the new “gallery” folder, there will be an index.md file, setindex.mdFile contents.

---
title: gallery
date: 2020-10-05 12:00:00
type: "gallery"
layout: "gallery"
---
Copy the code

Create a photo display page for the album

1. In the “gallery” folder (the one you just created), you can create new folders, the albums folder. Such as:

2. Then in the new album folder, create a new file in each folderindex.md, such as:

And set each one separatelyindex.mdContents of the document:

Type: "galleries" layout: "galleries" Password: --Copy the code

Implement encrypted album

In the above index.md file, you can implement encryption function, encryption using SHA256 encryption, so before encryption, you need to convert your password to SHA256 format and enter it into the top create photo page index.md password inside. For SHA256 encryption, please search online for online generation, for example: www.ttmd5.com/hash.php?ty…

Edit the theme navigation bar to add the album button

Add the “Gallery” page under the menu menu under the site theme _config.yml file. This should be the first thing to do and should be added as soon as you create a new page because it’s easy to forget.

Menu: gallery URL: /galleryCopy the code

Create a JSON file for the album

1. Also on the sitesourceCreate a new one under the foldergallery.jsonFile.

Set the file content :(take mine as an example, modify to own when using) here the picture is placed on the graph bed, you can customize the picture link.

[{" name ":" the trip to mount emei ", "cover" : "https://i.loli.net/2020/10/05/kBcvAf7INgMLaem.jpg", "date" : "the 2017-10", "description" : "The trip to mount emei," "url_name" : "the trip to mount emei", "album" : [{" img_url ":" https://i.loli.net/2020/10/05/qtOevHpw5XImS1J.jpg ", "title" : "Trip to emei mountain," "go" : "the trip to mount emei"}, {" img_url ":" https://i.loli.net/2020/10/05/4acvniMKTx8euqp.jpg ", "title" : "Trip to emei mountain," "go" : "the trip to mount emei"}, {" img_url ":" https://i.loli.net/2020/10/05/4acvniMKTx8euqp.jpg ", "title" : "Describe a trip to Mount Emei"}]}]Copy the code

Edit album and picture display page

Create new files gallery. Ejs and galleries. Ejs under the layout folder of the site theme folder

• Ejs: album page
• Galleries. Ejs: Album image display page

Edit the album page gallery. Ejs

Edit gallery. Ejs content: the following is my source code, if the same theme, can be directly copied, other themes can be referenced, according to the need to modify can be used.

<%- partial('_partial/bg-cover') %> <! <style>. Photo {padding: 0 40px! important; display: inline-block; position: relative; transition: all .6s; } .biaotiss { padding: 8px 10px; color: #4c4c4e; text-align: center; font-weight: 400; font-size: 18px; } .img-item { padding: .2rem; background-color: #fff; border-radius: 10px; box-shadow: 1px 2px 2px 0 #aaa; The transition: all 4 s cubic - the bezier (. 63. 15,. 03,1.12); margin-bottom: 20px; } .photo:nth-child(odd) { transform: rotateZ(-5deg); } .photo:nth-child(even) { transform: rotateZ(5deg); } .text_des{ position: absolute; width: 92%; height: 100%; top: 0; color: #000; overflow: hidden; } .text_des h3{ margin: 5px 0 8px 0px; right: 40px; The font - size: 1.5 rem; font-weight: bold; The line - height: 1.7 rem; position: absolute; top: 10%; font-style: italic; Text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /*transform: translateX(200px); */ } .text_des p{ left: 15px; position: absolute; top: 50%; /* transform: translateX(-200px); The transition - delay: 0.2 s; */ } .my-gallery .photo img { border-radius: 10px; height: 240px; } .card .card-content { padding: 24px 24px 24px 24px; } .miaoshus { padding: 20px; border: 1px dashed #e6e6e6; color: #969696; position: relative; display: inline-block; width: 95%; background: #fbfbfb50; border-radius: 10px; font-size: 16px; margin: 12px auto; } body.dark .miaoshus { background: 0 0; border: 1px dashed #888; }. Img-item {transition: all 0.4s ease-out; } .img-item a img{ opacity: 1; The transition: all 0.4 s ease - out; }. Img-item a:hover img{opacity: 0.8; } .biaotiss { font-family: MV Boli; } .miaoshus .title { font-family: MV Boli; } @media only screen and (min-width: 993px) {.text_des h3{transform: translateX(200px); } .text_des p{ transform: translateX(-200px); The transition - delay: 0.2 s; } .animate-text { opacity: 0; The transition: all 0.6 s ease - in-out; }} / / @media only screen and (max-width: 500px) {.my-gallery. Photo img {height: 186px; } } </style> <main class="content"> <div class="container chip-container"> <div class="card"> <div class="card-content"> <div class="tag-title center-align"> <div class="miaoshus"> <div class="title center-align"> "<% -theme. Gallery. Title "There is light and shadow here, and two clouds in clothes, embracing on the bank of tomorrow." </div> </div> <div class="my-gallery"> <div class="row"> <% if (site.data && site.data.gallery) { %> <% var gallery = site.data.gallery; %> <% for (var i = 0, len = gallery.length; i < len; i++) { %> <% var photo = gallery[i]; %> <% if (photo.cover){ %> <div class="photo col s12 m6 l4"> <div class="img-item"> <a href="./<%- photo.url_name %>"> <img src="/medias/loading.svg" data-src="<%- photo.cover %>" class="responsive-img" alt="img"+<%- i %> /> <div Class = "biaotiss" > "< % - photo. The name % >" < br > "< % - photo. The date % >" < / div > < / a > < / div > < / div > < %} % > < %} % > < %} % > < / div > </div> </div> </div> <script> start() $(window).on('scroll', function(){ start(); }) function start(){//.not('[data-isloaded]') $('.container ' img').not('[data-isLoaded]').each(function(){ var $node = $(this) if( isShow($node) ){ loadImg($node); }}); } function isShow($node){return $node.offset(). Top <= $(window).height() + $(window).scrollTop(); } / / the function for the image loadImg ($img) {/ /. Attr (value) / /. Attr (attribute name, value) $img. Attr (' SRC '$img. Attr (' data - the SRC)); SRC $img.attr(' data-isloaded ', 1); // Set data-src to SRC $img.attr(' data-isloaded ', 1); } </script> </main>Copy the code

Edit album image display page galleries. Ejs

Editor galleries. Ejs content: The following is my source code, if the same theme, can be directly copied, other themes can be referenced, according to the need to modify can be used.

<! - encryption - > < % if (theme. PhotoVerifyPassword. Enable) {% > < script SRC = "< % - the theme. The libs. Js. Crypto % >" > < / script > < script > (function() { let pwd = '<%- page.password %>'; if (pwd && pwd.length > 0) { if (pwd ! == CryptoJS.SHA256(prompt('<%- theme.PhotoVerifyPassword.promptMessage %>')).toString(CryptoJS.enc.Hex)) { alert('<%- theme.PhotoVerifyPassword.errorMessage %>'); location.href = '<%- url_for("/") %>'; }}}) (); </script> <% } %> <! -- <%- partial('_partial/bg-cover') %> --> <link rel="stylesheet" href="<%- theme.libs.css.baguetteBoxCss %>"> <! - Lightgallery. js for this theme will get stuck when there are too many pictures, so I abandoned it and used a baguetteBox I found online, which is very lightweight. Function is a little less -- > < script SRC = "< % - the theme. The libs. Js. BaguetteBoxJs % >" > < / script > < style >. My - gallery. Photo img {the transition: All 0.6 s ease - in-out; }.my-gallery. Photo :hover img {opacity: 0.6; The transform: scale (1.05); } .my-gallery { margin: 20px auto; } .miaoshus .title { font-family: MV Boli; } .miaoshus { padding: 20px; border: 1px dashed #e6e6e6; color: #969696; position: relative; display: inline-block; width: 75%; background: #fbfbfb50; border-radius: 10px; font-size: 16px; margin: 24px auto 12px; } body.dark .miaoshus { background: 0 0; border: 1px dashed #888; } body { overflow: visible! important; } .box { position: relative; } .box img { width: 350px; vertical-align: top; padding: 8px; border-radius: 10px; The transition: all 0.5 s; }. Box img:hover {transform: scale(1.05); } .page-footer { display: none } body { overflow-y: visible! important; } header { background-color: #000; } .biaotiss { font-family: MV Boli; } @media only screen and (max-width: 1058px) { .box { margin-left: 145px; } } @media only screen and (max-width: 770px) { .box { margin-left: 15px; } } @media only screen and (max-width: 500px) { #previous-button, #next-button { display: none; } } @media only screen and (max-width: 380px) { .box { margin-left: -5px; } } @media only screen and (max-width: 323px) { .box img { width: 296px; left: 0; </style> <div class="tag-title center-align"> <div class="miaoshus"> <div class="title center-align"> "<% if (is_home() && config.subtitle && config.subtitle.length > 0) { %> <%= config.subtitle %> <% } else { %> <%= page.title %> <%} %> "</div>" <% -theme. Gallery. Title %>" </div> </div> <! <div class=" myGallery" class="my-gallery"> <div class="row"> <div class="box"> <% if (site.data && site.data.gallery) { %> <% var galleries = site.data.gallery; var pageTitle = page.title; function getCurrentGallery(galleries, pageTitle) { for (let i = 0; i < galleries.length; i++) { if (galleries[i]['name'] == pageTitle) { return galleries[i]; } } } var currentGallery = getCurrentGallery(galleries, pageTitle); var photos = currentGallery.album; %> <% for (var i = 0, len = photos.length; i < len; i++) { %> <% var my_album = photos[i]; %> <a href="<%- my_album.img_url %>" data-caption="<%- my_album.title %>"> <img class="mat" src="/medias/loading.svg" data-src="<%- my_album.img_url %>" alt="img"+<%- i %> > </a> <% } %> <% } %> </div> </div> </div> </section> <script> $(function () {let imgWidth = $('.mat').outerWidth(); // 200 waterfallHandler(); Function waterfallHandler() {let column = parseInt($(window).width()/imgWidth); // Height array let heightArr = []; for(let i=0; i<column; i++) { heightArr[i] = 0; $.each($('.mat'), function (index, item) {let itemHeight = $(item).outerheight (); // Let minHeight = math.min (... heightArr); // Let minIndex = heightarr.indexof (minHeight); // Let minIndex = heightarr.indexof (minHeight); $(item).css({ position: 'absolute', top: minHeight + 'px', left: minIndex * imgWidth + 'px' }); heightArr[minIndex] += itemHeight; }); $(window).resize(function () {waterfallHandler(); }); }); </script> <script> baguettebox.run ('. Gallery ', {// configure parameters buttons:Boolean,// whether to display navigation buttons. NoScrollbars :true,// Whether to hide the scroll bar when displaying. TitleTag :true,// Whether to use the title property on the picture as the picture title async:false,// Whether to load the file asynchronously. }); start() $(window).on('scroll', function(){ start(); $('.gallery '). Not ('[data-isloaded]'). Not ('[data-isloaded]'). Each (function(){//. var $node = $(this) if( isShow($node) ){ loadImg($node); }}); } function isShow($node){return $node.offset(). Top <= $(window).height() + $(window).scrollTop(); } / / the function for the image loadImg ($img) {/ /. Attr (value) / /. Attr (attribute name, value) $img. Attr (' SRC '$img. Attr (' data - the SRC)); SRC $img.attr(' data-isloaded ', 1); // Set data-src to SRC $img.attr(' data-isloaded ', 1); } </script>Copy the code

• In order to achieve lazy loading, you need to put themediasPut an image under the folder for lazy loadingloading.svgHere you can directly use my load SVG addressNekodeng. Gitee. IO/medias/load…

Edit the contents of the _config.yml file

Add the following contents to the site theme _config.yml file

Icon2: FA # PhotoVerifyPassword: enable: True promptMessage: The photo album is encrypted. Please enter a password to access errorMessage: The password is incorrect and the user will be returned to the main page!Copy the code

• Finally, finish, quoting my album page Dec to close:
• “Time of Light and Shadow”
• “Here are light and shadow, and two clouds in clothes, embracing on the bank of tomorrow.”