使用memos实现动态相册[2024.3.21更新]

浪子
2024-03-21 / 4 评论 / 搜一下 / 695 阅读 / 正在检测是否收录...
AI摘要:本文介绍了如何使用memos实现动态相册。通过在memos中按照指定格式添加相册图片的链接和标题,然后使用提供的代码,即可在网页中展示相册。代码中使用了Fancybox插件来实现图片的展示效果,并使用了其他辅助插件来实现图片的懒加载和瀑布流布局。

本代码来自@leonus

使用方法

在memos中按照以下格式

#相册 
<!-- 写法就是markdown的写法,中括号里先写时间再写标题,中间使用空格隔开 -->
![2023-01-29 我是标题](图片链接)
<!-- 若不想要时间只写标题即可 -->
![我是标题](图片链接)
<!-- 若不想要标题只写时间即可,只不过后面需要添加空格 -->
![2023-01-29 ](图片链接)
<!-- 也可以只填写图片链接 -->
![](图片链接)

代码

新建HTML

<div class="gallery-photos page">
<img src="https://cdn.jsdelivr.net/gh/jkjoy/14e/img/loading.svg" style="margin:auto">
</div>
<link rel="stylesheet" href="https://cdn.staticfile.org/fancyapps-ui/4.0.27/fancybox.min.css" media="print" onload="this.media='all'">
<script src="https://cdn.staticfile.org/fancyapps-ui/4.0.27/fancybox.umd.min.js"></script>
<style>
/* 页面初始化 */
.page-title{display: none;}
.page-top-card {border-radius: 12px;}
/* 页面初始化结束 */
#article-container a img {margin: 0; border-radius:0;}
.gallery-photos{width:100%;margin-top: 10px;}
.gallery-photo{min-height:5rem;width:24.97%;padding:4px;position: relative;}
.gallery-photo a{display:block;overflow: hidden;border: var(--leonus-border);}
.gallery-photo img{display: block;width:100%;animation: fadeIn 1s;cursor: pointer;transition: all .4s ease-in-out !important;}
.gallery-photo span.photo-title,.gallery-photo span.photo-time{max-width: calc(100% - 7px);position:absolute;line-height:1.8;left:4px;font-size:14px;background: rgba(0, 0, 0, 0.3);padding:0px 8px;color: #fff;animation: fadeIn 1s;}
.gallery-photo span.photo-title{bottom:4px;}
.gallery-photo span.photo-time{top:4px;}
.gallery-photo:hover img{transform: scale(1.1);}
@media screen and (max-width: 1100px) {
    .gallery-photo{width:33.3%;}
}
@media screen and (max-width: 900px) {.page-top-card {margin: 0;}}
@media screen and (max-width: 768px) {
    .gallery-photo{width:49.9%;padding:3px}
    .gallery-photo span.photo-time{display:none}
    .page-top-card {border-radius: 8px;}
    .gallery-photo span.photo-title{left:3px;bottom:3px;}
}
@keyframes fadeIn{0% {opacity: 0;}100%{opacity: 1;}}
</style>
<script>
if (1) {
    let url = 'https://t.memos.ee' // 修改api
    fetch(url + '/api/v1/memo?creatorId=1&tag=照片').then(res => res.json()).then(data => {
        let html = '',
            imgs = []
        data.forEach(item => {
            let ls = item.content.match(/\!\[.*?\]\(.*?\)/g)
            if (ls) imgs = imgs.concat(ls)
            if (item.resourceList.length) {
                item.resourceList.forEach(t => {
                    if (t.externalLink) imgs.push(`![](${t.externalLink})`)
                    else imgs.push(`![](${url}/o/r/${t.id}/${t.publicId}/${t.filename})`)
                })
            }
        })

        if (imgs) imgs.forEach(item => {
            let img = item.replace(/!\[.*?\]\((.*?)\)/g, '$1'),
                time, title, tat = item.replace(/!\[(.*?)\]\(.*?\)/g, '$1')
            if (tat.indexOf(' ') != -1) {
                time = tat.split(' ')[0]
                title = tat.split(' ')[1]
            } else title = tat

            html += `<div class="gallery-photo"><a href="${img}" data-fancybox="gallery" class="fancybox" data-thumb="${img}"><img class="no-lazyload photo-img" loading='lazy' decoding="async" src="${img}"></a>`
            title ? html += `<span class="photo-title">${title}</span>` : ''
            time ? html += `<span class="photo-time">${time}</span>` : ''
            html += `</div>`
        })
console.log(Fancybox);
        document.querySelector('.gallery-photos.page').innerHTML = html
        imgStatus.watch('.photo-img', () => { waterfall('.gallery-photos') })
        window.Lately && Lately.init({ target: '.photo-time' })
    }).catch()
}

</script>
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/waterfall.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/imgStatus.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/lately.min.js"></script>

评论 (4)

取消
  1. 头像
    Memos 使用指南 进阶版 - memos
    Linux · Google Chrome

    [...]https://blog.memos.ee/archives/39.html[...]

    回复
  2. 头像
    王云子
    MacOS · Google Chrome

    请教一下为什么设置后还是单栏没有瀑布效果啊表情

    回复
    1. 头像
      王云子
      MacOS · Google Chrome
      @ 王云子

      好了好了已经好了感谢您的教程表情

      回复
      1. 头像
        浪子 作者
        Windows 10 · Google Chrome
        @ 王云子

        修改了一下load SVG的地址,原域名将要过期了.现在使用jsdelivr加速域名

        回复