- <% if (is_home()) { %> <%- partial('home-content') %> diff --git a/scripts/helpers/helper.js b/scripts/helpers/helper.js index cd5210fad..1530c3a8d 100644 --- a/scripts/helpers/helper.js +++ b/scripts/helpers/helper.js @@ -105,6 +105,10 @@ hexo.extend.helper.register('isLinksPage', function (pagePath) { return pagePath === 'links/index.html' }) +hexo.extend.helper.register('isPhotosPage', function (pagePath) { + return pagePath === 'photos/index.html' +}) + hexo.extend.helper.register('isCategoriesPage', function (pagePath) { return pagePath === 'categories/index.html' }) diff --git a/scripts/use-source-data.js b/scripts/use-source-data.js index 98d22341b..61be6dffd 100644 --- a/scripts/use-source-data.js +++ b/scripts/use-source-data.js @@ -5,22 +5,27 @@ hexo.on('generateBefore', function () { const data = hexo.locals.get('data') if (data) { - // theme config file handle + // theme config file data if (data._config) { hexo.theme.config = data._config } else if (data.keep) { hexo.theme.config = data.keep } - // friends link file handle + // friends link data if (data.links) { hexo.theme.config.links = data.links } - // custom social contact icon handle + // custom social contact icon data if (data.icons) { hexo.theme.config.icons = data.icons } + + // photo album data + if (data.photos) { + hexo.theme.config.photos = data.photos + } } } }) diff --git a/source/css/layout/_partial/page-template.styl b/source/css/layout/_partial/page-template.styl index 33f1adfdf..f95e73344 100644 --- a/source/css/layout/_partial/page-template.styl +++ b/source/css/layout/_partial/page-template.styl @@ -1,6 +1,7 @@ $friend-link-item-height = 5.2rem $friend-link-item-height-tablet = 4.2rem $friend-link-item-border-radius = 0.6rem +$album-img-gap = 0.8rem .page-template-container { keep-container(1, 2rem, 2rem) @@ -23,7 +24,6 @@ $friend-link-item-border-radius = 0.6rem if (hexo-config('menu') && hexo-config('menu.Links')) { - .friends-link-list { display grid grid-gap 1.2rem @@ -200,4 +200,20 @@ $friend-link-item-border-radius = 0.6rem } } } + + + if (hexo-config('menu') && hexo-config('menu.Photos')) { + .photo-album-box { + column-count 3 + column-gap $album-img-gap + + img.photo { + display block + width 100% + margin-bottom $album-img-gap + background var(--background-color-2) + border-radius 0.6rem + } + } + } } diff --git a/source/js/category-page.js b/source/js/page/category-page.js similarity index 100% rename from source/js/category-page.js rename to source/js/page/category-page.js diff --git a/source/js/links-page.js b/source/js/page/links-page.js similarity index 89% rename from source/js/links-page.js rename to source/js/page/links-page.js index 9f3374b57..69750fd90 100644 --- a/source/js/links-page.js +++ b/source/js/page/links-page.js @@ -2,6 +2,11 @@ function linksPageHandle() { const friendsLinkBoxDom = document.querySelector('.friends-link-list') + + if (!friendsLinkBoxDom) { + return + } + const linkTypeDoms = friendsLinkBoxDom.querySelectorAll('.link-type-title') const linkItemDoms = friendsLinkBoxDom.querySelectorAll('.friends-link-item') const linksCount = linkItemDoms.length @@ -18,11 +23,7 @@ function linksPageHandle() { ltd.style.gridColumn = `span ${columns}` let folded = false - - // 创建一个数组来存储所有后续兄弟元素 const siblings = [] - - // 开始循环查找后续兄弟元素 let nextSibling = ltd.nextElementSibling while (nextSibling) { @@ -44,7 +45,7 @@ function linksPageHandle() { }) } -if (KEEP.theme_config.pjax.enable === true && KEEP.utils) { +if (KEEP.theme_config?.pjax?.enable === true && KEEP.utils) { linksPageHandle() } else { window.addEventListener('DOMContentLoaded', linksPageHandle) diff --git a/source/js/page/photos-page.js b/source/js/page/photos-page.js new file mode 100644 index 000000000..809ca891b --- /dev/null +++ b/source/js/page/photos-page.js @@ -0,0 +1,23 @@ +/* global KEEP */ + +function photosPageHandle() { + const layoutImages = () => { + const gallery = document.querySelector('.photo-album-box') + const images = gallery.querySelectorAll('img') + const columns = 3 + gallery.style.columnCount = `${columns}` + const columnHeights = new Array(columns).fill(0) + images.forEach((img) => { + const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights)) + img.style.column = shortestColumn + 1 + columnHeights[shortestColumn] += img.height + }) + } + layoutImages() +} + +if (KEEP.theme_config?.pjax?.enable === true && KEEP.utils) { + photosPageHandle() +} else { + window.addEventListener('DOMContentLoaded', photosPageHandle) +} diff --git a/source/js/utils.js b/source/js/utils.js index 171ee5bce..e15b72ca9 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -191,9 +191,12 @@ KEEP.initUtils = () => { let isZoomIn = false let curWinScrollY = 0 let selectedImgDom = null - const imgDomList = document.querySelectorAll('.keep-markdown-body img') const zoomInImgMask = document.querySelector('.zoom-in-image-mask') const zoomInImg = zoomInImgMask?.querySelector('.zoom-in-image') + const imgDomList = [ + ...document.querySelectorAll('.keep-markdown-body img'), + ...document.querySelectorAll('.photo-album-box img') + ] const zoomOut = () => { if (isZoomIn) { From 19580b35ff39842d62f4365b8a9a5716582d9dea Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 7 Nov 2023 11:35:37 +0800 Subject: [PATCH 16/32] ui: optimize home page style --- layout/_partial/article-meta-info.ejs | 2 +- source/css/layout/home-content.styl | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/layout/_partial/article-meta-info.ejs b/layout/_partial/article-meta-info.ejs index b679690d5..209407c0b 100644 --- a/layout/_partial/article-meta-info.ejs +++ b/layout/_partial/article-meta-info.ejs @@ -78,6 +78,6 @@ const home_tag_limit_number = 5