[{"data":1,"prerenderedAt":1856},["ShallowReactive",2],{"\u002F2023\u002F03\u002Fessaythree":3,"index_posts":1383,"surround-\u002F2023\u002F03\u002Fessaythree":1853},{"id":4,"title":5,"body":6,"categories":1356,"date":1358,"description":1359,"draft":1360,"extension":1361,"image":1362,"meta":1363,"navigation":1366,"path":1367,"permalink":1362,"published":1362,"readingTime":1368,"recommend":1362,"references":1362,"seo":1373,"sitemap":1374,"stem":1375,"subtitle":1362,"tags":1376,"type":1380,"updated":1381,"__hash__":1382},"content\u002Fposts\u002F2023\u002F03\u002FessayThree.md","即刻短文的三种部署方案",{"type":7,"value":8,"toc":1312},"minimark",[9,13,34,37,41,44,48,203,206,210,214,222,233,236,242,251,257,263,269,275,281,287,293,299,302,310,316,324,330,338,341,347,350,356,364,369,375,378,384,387,393,396,399,404,410,413,421,424,430,433,437,443,449,454,460,463,469,475,478,484,490,493,498,504,507,513,517,520,592,595,598,604,607,692,695,698,704,707,710,716,720,723,731,735,738,744,747,750,752,758,761,767,770,776,779,785,788,794,798,801,904,907,915,918,921,927,930,1075,1079,1082,1088,1092,1095,1101,1105,1108,1114,1118,1121,1127,1133,1137,1140,1146,1152,1155,1160,1163,1169,1172,1230,1233,1237,1240,1246,1249,1252,1258,1261,1267,1271,1274,1280,1284,1287,1293,1299,1303,1306],[10,11,12],"h2",{"id":12},"原文来源",[14,15,16,17,23,24,28,29,33],"p",{},"{% link Butterfly的魔改教程：即刻短文页,亦小封,",[18,19,20],"a",{"href":20,"rel":21},"https:\u002F\u002Fmeuicat.com\u002Fposts\u002F1cdf15f7.html",[22],"nofollow"," %}\n{% link 即刻短文（瀑布流）部署方案,安知鱼,",[18,25,26],{"href":26,"rel":27},"https:\u002F\u002Fblog.anheyu.com\u002Fposts\u002F3753.html",[22]," %}\n{% link Heo即刻短文：分享自我与精彩生活,随风起,",[18,30,31],{"href":31,"rel":32},"https:\u002F\u002Fblog.bywind.xyz\u002Fposts\u002F10b1d3b5.html",[22]," %}",[14,35,36],{},"注意：本章节没有bbtalk，artitalk和ispeak（配置麻烦），因为教程方案有些老需要额外再出教程",[10,38,40],{"id":39},"配置部署方案icat方案","配置部署方案（icat方案）",[14,42,43],{},"{% note info flat %}\n提示：此方案有三种不同类型，可能导致无法正常显示（可以选择去原作者那里查看，本篇只是收集并整理进来）\n{% endnote %}",[45,46,47],"h3",{"id":47},"功能对比",[49,50,51,80],"table",{},[52,53,54],"thead",{},[55,56,57,64,69,75],"tr",{},[58,59,60],"th",{},[61,62,63],"strong",{},"todolist",[58,65,66],{},[61,67,68],{},"本地yml",[58,70,71,72],{},"*",[61,73,74],{},"动态JSON",[58,76,77],{},[61,78,79],{},"动态Memos",[81,82,83,99,112,125,138,151,164,177,190],"tbody",{},[55,84,85,91,94,97],{},[86,87,88],"td",{},[61,89,90],{},"瀑布流",[86,92,93],{},"✔️支持支持",[86,95,96],{},"✔️支持",[86,98,96],{},[55,100,101,106,108,110],{},[86,102,103],{},[61,104,105],{},"图片灯箱",[86,107,93],{},[86,109,96],{},[86,111,96],{},[55,113,114,119,121,123],{},[86,115,116],{},[61,117,118],{},"多图显示",[86,120,93],{},[86,122,96],{},[86,124,96],{},[55,126,127,132,134,136],{},[86,128,129],{},[61,130,131],{},"外部链接",[86,133,93],{},[86,135,96],{},[86,137,96],{},[55,139,140,145,147,149],{},[86,141,142],{},[61,143,144],{},"自定标识",[86,146,96],{},[86,148,96],{},[86,150,96],{},[55,152,153,158,160,162],{},[86,154,155],{},[61,156,157],{},"快速评论",[86,159,96],{},[86,161,96],{},[86,163,96],{},[55,165,166,171,173,175],{},[86,167,168],{},[61,169,170],{},"音乐模块",[86,172,96],{},[86,174,96],{},[86,176,96],{},[55,178,179,184,186,188],{},[86,180,181],{},[61,182,183],{},"视频模块",[86,185,96],{},[86,187,96],{},[86,189,96],{},[55,191,192,197,199,201],{},[86,193,194],{},[61,195,196],{},"说说置顶",[86,198,96],{},[86,200,96],{},[86,202,96],{},[45,204,205],{"id":205},"部署历程",[207,208,209],"h4",{"id":209},"创建数据",[211,212,213],"h5",{"id":213},"创建页面配置",[14,215,216,217,221],{},"创建 ",[218,219,220],"span",{},"blogRoot","\u002Fsource\u002Fessay\u002Findex.md 页面，配置以下内容：",[223,224,230],"pre",{"className":225,"code":227,"language":228,"meta":229},[226],"language-markdown","---\ntitle: 即刻短文\ndate: 2023-01-17 13:38:17\ntype: essay\ntop_img: false\naside: false\ntop_page: true\ntop_bg: https:\u002F\u002Fimg.meuicat.com\u002Fbanner\ntop_item: 即刻短文\ntop_title: 封の碎碎念\ntop_tips: 使用 即刻短文动态部署版 构建\ntop_link: \u002Fabout\u002F\ntop_text: 关于博主\n---\n","markdown","",[231,232,227],"code",{"__ignoreMap":229},[211,234,235],{"id":235},"新建页面内容",[14,237,238,239,241],{},"(1).新建页面选择（在配置文件中进行设置）\n创建 ",[218,240,220],{},"\u002Fthemes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fpage\u002Fessay.pug 页面文件，并新增以下内容:",[223,243,249],{"className":244,"code":246,"language":247,"meta":248},[245],"language-pug","#icat-bber\n section.icat-page\n case theme.essay.mode\n when 'local'\n include .\u002Fessay\u002Flocal.pug\n when 'json'\n include .\u002Fessay\u002Fjson.pug\n when 'memos'\n include .\u002Fessay\u002Fmemos.pug\n","pug","lang=\"pug\"",[231,250,246],{"__ignoreMap":229},[14,252,253,254,256],{},"(2).新建静态本地\n创建 ",[218,255,220],{},"\u002Fthemes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fpage\u002Fessay\u002Flocal.pug 页面文件，并新增以下内容\n（注意该页面中可能存在部分 fontawesome 图标 需要自行替换）",[223,258,261],{"className":259,"code":260,"language":247,"meta":248},[245],"mixin renderArticle(item)\n .icat-bber-item\n .icat-bber-content\n if item.content\n p.datacont=item.content\n if item.image\n .icat-bber-image\n each iten, indey in item.image\n .imgbox\n - let image = item.image[indey].split('||')\n img(src=image[0] alt=image[1] ? image[1] : '' title=image[1] ? '' : '即刻短文配图' )\n if item.video\n .icat-bber-video\n if item.video.bilibili\n - let autoplay = item.video.autoplay ? '&autoplay=1' : '&autoplay=0'\n - let biliurl = '\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?bvid=' + item.video.bilibili.match(\u002F(BV\\w+)\u002F)[1] + autoplay\n iframe(src=biliurl scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\")\n else if item.video.player\n video(src=item.video.player controls=\"controls\" style=\"object-fit: cover;\")\n if item.aplayer\n .icat-bber-music\n meting-js(id=item.aplayer.id server=item.aplayer.server type=\"song\" preload=\"none\" autoplay=\"false\" mutex=\"true\" theme='var(--icat-blue)')\n hr\n .icat-bber-bottom\n .icat-bber-info\n .icat-bber-info-time\n i.iconfont.icat-time-fill\n time.datatime(datetime=item.date)= 'Loading'\n if item.from\n .icat-bber-info-from\n span=item.from\n if item.link\n - let link = item.link.split('||')\n a.icat-bber-content-link(target=\"_blank\" href=link[0] title=link[1] ? link[1] : '跳转到短文指引的链接')\n i.iconfont.icat-jump-link\n | 链接\n if item.top\n .icat-bber-info-top\n i.iconfont.icat-thumbtack\n | 置顶\n if item.content\n .icat-bber-reply(onclick=\"commentText(\" + `'${item.content}'` + \")\")\n i.iconfont.icat-message\n\n#waterfall.list\n if theme.essay.strip === -1\n - var limitedList = site.data.essay.essay_list\n else\n - var limitedList = site.data.essay.essay_list.slice(0, theme.essay.strip)\n\n - var topArticles = site.data.essay.essay_list.filter(item => item.top === true)\n each item in topArticles\n +renderArticle(item)\n\n each item in limitedList.filter(item => !item.top)\n +renderArticle(item)\n\n#icat-bber-tips\n if theme.essay.strip === -1 || Math.abs(theme.essay.strip) >= site.data.essay.essay_list.length\n | - 已展开所有短文 -\n else\n | - 只展示最近 #{theme.essay.strip} 条短文 -\n",[231,262,260],{"__ignoreMap":229},[14,264,265,266,268],{},"(3).新建动态JSON\n新建 ",[218,267,220],{},"\u002Fthemes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fpage\u002Fessay\u002Fjson.pug 页面文件，并新增以下内容\n（注意该页面中可能存在部分 fontawesome 图标 需要自行替换）",[223,270,273],{"className":271,"code":272,"language":247,"meta":248},[245],"#waterfall.list\n .icat-bber-loading\n img(src=\"https:\u002F\u002Fimg.meuicat.com\u002Fblog\u002Floading.svg\")\n script.\n (async function () {\n const response = await fetch('!{url_for(theme.essay.mode_link)}');\n const data = await response.json();\n const strip = !{theme.essay.strip};\n let items = [],\n topitem = [],\n essayTips = '';\n\n const processedData = await Promise.all(data[0].essay_list.map(async (item) => {\n const formatdata = await essayFormat(item);\n if (!formatdata) return null;\n if (item.top) {\n topitem.push(formatdata);\n } else {\n items.push(formatdata);\n }\n return formatdata;\n }));\n\n essayTips = strip === -1 || strip >= items.length ? `\u003Cdiv id=\"icat-bber-tips\">- 已展开所有短文 -\u003C\u002Fdiv>` : (items = items.slice(0, strip), `\u003Cdiv id=\"icat-bber-tips\">- 只展示最近 ${strip} 条短文 -\u003C\u002Fdiv>`);\n\n document.getElementsByClassName('list')[0].innerHTML = topitem.concat(items).filter(item => item !== null).join('');\n document.querySelector(\".icat-page\").insertAdjacentHTML(\"beforeend\", essayTips);\n })();\n async function essayFormat(item) {\n let image = '',\n video = '',\n type = '';\n\n if (item.image) item.image.map(e => image += `\u003Cdiv class=\"imgbox\">\u003Cimg src=\"${e.split(' || ')[0]}\" ${e.split(' || ').length > 1 ? `alt='${e.split(' || ')[1]}'` : `title=\"即刻短文配图\"`} \u002F>\u003C\u002Fdiv>`).join('');\n let aplayer = item.aplayer ? `\u003Cdiv class=\"icat-bber-music\">\u003Cmeting-js server=\"${item.aplayer.server}\" type=\"song\" id=\"${item.aplayer.id}\" mutex=\"true\" preload=\"none\" theme=\"var(--icat-blue)\" data-lrctype=\"0\">\u003C\u002Fmeting-js>\u003C\u002Fdiv>` : '';\n if (item.video) video = item.video.player ? `\u003Cdiv class=\"icat-bber-video\">\u003Cvideo src=\"${item.video.player}\" controls=\"controls\" style=\"object-fit: cover;\">\u003C\u002Fvideo>\u003C\u002Fdiv>` : item.video.bilibili ? `\u003Cdiv class=\"icat-bber-video\">\u003Ciframe src=\"\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?bvid=${item.video.bilibili.match(\u002F(BV\\w+)\u002F)[1]}${item.video.autoplay ? '&autoplay=1' : '&autoplay=0'}\" scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\">\u003C\u002Fiframe>\u003C\u002Fdiv>` : '';\n let link = item.link ? ((type = item.link.split(' || ')), `\u003Ca class=\"icat-bber-content-link\" href='${type[0].startsWith('\u002F') ? type[0] : (type[0].startsWith('http') ? type[0] : 'https:\u002F\u002F' + type[0])}' title=\"${type.length > 1 ? type[1] : '跳转到短文指引的链接' }\" target=\"_blank\">\u003Ci class=\"iconfont icat-jump-link\">\u003C\u002Fi>链接\u003C\u002Fa>`) : '';\n \n return `\n \u003Cdiv class=\"icat-bber-item\">\n \u003Cdiv class=\"icat-bber-content\">\n ${item.content ? `\u003Cp class=\"datacont\">${item.content}\u003C\u002Fp>` : ''}\n ${image ? `\u003Cdiv class=\"icat-bber-image\">${image}\u003C\u002Fdiv>` : ''}\n ${aplayer}\n ${video}\n \u003C\u002Fdiv>\n \u003Chr>\n \u003Cdiv class=\"icat-bber-bottom\">\n \u003Cdiv class=\"icat-bber-info\">\n \u003Cdiv class=\"icat-bber-info-time\">\n \u003Ci class=\"iconfont icat-time-fill\">\u003C\u002Fi>\n \u003Ctime class=\"datatime\" datetime=\"${item.date}\">\u003C\u002Ftime>\n \u003C\u002Fdiv>\n ${link}\n ${item.from ? `\u003Cdiv class=\"icat-bber-info-from\">\u003Cspan>${item.from}\u003C\u002Fspan>\u003C\u002Fdiv>` : ''}\n ${item.top ? `\u003Cdiv class=\"icat-bber-info-top\">\u003Ci class=\"iconfont icat-thumbtack\">\u003C\u002Fi>置顶\u003C\u002Fdiv>` : ''}\n \u003C\u002Fdiv>\n ${item.content ? `\u003Cdiv class=\"icat-bber-reply\" onclick=\"commentText('${item.content}')\">\u003Ci class=\"iconfont icat-message\">\u003C\u002Fi>\u003C\u002Fdiv>` : ''}\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>`;\n }\n",[231,274,272],{"__ignoreMap":229},[14,276,277,278,280],{},"(4).新建MEMOS页面\n创建 ",[218,279,220],{},"\u002Fthemes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fpage\u002Fessay\u002Fmemos.pug 页面文件，并新增以下内容\n（注意该页面中可能存在部分 fontawesome 图标 需要自行替换）",[223,282,285],{"className":283,"code":284,"language":247,"meta":248},[245],"#waterfall.list\n .icat-bber-loading\n img(src=\"https:\u002F\u002Fimg.meuicat.com\u002Fblog\u002Floading.svg\")\n script.\n (async function () {\n let url = '!{url_for(theme.essay.mode_link)}';\n const baseUrl = url.substring(0, url.indexOf(\"\u002F\", url.indexOf(\"\u002F\u002F\") + 2));\n const response = await fetch(url);\n const data = await response.json();\n const strip = !{theme.essay.strip};\n let items = [],\n topitem = [],\n essayTips = '';\n\n const processedData = await Promise.all(data.map(async (item) => {\n const formatdata = await essayFormat(item,baseUrl);\n if (!formatdata) return null;\n if (item.content.includes('#top')) {\n topitem.push(formatdata);\n } else {\n items.push(formatdata);\n }\n return formatdata;\n }));\n\n essayTips = strip === -1 || strip >= items.length ? `\u003Cdiv id=\"icat-bber-tips\">- 已展开所有短文 -\u003C\u002Fdiv>` : (items = items.slice(0, strip), `\u003Cdiv id=\"icat-bber-tips\">- 只展示最近 ${strip} 条短文 -\u003C\u002Fdiv>`);\n\n document.getElementsByClassName('list')[0].innerHTML = topitem.concat(items).filter(item => item !== null).join('');\n document.querySelector(\".icat-page\").insertAdjacentHTML(\"beforeend\", essayTips);\n })();\n async function essayFormat(item,baseUrl) {\n const contentRegex = \u002F#(.*?)\\s|\\n\u002Fg,\n imageRegex = \u002F\\!\\[(.*?)\\]\\((.*?)\\)\u002Fg,\n playerRegex = \u002F{\\s*player\\s*(.*)\\s*}\u002Fg,\n linkRegex = \u002F(?\u003C!\\!)\\[(.*?)\\]\\((.*?)\\)\u002Fg,\n topRegex = \u002F#top\u002Fg,\n fromRegex = \u002F(?\u003C![\\w\\\u002F])(?\u003C!\\{)\\{([^{}\\s]+)\\}(?!\\})(?![\\w\\\u002F])\u002Fg;\n let time = new Date((item.createdTs - (new Date().getTimezoneOffset() * 60)) * 1000).toISOString(),\n content = item.content,\n image = '',\n img = content.match(imageRegex);\n aplayer = content.match(\u002F{\\s*music\\s*(.*?)\\s*(.*?)\\s*}\u002Fg),\n video = content.match(playerRegex),\n link = content.match(linkRegex),\n type = '',\n from = content.match(fromRegex);\n \n if (item.resourceList.length) {\n if (!img) img = []; \n item.resourceList.forEach(e => {\n if (e.externalLink) img.push(e.externalLink);\n else img.push(`${baseUrl}\u002Fo\u002Fr\u002F${e.uid}`);\n });\n }\n if (img) image += img.map(e => `\u003Cdiv class=\"imgbox\">\u003Cimg src=\"${e.replace(imageRegex, '$2')}\" ${e.replace(imageRegex, '$1') ? `alt=\"${e.replace(imageRegex, '$1')}\"` : `title=\"即刻短文配图\"`} \u002F>\u003C\u002Fdiv>`).join('');\n aplayer = aplayer ? `\u003Cdiv class=\"icat-bber-music\">\u003Cmeting-js server=\"${aplayer[0].match(\u002F\\{\\s*music\\s*(.*?)\\s*\\d+\\s*\\}\u002F)[1]}\" type=\"song\" id=\"${aplayer[0].match(\u002F\\d+\u002F)[0]}\" mutex=\"true\" preload=\"none\" theme=\"var(--icat-blue)\" data-lrctype=\"0\">\u003C\u002Fmeting-js>\u003C\u002Fdiv>` : '';\n video = video ? `\u003Cdiv class=\"icat-bber-video\">\u003Cvideo src=\"${video[0].replace(playerRegex, '$1').trim()}\" controls=\"controls\" style=\"object-fit: cover;\">\u003C\u002Fvideo>\u003C\u002Fdiv>` : content.match(\u002F{\\s*bilibili\\s*(.*?)\\s*}\u002Fg);\n video = Array.isArray(video) ? `\u003Cdiv class=\"icat-bber-video\">\u003Ciframe src=\"\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?bvid=${video[0].match(\u002F(BV\\w+)\u002F)[1]}${video[0].match(\u002F{\\s*bilibili\\s*(.*?)\\s*true\\s*}\u002Fg) ? '&autoplay=1' : '&autoplay=0'}\" scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\">\u003C\u002Fiframe>\u003C\u002Fdiv>` : '';\n link = link ? ((type = link[0].replace(linkRegex, '$2')), `\u003Ca class=\"icat-bber-content-link\" href='${type.startsWith('\u002F') ? type : (type.startsWith('http') ? type : 'https:\u002F\u002F' + type)}' title=\"${link[0].replace(linkRegex, '$1') ? link[0].replace(linkRegex, '$1') : '跳转到短文指引的链接' }\" target=\"_blank\">\u003Ci class=\"iconfont icat-jump-link\">\u003C\u002Fi>链接\u003C\u002Fa>`) : '';\n from = from ? `\u003Cdiv class=\"icat-bber-info-from\">\u003Cspan>${from[0].replace(fromRegex, '$1')}\u003C\u002Fspan>\u003C\u002Fdiv>` : '';\n content = content.replace(contentRegex, '').replace(imageRegex, '').replace(\u002F\\{(.*?)\\}\u002Fg, '').replace(linkRegex, '').trim();\n\n return `\n \u003Cdiv class=\"icat-bber-item\">\n \u003Cdiv class=\"icat-bber-content\">\n ${content ? `\u003Cp class=\"datacont\">${content}\u003C\u002Fp>` : ''}\n ${image ? `\u003Cdiv class=\"icat-bber-image\">${image}\u003C\u002Fdiv>` : ''}\n ${aplayer}\n ${video}\n \u003C\u002Fdiv>\n \u003Chr>\n \u003Cdiv class=\"icat-bber-bottom\">\n \u003Cdiv class=\"icat-bber-info\">\n \u003Cdiv class=\"icat-bber-info-time\">\n \u003Ci class=\"iconfont icat-time-fill\">\u003C\u002Fi>\n \u003Ctime class=\"datatime\" datetime=\"${time}\">\u003C\u002Ftime>\n \u003C\u002Fdiv>\n ${link}\n ${from}\n ${item.content.includes('#top') ? `\u003Cdiv class=\"icat-bber-info-top\">\u003Ci class=\"iconfont icat-thumbtack\">\u003C\u002Fi>置顶\u003C\u002Fdiv>` : ''}\n \u003C\u002Fdiv>\n ${content ? `\u003Cdiv class=\"icat-bber-reply\" onclick=\"commentText('${content}')\">\u003Ci class=\"iconfont icat-message\">\u003C\u002Fi>\u003C\u002Fdiv>` : ''}\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>`;\n }\n",[231,286,284],{"__ignoreMap":229},[14,288,289,290,292],{},"(5).修改页面文件（页面匹配markdown的type）\n修改 ",[218,291,220],{},"\u002Fthemes\u002Fbutterfly\u002Flayout\u002Fpage.pug 来使页面匹配\n（ + 号直接删除 即是正常缩进）",[223,294,297],{"className":295,"code":296,"language":247,"meta":248},[245]," when 'categories'\n include includes\u002Fpage\u002Fcategories.pug\n+ when 'essay'\n+ include includes\u002Fpage\u002Fessay.pug\n default\n include includes\u002Fpage\u002Fdefault-page.pug\n",[231,298,296],{"__ignoreMap":229},[14,300,301],{},"(6).开启PJAX设置（可选）\n【可选】在 _config.butterfly.yml 主题配置文件中开启站点的 pjax",[223,303,308],{"className":304,"code":306,"language":307,"meta":229},[305],"language-YML","# Pjax\n# https:\u002F\u002Fgithub.com\u002FMoOx\u002Fpjax\n# 当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址；这样可以不用重复加载相同的资源（css\u002Fjs）， 从而提升网页的加载速度\n# 使用pjax后，一些自己DIY的js可能会无效，跳转页面时需要重新调用；使用pjax后，一些个别页面加载的js\u002Fcss，将会改为所有页面都加载\n# --------------------------------------\npjax:\n enable: true\n exclude:\n # - xxxx\n # - xxxx\n","YML",[231,309,306],{"__ignoreMap":229},[14,311,312,313,315],{},"(7).设置样式（styl或者css）\n新建 ",[218,314,220],{},"\u002Fthemes\u002Fbutterfly\u002Fsource\u002Fcss\u002F_page\u002Fessay.styl 样式文件，并新增以下内容:",[223,317,322],{"className":318,"code":320,"language":321,"meta":229},[319],"language-STYL","#icat-bber\n margin-top: 1.5rem\n width: 100%\n\n .icat-page\n #waterfall\n opacity: 0\n transition: .3s\n\n &.list\n display: flex\n flex-flow: row wrap\n justify-content: space-between\n\n &.show\n opacity: 1\n\n .icat-bber-item\n position: relative\n width: 32%\n border: var(--style-border)\n border-radius: 12px\n padding: 1rem 1rem 0.9rem\n transition: all 0.3s ease 0s\n display: flex\n flex-flow: column nowrap\n justify-content: space-between\n align-items: flex-start\n background: var(--icat-card-bg)\n box-shadow: var(--icat-shadow-border)\n margin-right: 2%\n margin-bottom: 1rem\n animation: slide-in .6s .4s backwards\n\n +maxWidth1024()\n width: 49%\n margin-right: 1%\n\n +maxWidth768()\n width: 100%\n margin-right: 0px\n \n &:hover\n border-color: var(--icat-blue)\n\n .icat-bber-content\n display: flex\n flex-flow: wrap\n border-radius: 12px\n width: 100%\n height: 100%\n\n p\n margin: 0px\n\n .datacont\n order: 0\n font-size: 0.8rem\n font-weight: 700\n color: var(--icat-fontcolor)\n width: 100%\n line-height: 1.38\n border-radius: 12px\n margin-bottom: 0.8rem\n display: flex\n flex-direction: column\n text-align: justify\n padding: 0px 8px\n\n .icat-bber-image\n display: flex\n gap: 8px\n width: 100%\n flex-wrap: wrap\n margin-bottom: 10px\n padding-left: 8px\n\n .imgbox\n width: calc(100% \u002F 4 - 8px)\n aspect-ratio: 1 \u002F 1\n overflow: hidden\n border-radius: 6px\n\n a\n height: 100px\n display: flex\n position: relative\n\n img\n object-fit: cover\n width: 100%\n max-height: 100%\n border-radius: 6px\n animation: slide-in .6s .4s backwards\n\n .icat-bber-video\n position: relative\n padding: 30% 50%\n margin-bottom: 10px\n\n video,\n iframe\n position: absolute\n width: 100%\n height: 100%\n left: 0\n top: 0\n margin: 0\n border-radius: 6px\n border: var(--style-border)\n\n .icat-bber-music\n width: 100%\n height: 90px\n margin: 0 0 0.5rem\n border-radius: 8px\n overflow: hidden\n border: var(--style-border)\n background: var(--icat-secondbg)\n\n hr\n display: flex\n position: relative\n margin: 8px 0px\n border: 1px dashed var(--icat-blue)\n width: 100%\n opacity: 0.4\n\n .icat-bber-bottom\n display: flex\n justify-content: space-between\n width: 100%\n margin-top: 10px\n user-select: none\n\n .icat-bber-info\n display: flex\n\n .icat-bber-info-time\n color: var(--icat-fontcolor)\n font-size: 0.7rem\n background-color: var(--icat-gray-op)\n padding: 8px\n border-radius: 20px\n cursor: default\n display: flex\n align-items: center\n padding-right: 12px\n line-height: 1\n\n i\n padding-right: 4px\n\n .icat-bber-info-from\n @extend .icat-bber-info-time\n margin-left: 0.5rem\n\n span\n margin-left: 0.35rem\n\n .icat-bber-content-link\n display: flex\n margin-left: 0.5rem\n font-size: 0.7rem\n align-items: center\n background-color: rgba(103, 194, 58, 0.13)\n color: rgb(103, 194, 58)\n padding: 0px 8px\n border-radius: 20px\n padding-right: 10px\n line-height: 1\n\n i\n margin-right: 4px\n\n &:hover\n background-color: var(--icat-blue)\n color: var(--icat-white)\n\n .icat-bber-info-top\n background-color: rgba(245, 108, 108, 0.13)\n color: rgb(245, 108, 108)\n display: flex\n margin-left: 0.5rem\n font-size: 0.7rem\n align-items: center\n padding: 0px 8px\n border-radius: 20px\n padding-right: 10px\n line-height: 1\n\n i\n margin-right: 4px\n font-size: 14px\n transform: rotateZ(35deg)\n\n .icat-bber-reply\n cursor: pointer\n transition: .6s\n\n &:hover\n color: var(--icat-blue)\n\n #icat-bber-tips\n font-size: 14px\n display: flex\n justify-content: center\n margin-bottom: 2rem\n color: var(--icat-secondtext)\n \n .icat-bber-loading\n position: revert !important\n margin: 0 auto\n\n .aplayer\n margin: 0\n\n &.aplayer-withlrc\n .aplayer-pic\n height: 82px\n width: 82px\n margin: 3px\n border-radius: 4px\n\n .aplayer-info\n margin-left: 84px\n padding: 5px 7px 0\n\n .aplayer-music\n height: 23px\n text-align: center\n\n .aplayer-title\n font-size: 0.8rem\n font-weight: 700\n margin: 0\n color: var(--icat-fontcolor)\n\n .aplayer-controller\n align-items: center\n\n .aplayer-bar-wrap\n padding: 0\n\n .aplayer-bar\n background: var(--icat-gray)\n height: 8px\n border-radius: 12px\n transition: 0.3s\n overflow: hidden\n\n .aplayer-loaded\n height: 100%\n border-radius: 12px\n\n .aplayer-played\n height: 100%\n border-radius: 12px\n\n .aplayer-thumb\n display: none\n\n .aplayer-time\n position: initial\n\n .aplayer-lrc\n height: 36px\n margin: -12px 0 3px\n\n &::after\n height: 20%\n &::before\n height: 4%\n\n p\n color: var(--icat-fontcolor)\n\n[data-theme='dark']\n #icat-bber\n .icat-page\n #waterfall\n .icat-bber-item\n hr\n opacity: 0.2\n \n .icat-bber-music .aplayer,\n .aplayer .aplayer-lrc:before,\n .aplayer .aplayer-lrc:after\n background: var(--icat-card-bg)\n color: var(--icat-fontcolor)\n","STYL",[231,323,320],{"__ignoreMap":229},[14,325,326,327,329],{},"{% folding cyan, 可选CSS样式 %}\n新建 ",[218,328,220],{},"\u002Fsource\u002Fcss\u002Fessay.css 样式文件，并新增以下内容\n（也可以在自建的css文件里新增内容）",[223,331,336],{"className":332,"code":334,"language":335,"meta":229},[333],"language-CSS","#icat-bber {\n margin-top: 1.5rem;\n width: 100%;\n}\n#icat-bber .icat-page #waterfall {\n opacity: 0;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n filter: alpha(opacity=0);\n -webkit-transition: 0.3s;\n -moz-transition: 0.3s;\n -o-transition: 0.3s;\n -ms-transition: 0.3s;\n transition: 0.3s;\n}\n#icat-bber .icat-page #waterfall.list {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-orient: horizontal;\n -moz-box-orient: horizontal;\n -o-box-orient: horizontal;\n -webkit-box-lines: multiple;\n -moz-box-lines: multiple;\n -o-box-lines: multiple;\n -webkit-flex-flow: row wrap;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-pack: justify;\n -moz-box-pack: justify;\n -o-box-pack: justify;\n -ms-flex-pack: justify;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n}\n#icat-bber .icat-page #waterfall.show {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item {\n position: relative;\n width: 32%;\n border: var(--style-border);\n border-radius: 12px;\n padding: 1rem 1rem 0.9rem;\n -webkit-transition: all 0.3s ease 0s;\n -moz-transition: all 0.3s ease 0s;\n -o-transition: all 0.3s ease 0s;\n -ms-transition: all 0.3s ease 0s;\n transition: all 0.3s ease 0s;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-orient: vertical;\n -moz-box-orient: vertical;\n -o-box-orient: vertical;\n -webkit-box-lines: single;\n -moz-box-lines: single;\n -o-box-lines: single;\n -webkit-flex-flow: column nowrap;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n -webkit-box-pack: justify;\n -moz-box-pack: justify;\n -o-box-pack: justify;\n -ms-flex-pack: justify;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n -webkit-box-align: start;\n -moz-box-align: start;\n -o-box-align: start;\n -ms-flex-align: start;\n -webkit-align-items: flex-start;\n align-items: flex-start;\n background: var(--icat-card-bg);\n -webkit-box-shadow: var(--icat-shadow-border);\n box-shadow: var(--icat-shadow-border);\n margin-right: 2%;\n margin-bottom: 1rem;\n -webkit-animation: slide-in 0.6s 0.4s backwards;\n -moz-animation: slide-in 0.6s 0.4s backwards;\n -o-animation: slide-in 0.6s 0.4s backwards;\n -ms-animation: slide-in 0.6s 0.4s backwards;\n animation: slide-in 0.6s 0.4s backwards;\n}\n@media screen and (max-width: 1024px) {\n #icat-bber .icat-page #waterfall .icat-bber-item {\n width: 49%;\n margin-right: 1%;\n }\n}\n@media screen and (max-width: 768px) {\n #icat-bber .icat-page #waterfall .icat-bber-item {\n width: 100%;\n margin-right: 0px;\n }\n}\n#icat-bber .icat-page #waterfall .icat-bber-item:hover {\n border-color: var(--icat-blue);\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-lines: multiple;\n -moz-box-lines: multiple;\n -o-box-lines: multiple;\n -webkit-flex-flow: wrap;\n -ms-flex-flow: wrap;\n flex-flow: wrap;\n border-radius: 12px;\n width: 100%;\n height: 100%;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content p {\n margin: 0px;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .datacont {\n -webkit-box-ordinal-group: 0;\n -moz-box-ordinal-group: 0;\n -o-box-ordinal-group: 0;\n -ms-flex-order: 0;\n -webkit-order: 0;\n order: 0;\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--icat-fontcolor);\n width: 100%;\n line-height: 1.38;\n border-radius: 12px;\n margin-bottom: 0.8rem;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-orient: vertical;\n -moz-box-orient: vertical;\n -o-box-orient: vertical;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n text-align: justify;\n padding: 0px 8px;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n gap: 8px;\n width: 100%;\n -webkit-box-lines: multiple;\n -moz-box-lines: multiple;\n -o-box-lines: multiple;\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-bottom: 10px;\n padding-left: 8px;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image .imgbox {\n width: calc(100% \u002F 4 - 8px);\n aspect-ratio: 1\u002F1;\n overflow: hidden;\n border-radius: 6px;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image .imgbox a {\n height: 100px;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n position: relative;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image .imgbox a img {\n object-fit: cover;\n width: 100%;\n max-height: 100%;\n border-radius: 6px;\n -webkit-animation: slide-in 0.6s 0.4s backwards;\n -moz-animation: slide-in 0.6s 0.4s backwards;\n -o-animation: slide-in 0.6s 0.4s backwards;\n -ms-animation: slide-in 0.6s 0.4s backwards;\n animation: slide-in 0.6s 0.4s backwards;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-video {\n position: relative;\n padding: 30% 50%;\n margin-bottom: 10px;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-video video,\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-video iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n margin: 0;\n border-radius: 6px;\n border: var(--style-border);\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-music {\n width: 100%;\n height: 90px;\n margin: 0 0 0.5rem;\n border-radius: 8px;\n overflow: hidden;\n border: var(--style-border);\n background: var(--icat-secondbg);\n}\n#icat-bber .icat-page #waterfall .icat-bber-item hr {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n position: relative;\n margin: 8px 0px;\n border: 1px dashed var(--icat-blue);\n width: 100%;\n opacity: 0.4;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)\";\n filter: alpha(opacity=40);\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-pack: justify;\n -moz-box-pack: justify;\n -o-box-pack: justify;\n -ms-flex-pack: justify;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n width: 100%;\n margin-top: 10px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-time,\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from {\n color: var(--icat-fontcolor);\n font-size: 0.7rem;\n background-color: var(--icat-gray-op);\n padding: 8px;\n border-radius: 20px;\n cursor: default;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-align: center;\n -moz-box-align: center;\n -o-box-align: center;\n -ms-flex-align: center;\n -webkit-align-items: center;\n align-items: center;\n padding-right: 12px;\n line-height: 1;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-time i,\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from i {\n padding-right: 4px;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from {\n margin-left: 0.5rem;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from span {\n margin-left: 0.35rem;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-content-link {\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n margin-left: 0.5rem;\n font-size: 0.7rem;\n -webkit-box-align: center;\n -moz-box-align: center;\n -o-box-align: center;\n -ms-flex-align: center;\n -webkit-align-items: center;\n align-items: center;\n background-color: rgba(103,194,58,0.13);\n color: #67c23a;\n padding: 0px 8px;\n border-radius: 20px;\n padding-right: 10px;\n line-height: 1;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-content-link i {\n margin-right: 4px;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-content-link:hover {\n background-color: var(--icat-blue);\n color: var(--icat-white);\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-top {\n background-color: rgba(245,108,108,0.13);\n color: #f56c6c;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n margin-left: 0.5rem;\n font-size: 0.7rem;\n -webkit-box-align: center;\n -moz-box-align: center;\n -o-box-align: center;\n -ms-flex-align: center;\n -webkit-align-items: center;\n align-items: center;\n padding: 0px 8px;\n border-radius: 20px;\n padding-right: 10px;\n line-height: 1;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-top i {\n margin-right: 4px;\n font-size: 14px;\n -webkit-transform: rotateZ(35deg);\n -moz-transform: rotateZ(35deg);\n -o-transform: rotateZ(35deg);\n -ms-transform: rotateZ(35deg);\n transform: rotateZ(35deg);\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-reply {\n cursor: pointer;\n -webkit-transition: 0.6s;\n -moz-transition: 0.6s;\n -o-transition: 0.6s;\n -ms-transition: 0.6s;\n transition: 0.6s;\n}\n#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-reply:hover {\n color: var(--icat-blue);\n}\n#icat-bber .icat-page #icat-bber-tips {\n font-size: 14px;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-pack: center;\n -moz-box-pack: center;\n -o-box-pack: center;\n -ms-flex-pack: center;\n -webkit-justify-content: center;\n justify-content: center;\n margin-bottom: 2rem;\n color: var(--icat-secondtext);\n}\n#icat-bber .icat-bber-loading {\n position: revert !important;\n margin: 0 auto;\n}\n#icat-bber .aplayer {\n margin: 0;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-pic {\n height: 82px;\n width: 82px;\n margin: 3px;\n border-radius: 4px;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info {\n margin-left: 84px;\n padding: 5px 7px 0;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-music {\n height: 23px;\n text-align: center;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-music .aplayer-title {\n font-size: 0.8rem;\n font-weight: 700;\n margin: 0;\n color: var(--icat-fontcolor);\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller {\n -webkit-box-align: center;\n -moz-box-align: center;\n -o-box-align: center;\n -ms-flex-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap {\n padding: 0;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {\n background: var(--icat-gray);\n height: 8px;\n border-radius: 12px;\n -webkit-transition: 0.3s;\n -moz-transition: 0.3s;\n -o-transition: 0.3s;\n -ms-transition: 0.3s;\n transition: 0.3s;\n overflow: hidden;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {\n height: 100%;\n border-radius: 12px;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {\n height: 100%;\n border-radius: 12px;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {\n display: none;\n}\n#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-time {\n position: initial;\n}\n#icat-bber .aplayer .aplayer-lrc {\n height: 36px;\n margin: -12px 0 3px;\n}\n#icat-bber .aplayer .aplayer-lrc::after {\n height: 20%;\n}\n#icat-bber .aplayer .aplayer-lrc::before {\n height: 4%;\n}\n#icat-bber .aplayer .aplayer-lrc p {\n color: var(--icat-fontcolor);\n}\n[data-theme='dark'] #icat-bber .icat-page #waterfall .icat-bber-item hr {\n opacity: 0.2;\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";\n filter: alpha(opacity=20);\n}\n[data-theme='dark'] #icat-bber .icat-page .icat-bber-music .aplayer,\n[data-theme='dark'] #icat-bber .icat-page .aplayer .aplayer-lrc:before,\n[data-theme='dark'] #icat-bber .icat-page .aplayer .aplayer-lrc:after {\n background: var(--icat-card-bg);\n color: var(--icat-fontcolor);\n}\n\n\u002F* 即刻短文样式 *\u002F\n","CSS",[231,337,334],{"__ignoreMap":229},[14,339,340],{},"(8).添加css样式到配置文件\n在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 essay.css 样式文件:",[223,342,345],{"className":343,"code":344,"language":307,"meta":229},[305]," ···\n\ninject:\n head:\n - \u003Clink rel=\"stylesheet\" href=\"\u002Fcss\u002Fessay.css\"> # 即刻短文样式\n bottom:\n - ···\n\n ···\n",[231,346,344],{"__ignoreMap":229},[14,348,349],{},"{% endfolding %}",[14,351,352,353,355],{},"(9).新建js文件\n创建 ",[218,354,220],{},"\u002Fsource\u002Fjs\u002Fessay.js 文件，并新增以下内容，用来处理即刻短文的逻辑\n（或写在自建的公共 js 中也可以）",[223,357,362],{"className":358,"code":360,"language":361,"meta":229},[359],"language-JS","function whenDOMReady() {\n if (location.pathname == '\u002Fessay\u002F') document.addEventListener('DOMContentLoaded', function () {setTimeout(() => { changeTime(), btf.loadLightbox(document.querySelectorAll('#icat-bber img')), window.lazyLoadInstance && window.lazyLoadInstance.update(), reflashWaterFall();}, 300)})\n}\nwhenDOMReady()\ndocument.addEventListener(\"pjax:complete\", whenDOMReady)\n\n\u002F\u002F 适配pjax\n\nwindow.onresize = () => {\n waterfall('#waterfall');\n};\n\n\u002F\u002F 自适应\n\nfunction timeDiff(timeObj, today) => {\n const timeObjUTC = Date.UTC(timeObj.getFullYear(), timeObj.getMonth(), timeObj.getDate());\n const todayUTC = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());\n\n const timeDiff = todayUTC - timeObjUTC;\n return Math.floor(timeDiff \u002F (1000 * 3600 * 24));\n}\nfunction changeTime() {\n const timeElements = Array.from(document.getElementsByTagName(\"time\"));\n const currentDate = new Date();\n\n timeElements.forEach(timeElement => {\n const datetime = timeElement.getAttribute(\"datetime\");\n const timeObj = new Date(datetime);\n const daysDiff = timeDiff(timeObj, currentDate);\n\n let timeString;\n if (daysDiff === 0) {\n timeString = `最近`;\n } else if (daysDiff === 1) {\n timeString = `昨天`;\n } else if (daysDiff === 2) {\n timeString = `前天`;\n } else if (daysDiff \u003C= 7) {\n timeString = `${daysDiff}天前`;\n } else {\n if (timeObj.getFullYear() !== currentDate.getFullYear()) {\n timeString = `${timeObj.getFullYear()}\u002F${timeObj.getMonth() + 1}\u002F${timeObj.getDate()}`;\n } else {\n timeString = `${timeObj.getMonth() + 1}\u002F${timeObj.getDate()}`;\n }\n }\n timeElement.textContent = timeString;\n });\n}\nfunction reflashWaterFall() {\n document.querySelector(\"#waterfall\") &&\n setTimeout(function() {\n waterfall(\"#waterfall\");\n document.getElementById(\"waterfall\")\n .classList.add(\"show\");\n }, 500);\n} \u002F\u002F 加载显示 - 即刻短文\nfunction commentText(txt) {\n const inputs = [\"#wl-edit\", \".el-textarea__inner\"];\n for (let i = 0; i \u003C inputs.length; i++) {\n let el = document.querySelector(inputs[i]);\n if (el != null) {\n el.dispatchEvent(new Event('input', { bubble: true, cancelable: true }));\n el.value = '> ' + txt.replace(\u002F\\n\u002Fg, '\\n> ') + '\\n\\n';\n el.focus();\n el.setSelectionRange(-1, -1);\n }\n }\n} \u002F\u002F 引用评论跳转 - 即刻短文\n","JS",[231,363,360],{"__ignoreMap":229},[14,365,216,366,368],{},[218,367,220],{},"\u002Fsource\u002Fjs\u002Fwaterfall.js 文件，并新增以下内容，用于处理瀑布流\n（或写在公共 js 中也可以）",[223,370,373],{"className":371,"code":372,"language":361,"meta":229},[359],"function waterfall(a) {\n function b(a, b) {\n var c = window.getComputedStyle(b);\n return parseFloat(c[\"margin\" + a]) || 0;\n }\n function c(a) {\n return a + \"px\";\n }\n function d(a) {\n return parseFloat(a.style.top);\n }\n function e(a) {\n return parseFloat(a.style.left);\n }\n function f(a) {\n return a.clientWidth;\n }\n function g(a) {\n return a.clientHeight;\n }\n function h(a) {\n return d(a) + g(a) + b(\"Bottom\", a);\n }\n function i(a) {\n return e(a) + f(a) + b(\"Right\", a);\n }\n function j(a) {\n a = a.sort(function (a, b) {\n return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);\n });\n }\n function k(b) {\n f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));\n }\n \"string\" == typeof a && (a = document.querySelector(a));\n var l = [].map.call(a.children, function (a) {\n return (a.style.position = \"absolute\"), a;\n });\n a.style.position = \"relative\";\n var m = [];\n l.length && ((l[0].style.top = \"0px\"), (l[0].style.left = c(b(\"Left\", l[0]))), m.push(l[0]));\n for (var n = 1; n \u003C l.length; n++) {\n var o = l[n - 1],\n p = l[n],\n q = i(o) + f(p) \u003C= f(a);\n if (!q) break;\n (p.style.top = o.style.top), (p.style.left = c(i(o) + b(\"Left\", p))), m.push(p);\n }\n for (; n \u003C l.length; n++) {\n j(m);\n var p = l[n],\n r = m.pop();\n (p.style.top = c(h(r) + b(\"Top\", p))), (p.style.left = c(e(r))), m.push(p);\n }\n j(m);\n var s = m[0];\n a.style.height = c(h(s) + b(\"Bottom\", s));\n var t = f(a);\n window.addEventListener ? window.addEventListener(\"resize\", k) : (document.body.onresize = k);\n}\n",[231,374,372],{"__ignoreMap":229},[14,376,377],{},"(10).引入js文件\n在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 essay.js 和 waterfall.js",[223,379,382],{"className":380,"code":381,"language":307,"meta":229},[305]," ···\n\ninject:\n head:\n - ···\n bottom:\n - \u003Cscript async src=\"\u002Fjs\u002Fwaterfall.js\">\u003C\u002Fscript> # 瀑布流JS\n - \u003Cscript defer src=\"\u002Fjs\u002Fessay.js\">\u003C\u002Fscript> # 即刻逻辑文件\n\n ···\n",[231,383,381],{"__ignoreMap":229},[14,385,386],{},"(11).添加以下配置\n在 _config.butterfly.yml 主题配置文件中，新增以下配置项",[223,388,391],{"className":389,"code":390,"language":307,"meta":229},[305],"# essay 即刻短文\n# MeuiCat设计\n# https:\u002F\u002Fmeuicat.com\u002Fblog\u002F67\u002F\n# --------------------------------------\n\nessay:\n enable: true\n # 即刻短文仅展示前n条\n # Jike short text only shows the first n\n strip: 50\n mode: memos # local：本地静态 \u002F json：动态json \u002F memos：动态Memos\n mode_link: https:\u002F\u002Fmemos.meuicat.com\u002Fapi\u002Fv1\u002Fmemo?creatorId=1&tag=说说 #动态模式地址\n",[231,392,390],{"__ignoreMap":229},[207,394,395],{"id":395},"创建数据内容",[14,397,398],{},"{% tabs 数据模式 %}",[14,400,216,401,403],{},[218,402,220],{},"\u002Fsource\u002F_data\u002Fessay.yml 文件，并新增以下内容",[223,405,408],{"className":406,"code":407,"language":307,"meta":229},[305],"essay_list:\n - content: 即刻短文测试\n date: 2023\u002F07\u002F31 15:30:50\n from: iPhone XR\n video: \n player: \u002Fvideo\u002F1.mp4\n\n - content: 测试bilibili视频\n date: 2023\u002F07\u002F31 15:30:50\n video: \n bilibili: \u002F\u002Fplayer.bilibili.com\u002Fplayer.html?aid=913951276&bvid=BV1RM4y1p75T&cid=1211165267&page=1\n\n - content: bilibili网页链接\n date: 2023\u002F07\u002F31 15:30:50\n video: \n bilibili: https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV17T4y1A7eW\u002F?spm_id_from=333.1007.tianma.1-3-3.click\n\n - content: bilibili单bv号\n date: 2023\u002F07\u002F31 15:30:50\n video: \n bilibili: BV17T4y1A7eW\n autoplay: true\n\n - content: 完噜 还剩一天让我咋准备 😭\n date: 2023\u002F05\u002F11 20:35:42\n from: iPhone XR\n image: \n - https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F05\u002F11\u002Fp9sKEh8.jpg\n\n - content: 如果要定义 那就是下班后的日落和在家等我下班的她~\n date: 2023\u002F05\u002F10 16:16:15\n aplayer:\n server: netease\n id: 1949516216\n top: true\n\n - content: Melancholia - 欭 | 一款纯记录写作类Hexo主题 ✍️\n date: 2023\u002F04\u002F23 22:27:22\n from: Macbook Pro\n link: https:\u002F\u002Fgithub.com\u002Fyife68\u002FHexo-Theme-Melancholia || Melancholia\n\n - content: 爱看 但还是得吃我一拳\n date: 2023\u002F04\u002F22 15:10:30\n from: iPhone XR\n image: \n - https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F05\u002F03\u002Fp9JqGXd.jpg\n - https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F05\u002F03\u002Fp9Jq86H.jpg\n\n - content: iCat 新启程\n date: 2023\u002F03\u002F24 16:54:25\n from: iPhone XR\n link: https:\u002F\u002Fmeuicat.com\u002Fblog\u002F14\u002F\n image: \n - https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F05\u002F02\u002Fp9GosYQ.jpg\n\n - content: 各种观影史集于一体！人生足迹页诞生咯~\n date: 2023\u002F02\u002F19 14:50:17\n from: Macbook Pro\n link: \u002Fcollect\u002F || 链接描述\n",[231,409,407],{"__ignoreMap":229},[14,411,412],{},"JSON文件可参照以下格式",[223,414,419],{"className":415,"code":417,"language":418,"meta":229},[416],"language-JSON","[\n {\n \"class_name\": \"即刻短文\",\n \"essay_list\": [\n {\n \"content\": \"园长新造型！爱死\",\n \"date\": \"2023\u002F08\u002F01 17:12:30\",\n \"video\": {\n \"bilibili\": \"\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?aid=701381935&bvid=BV1dm4y1L7vj&cid=1212026428&page=1\",\n \"autoplay\": true\n }\n },\n {\n \"content\": \"这辈子都不想完善项目了 😭 两点了 一看才搓完三分之一..\",\n \"date\": \"2023\u002F08\u002F01 02:02:44\",\n \"video\": {\n \"player\": \"https:\u002F\u002Fmeuicat.com\u002Fvideo\u002F1.mp4\"\n }\n },\n {\n \"content\": \"让我看看是谁在路上都还在敲键盘 噢 原来是我自己啊..\",\n \"date\": \"2023\u002F07\u002F31 15:54:26\",\n \"from\": \"iPhone XR\"\n },\n {\n \"content\": \"落班 烧个排骨778~\",\n \"date\": \"2023\u002F07\u002F26 17:55:36\",\n \"from\": \"iPhone XR\",\n \"image\": [\n \"https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F07\u002F26\u002FpCjWbY4.jpg || 图片描述\",\n \"https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F07\u002F26\u002FpCjWqfJ.jpg\"\n ]\n },\n {\n \"content\": \"嘘..听歌..睡觉...\",\n \"date\": \"2023\u002F07\u002F20 00:38:41\",\n \"aplayer\": {\n \"server\": \"netease\",\n \"id\": \"1430702919\"\n },\n \"top\": true\n },\n {\n \"content\": \"人生应该是一个轴对称的形状，最后失去的，也就是最开始拥有的。现在没人记得你的生日，有好处也有坏处，至少我是这么理解的。但无论是好还是坏，忍一忍，都会很快过去的\",\n \"date\": \"2023\u002F07\u002F19 01:48:36\",\n \"from\": \"iPhone XR\",\n \"link\": \"\u002Fblog\u002F64 || 链接描述\"\n },\n {\n \"content\": \"用堆AI重绘一下我最爱的头像（图一 👉 图二）\",\n \"date\": \"2023\u002F07\u002F06 16:30:32\",\n \"from\": \"iPhone XR\",\n \"link\": \"\u002Fblog\u002F61\",\n \"image\": [\n \"https:\u002F\u002Fimg.meuicat.com\u002Fposts\u002F2023\u002F7\u002F10.webp\",\n \"https:\u002F\u002Fimg.meuicat.com\u002Fposts\u002F2023\u002F7\u002F11.webp\"\n ]\n },\n {\n \"content\": \"\",\n \"date\": \"2023\u002F06\u002F30 08:26:22\",\n \"aplayer\": {\n \"server\": \"netease\",\n \"id\": \"2009974513\"\n }\n }\n ]\n }\n]\n","JSON",[231,420,417],{"__ignoreMap":229},[14,422,423],{},"Memos用法：",[223,425,428],{"className":426,"code":427,"language":228,"meta":229},[226],"#说说 {标识符} 我是内容 [我是链接](https:\u002F\u002Fmeuicat.com) ![](https:\u002F\u002Fimg.meuicat.cn\u002Fblog\u002F8.png)\n\u003C!-- 常规写法 -->\n\n#说说 网易云音乐 {music netease 29947420 }\n#说说 腾讯音乐 {music tencent 330977131 }\n\u003C!-- 音乐写法 -->\n\n#说说 普通视频 { player https:\u002F\u002Fv.meuicat.com\u002Fvideo\u002F1.mp4 }\n#说说 哔哩哔哩手机视频 { bilibili https:\u002F\u002Fm.bilibili.com\u002Fvideo\u002FBV17T4y1A7eW }\n#说说 哔哩哔哩网页视频 { bilibili https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV17T4y1A7eW\u002F?spm_id_from=333.1007.tianma.1-3-3.click }\n\u003C!-- 视频写法 -->\n\n#说说 #top\n我是内容 ![我是图片描述](https:\u002F\u002Fimg.meuicat.cn\u002Fblog\u002F8.png)![](https:\u002F\u002Fimg.meuicat.cn\u002Fblog\u002F8.png)\n\u003C!-- 置顶写法 -->\n",[231,429,427],{"__ignoreMap":229},[14,431,432],{},"{% endtabs %}",[207,434,436],{"id":435},"即刻mini","即刻Mini",[14,438,439,440,442],{},"(1).创建页面内容\n新增 ",[218,441,220],{},"\u002Fthemes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fmixins\u002Fpost-ui.pug 页面内容\n（ + 号直接删除 即是正常缩进）",[223,444,447],{"className":445,"code":446,"language":247,"meta":248},[245],"mixin postUI(posts)\n - let newTitle= newPost()\n+ if theme.essay.enable && theme.essay.home_mini\n+ include .\u002Fessay_mini.pug\n each article , index in page.posts.data\n .recent-post-item\n \n ···\n",[231,448,446],{"__ignoreMap":229},[14,450,216,451,453],{},[218,452,220],{},"\u002Fthemes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fmixins\u002Fessay_mini.pug 页面，并新增以下内容\n（注意该内容中 fontawesome 图标 需要自行替换）",[223,455,458],{"className":456,"code":457,"language":247,"meta":248},[245],".essay-mini\n i.iconfont.icat-essay-mini(onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')` title=\"即刻短文\" style=\"font-size: 2.25rem; margin-right: 1rem\")\n .swiper-container.swiper-no-swiping#Essay(tabindex=\"-1\" onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')`)\n .swiper-wrapper#essay-mini\n.essay-mini.wow.animation-slide-in(data-wow-duration=\"1s\" data-wow-delay=\"200ms\" data-wow-offset=\"100\" data-wow-iteration=\"1\")\n i.iconfont.icat-essay-mini(onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')` title=\"即刻短文\" style=\"font-size: 2.25rem; margin-right: 1rem\")\n .swiper-container.swiper-no-swiping#Essay(tabindex=\"-1\" onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')`)\n .swiper-wrapper#essay-mini\n case theme.essay.mode\n when 'local'\n each item, i in site.data.essay.essay_list.slice(0, 10)\n .li-style.swiper-slide\n | #{item.content}\n if item.image\n | 【图片】\n else if item.aplayer\n | 【音乐】\n else if item.video || item.bilibili\n | 【视频】\n when 'json'\n .li-style.essay-loading(style=\"text-align: center\") 正在加载...\n script.\n (async function () {\n const response = await fetch('!{url_for(theme.essay.mode_link)}');\n const data = await response.json();\n const list = data[0].essay_list.slice(0, 10).map(item => {\n let type = item.image ? '【图片】' : item.aplayer ? '【音乐】' : item.video ? '【视频】' : '';\n return `\u003Cdiv class=\"li-style swiper-slide\">${item.content + type}\u003C\u002Fdiv>`\n });\n document.querySelector('#essay-mini').innerHTML = list.join(' ');\n })()\n when 'memos'\n .li-style.essay-loading(style=\"text-align: center\") 正在加载...\n script.\n (async function () {\n const response = await fetch('!{url_for(theme.essay.mode_link)}');\n const data = await response.json();\n const list = data.slice(0, 10).map(item => {\n let data = item.content,\n content = data.replace(\u002F#(.*?)\\s|\\n\u002Fg, '').replace(\u002F\\!\\[(.*?)\\]\\((.*?)\\)\u002Fg, '').replace(\u002F\\{(.*?)\\}\u002Fg, '').replace(\u002F(?\u003C!\\!)\\[(.*?)\\]\\((.*?)\\)\u002Fg, '').trim();\n type = data.match(\u002F\\!\\[(.*?)\\]\\((.*?)\\)\u002Fg) ? '【图片】' : data.match(\u002F{\\s*music\\s*(.*?)\\s*(.*?)\\s*}\u002Fg) ? '【音乐】' : data.match(\u002F{\\s*player\\s*(.*)\\s*}\u002Fg) || data.match(\u002F{\\s*bilibili\\s*(.*?)\\s*}\u002Fg) ? '【视频】' : '';\n return `\u003Cdiv class=\"li-style swiper-slide\">${content + type}\u003C\u002Fdiv>`\n });\n document.querySelector('#essay-mini').innerHTML = list.join(' ');\n })()\n i.iconfont.icat-right-btn(title=\"查看全文\" onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')` style=\"margin-left: 1rem\")\n",[231,459,457],{"__ignoreMap":229},[14,461,462],{},"(2).新建样式文件",[14,464,465,466,468],{},"新建 ",[218,467,220],{},"\u002Fthemes\u002Fbutterfly\u002Fsource\u002Fcss\u002F_page\u002Fhomepage.styl 样式文件内容\n（ + 号直接删除 即是正常缩进）",[223,470,473],{"className":471,"code":472,"language":321,"meta":229},[319],"+if hexo-config('essay.enable') && hexo-config('essay.home_mini')\n+ .essay-mini\n+ background: var(--card-bg)\n+ color: var(--font-color)\n+ padding: 0.5rem 1rem\n+ border-radius: 8px\n+ box-shadow: var(--icat-shadow-border)\n+ display: flex\n+ border: var(--style-border)\n+ align-items: center\n+ height: 50px\n+ animation: slide-in 0.6s 0.4s backwards\n+ will-change: transform\n+ transition: .6s\n+\n+ &:hover\n+ border: var(--style-border-hover-always)\n+\n+ #Essay\n+ overflow: hidden\n+ width: 100%\n+ overflow: hidden\n+ text-overflow: ellipsis\n+ white-space: nowrap\n+\n+ #essay-mini\n+ width: 100%\n+ height: 25px\n+ line-height: 25px\n+ display: flex\n+ flex-direction: column\n+\n+ .li-style\n+ width: auto\n+ max-width: 100%\n+ height: 25px\n+ text-align: center\n+ overflow: hidden\n+ text-overflow: ellipsis\n+ font-weight: 700\n+ margin: auto\n+ cursor: pointer\n+ white-space: nowrap\n+ user-select: none\n+\n+ i, .li-style\n+ transition: .6s\n+ cursor: pointer\n+\n+ &:hover\n+ color: var(--icat-blue)\n\n#recent-posts\n & > .recent-post-item:not(:first-child)\n\n ···\n",[231,474,472],{"__ignoreMap":229},[14,476,477],{},"{% folding cyan, 可选CSS样式 %}",[14,479,480,481,483],{},"新增 ",[218,482,220],{},"\u002Fsource\u002Fcss\u002Fessay.css 样式文件内容\n（也可以在自建的css文件里新增内容）",[223,485,488],{"className":486,"code":487,"language":335,"meta":229},[333],".essay-mini {\n background: var(--card-bg);\n color: var(--font-color);\n padding: 0.5rem 1rem;\n border-radius: 8px;\n -webkit-box-shadow: var(--icat-shadow-border);\n box-shadow: var(--icat-shadow-border);\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n border: var(--style-border);\n -webkit-box-align: center;\n -moz-box-align: center;\n -o-box-align: center;\n -ms-flex-align: center;\n -webkit-align-items: center;\n align-items: center;\n height: 50px;\n -webkit-animation: slide-in 0.6s 0.4s backwards;\n -moz-animation: slide-in 0.6s 0.4s backwards;\n -o-animation: slide-in 0.6s 0.4s backwards;\n -ms-animation: slide-in 0.6s 0.4s backwards;\n animation: slide-in 0.6s 0.4s backwards;\n will-change: transform;\n -webkit-transition: 0.6s;\n -moz-transition: 0.6s;\n -o-transition: 0.6s;\n -ms-transition: 0.6s;\n transition: 0.6s;\n}\n.essay-mini:hover {\n border: var(--style-border-hover-always);\n}\n.essay-mini #Essay {\n overflow: hidden;\n width: 100%;\n overflow: hidden;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.essay-mini #Essay #essay-mini {\n width: 100%;\n height: 25px;\n line-height: 25px;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: box;\n display: flex;\n -webkit-box-orient: vertical;\n -moz-box-orient: vertical;\n -o-box-orient: vertical;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n.essay-mini #Essay .li-style {\n width: auto;\n max-width: 100%;\n height: 25px;\n text-align: center;\n overflow: hidden;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n font-weight: 700;\n margin: auto;\n cursor: pointer;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.essay-mini i,\n.essay-mini .li-style {\n -webkit-transition: 0.6s;\n -moz-transition: 0.6s;\n -o-transition: 0.6s;\n -ms-transition: 0.6s;\n transition: 0.6s;\n cursor: pointer;\n}\n.essay-mini i:hover,\n.essay-mini .li-style:hover {\n color: var(--icat-blue);\n}\n\n\u002F* 即刻mini样式 *\u002F\n",[231,489,487],{"__ignoreMap":229},[14,491,492],{},"{% endfolding %}\n(3).新建js文件",[14,494,480,495,497],{},[218,496,220],{},"\u002Fsource\u002Fjs\u002Fessay.js 文件内容\n（或写在自建的公共 js 中也可以）",[223,499,502],{"className":500,"code":501,"language":361,"meta":229},[359],"function whenDOMReady() {\n\tinitEssay();\n};\n\nwhenDOMReady()\ndocument.addEventListener(\"pjax:complete\", whenDOMReady)\n\nfunction initEssay() {\n if (document.querySelector('#essay-mini')) {\n let swiper = new Swiper('.swiper-container', {\n direction: 'vertical',\n loop: true,\n autoplay: {\n delay: 3000,\n pauseOnMouseEnter: true\n },\n });\n }\n} \u002F\u002F Swiper轮播 - 即刻mini\n",[231,503,501],{"__ignoreMap":229},[14,505,506],{},"在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 essay.js 和 waterfall.js",[223,508,511],{"className":509,"code":510,"language":307,"meta":229},[305]," ···\n\ninject:\n head:\n - ···\n bottom:\n - \u003Cscript src=\"https:\u002F\u002Fcdn.staticfile.net\u002FSwiper\u002F10.3.1\u002Fswiper-bundle.min.js\">\u003C\u002Fscript> # Swiper - 轮播动画库\n\n ···\n",[231,512,510],{"__ignoreMap":229},[10,514,516],{"id":515},"随风起即刻短文","随风起（即刻短文）",[45,518,519],{"id":519},"支持类型",[49,521,522,536],{},[52,523,524],{},[55,525,526,531],{},[58,527,528],{},[61,529,530],{},"列表",[58,532,533],{},[61,534,535],{},"是否支持",[81,537,538,548,557,566,574,583],{},[55,539,540,545],{},[86,541,542],{},[61,543,544],{},"图片",[86,546,547],{},"✅",[55,549,550,555],{},[86,551,552],{},[61,553,554],{},"链接",[86,556,547],{},[55,558,559,564],{},[86,560,561],{},[61,562,563],{},"音乐",[86,565,547],{},[55,567,568,572],{},[86,569,570],{},[61,571,90],{},[86,573,547],{},[55,575,576,581],{},[86,577,578],{},[61,579,580],{},"首页滚动",[86,582,547],{},[55,584,585,590],{},[86,586,587],{},[61,588,589],{},"位置信息",[86,591,547],{},[45,593,209],{"id":594},"创建数据-1",[14,596,597],{},"在source\u002F_data目录下创建essay.yml：",[223,599,602],{"className":600,"code":601,"language":307,"meta":229},[305],"- class_name: 即刻短文\n essay_list:\n - content: 文章推荐卡片教程推出\n image: https:\u002F\u002Fcdn.bywind.xyz\u002Fimg\u002Fcover\u002Fimage-20221221154442479.png\n link: https:\u002F\u002Fblog.bywind.xyz\u002Fposts\u002Fab6e072d.html\n location: 山西\n date: 2022-12-21\n - content: 关于本站\n link: https:\u002F\u002Fblog.bywind.xyz\u002Fabout\u002F\n location: 天津\n date: 2022-12-20\n - content: 即刻短文头图换成视频，更显动态感\n date: 2022-12-19 23:07:23\n - content: 李荣浩的歌还是那么好听，两人配合太棒了！\n music:\n server: tencent\n id: 001wG84E4bOj3V\n date: 2022-12-19 08:07:23\n",[231,603,601],{"__ignoreMap":229},[45,605,606],{"id":606},"配置参数介绍",[49,608,609,623],{},[52,610,611],{},[55,612,613,618],{},[58,614,615],{},[61,616,617],{},"参数",[58,619,620],{},[61,621,622],{},"含义",[81,624,625,635,644,653,663,673,682],{},[55,626,627,632],{},[86,628,629],{},[61,630,631],{},"content",[86,633,634],{},"即刻短文内容",[55,636,637,642],{},[86,638,639],{},[61,640,641],{},"image",[86,643,544],{},[55,645,646,651],{},[86,647,648],{},[61,649,650],{},"link",[86,652,554],{},[55,654,655,660],{},[86,656,657],{},[61,658,659],{},"music.server",[86,661,662],{},"音乐服务商（tencentQQ，netease网易云，,kugou酷狗, xiami虾米）",[55,664,665,670],{},[86,666,667],{},[61,668,669],{},"music.id",[86,671,672],{},"音乐id",[55,674,675,680],{},[86,676,677],{},[61,678,679],{},"location",[86,681,589],{},[55,683,684,689],{},[86,685,686],{},[61,687,688],{},"date",[86,690,691],{},"日期",[45,693,694],{"id":694},"创建md页面",[14,696,697],{},"创建md页面，在控制台输入hexo new page essay，生成文件在source\u002Fessay\u002Findex.md",[223,699,702],{"className":700,"code":701,"language":228,"meta":229},[226],"---\ntitle: 即刻短文\ndate: 2022-12-20 22:06:17\ncomments: true\naside: false\ntop_img: false\ntype: essay\n---\n",[231,703,701],{"__ignoreMap":229},[45,705,706],{"id":706},"创建页面文件",[14,708,709],{},"在themes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fpage目录下创建essay.pug",[223,711,714],{"className":712,"code":713,"language":247,"meta":248},[245],".author-content.author-content-item.essayPage.single.essayVideo\n .card-content\n .author-content-item-tips 即刻短文\n span.author-content-item-title 分享生活的小确幸\n .content-bottom\n .tips 使用 即刻短文静态部署版 构建\n .banner-button-group\n a.banner-button(onclick='pjax.loadUrl(\"\u002Fabout\u002F\")', data-pjax-state)\n i.fas.fa-circle-chevron-right\n span.banner-button-text 部署项目\n#bber\n section.timeline.page-1\n ul#waterfall.list.show\n each i in site.data.essay\n each item, index in i.essay_list\n if index \u003C 30\n li.item\n .bber-content\n p.datacont= item.content\n if item.image\n .bber-content-img\n a.fancybox(target='_blank', rel='noopener', href=item.image, data-fancybox='gallery', data-caption)\n img.bber-content-image-self(src=item.image)\n if item.music\n .bber-music\n meting-js(server=item.music.server, type='song', id=item.music.id, mutex='true', preload='none', theme='var(--bywind-main)', data-lrctype='0')\n hr\n .bber-bottom\n .bber-info\n .bber-info-time\n i.fa-solid.fa-calendar-days\n - var datedata = new Date(item.date).toISOString()\n\n time.datatime(datetime= item.date)= datedata\n if item.link\n a.bber-content-link(href=item.link, target=\"_blank\", rel=\"external nofollow\", title=\"跳转到短文指引的链接\")\n i.fas.fa-link\n | 链接\n - let location = item.location ? item.location : 山西\n .bber-info-address\n i.hnfont.icon-location-fill\n span=location\n a.bber-reply(onclick=`rm.rightMenuCommentText('${item.content}')`)\n i.fa-solid.fa-message\n\n#bber-tips(style='color: var(--bywind-secondtext);')\n | - 只展示最近30条短文 -\n",[231,715,713],{"__ignoreMap":229},[45,717,719],{"id":718},"修改page文件","修改Page文件",[14,721,722],{},"修改themes\u002Fbutterfly\u002Flayout\u002Fpage.pug",[223,724,729],{"className":725,"code":727,"language":728,"meta":229},[726],"language-PUG"," case page.type\n when 'tags'\n include includes\u002Fpage\u002Ftags.pug\n when 'link'\n include includes\u002Fpage\u002Fflink.pug\n+ when 'essay'\n+ include includes\u002Fpage\u002Fessay.pug\n","PUG",[231,730,727],{"__ignoreMap":229},[45,732,734],{"id":733},"首页即刻可选","首页即刻（可选）",[14,736,737],{},"新建themes\u002Fbutterfly\u002Flayout\u002Fincludes\u002FbbTimeList.pug",[223,739,742],{"className":740,"code":741,"language":247,"meta":248},[245],"#bbTimeList.bbTimeList.container\n i.bber-logo.iconfont.icon-bblogo(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`,title=\"即刻短文\",style=\"font-size: 2rem;\")\n #bbtalk.swiper-container.swiper-no-swiping(tabindex=\"-1\")\n #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`)\n each i in site.data.essay\n each item, index in i.essay_list\n if index \u003C 10\n - var contentText = item.content\n if item.image\n - contentText= item.content + ' [图片]'\n else if item.music\n - contentText= item.content + ' [音乐]'\n .li-style.swiper-slide= contentText\n\n i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`,title=\"查看全文\")\nscript(src='https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fswiper\u002Fswiper-bundle.min.js',data-pjax='')\n\n",[231,743,741],{"__ignoreMap":229},[45,745,734],{"id":746},"首页即刻可选-1",[14,748,749],{},"(1).新建首页轮播内容",[14,751,737],{},[223,753,756],{"className":754,"code":755,"language":247,"meta":248},[245],"#bbTimeList.bbTimeList.container\n i.bber-logo.iconfont.icon-bblogo(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`,title=\"即刻短文\",style=\"font-size: 2rem;\")\n #bbtalk.swiper-container.swiper-no-swiping(tabindex=\"-1\")\n #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`)\n each i in site.data.essay\n each item, index in i.essay_list\n if index \u003C 10\n - var contentText = item.content\n if item.image\n - contentText= item.content + ' [图片]'\n else if item.music\n - contentText= item.content + ' [音乐]'\n .li-style.swiper-slide= contentText\n\n i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`,title=\"查看全文\")\nscript(src='https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fswiper\u002Fswiper-bundle.min.js',data-pjax='')\n",[231,757,755],{"__ignoreMap":229},[14,759,760],{},"(2).引入到主页",[223,762,765],{"className":763,"code":764,"language":247,"meta":248},[245],"block content\n include .\u002Fincludes\u002Fmixins\u002Fpost-ui.pug\n #recent-posts.recent-posts\n include includes\u002FcategoryList.pug\n+ include includes\u002FbbTimeList.pug\n +postUI\n include includes\u002Fpagination.pug\n",[231,766,764],{"__ignoreMap":229},[14,768,769],{},"(3).引入样式文件",[223,771,774],{"className":772,"code":773,"language":307,"meta":229},[305],"inject:\n head:\n\t\t- \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fswiper\u002Fswiper-bundle.min.css\">\n\t\t- \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fjs-heo@1.0.11\u002Fbb\u002Fshowbb_in_index.css\">\n\t\t- \u003Cscript src=\"https:\u002F\u002Fcdn.staticaly.com\u002Fgh\u002Fhaonan15\u002FCDN@main\u002Fsource\u002Fwaterfall.min.js\">\u003C\u002Fscript> # 瀑布流\n",[231,775,773],{"__ignoreMap":229},[14,777,778],{},"(4).添加自定义js",[223,780,783],{"className":781,"code":782,"language":361,"meta":229},[359],"if (document.querySelector('#bber-talk')) {\n var swiper = new Swiper('.swiper-container', {\n direction: 'vertical', \n loop: true,\n autoplay: {\n delay: 3000,\n pauseOnMouseEnter: true\n },\n });\n }\n",[231,784,782],{"__ignoreMap":229},[14,786,787],{},"(5).添加CSS文件",[223,789,792],{"className":790,"code":791,"language":335,"meta":229},[333],"#bber>section>ul>li>div .bber-info-time ,\n#bber > section > ul > li > div .bber-info-address{\n color: var(--bywind-fontcolor);\n font-size: 0.7rem;\n background-color: var(--bywind-gray-op);\n padding: 0 8px;\n border-radius: 20px;\n cursor: default;\n display: flex;\n align-items: center;\n}\n\n#bber>section>ul>li>div .bber-info-time i ,\n#bber > section > ul > li > div .bber-info-address i{\n margin-right: 8px;\n font-size: 16px;\n}\n#bber > section > ul > li > div .bber-info-address {\n margin-left: 0.5rem;\n}\n",[231,793,791],{"__ignoreMap":229},[10,795,797],{"id":796},"安知鱼即刻短文","安知鱼（即刻短文）",[45,799,47],{"id":800},"功能对比-1",[49,802,803,816],{},[52,804,805],{},[55,806,807,811],{},[58,808,809],{},[61,810,63],{},[58,812,813],{},[61,814,815],{},"支持度",[81,817,818,826,835,843,851,859,867,876,885,894],{},[55,819,820,824],{},[86,821,822],{},[61,823,105],{},[86,825,547],{},[55,827,828,833],{},[86,829,830],{},[61,831,832],{},"多图片多行显示",[86,834,547],{},[55,836,837,841],{},[86,838,839],{},[61,840,131],{},[86,842,547],{},[55,844,845,849],{},[86,846,847],{},[61,848,90],{},[86,850,547],{},[55,852,853,857],{},[86,854,855],{},[61,856,580],{},[86,858,547],{},[55,860,861,865],{},[86,862,863],{},[61,864,157],{},[86,866,547],{},[55,868,869,874],{},[86,870,871],{},[61,872,873],{},"本地修改yml发布",[86,875,547],{},[55,877,878,883],{},[86,879,880],{},[61,881,882],{},"aplayer",[86,884,547],{},[55,886,887,892],{},[86,888,889],{},[61,890,891],{},"单曲音乐",[86,893,547],{},[55,895,896,901],{},[86,897,898],{},[61,899,900],{},"插件版本",[86,902,903],{},"❌",[45,905,906],{"id":906},"添加颜色内容",[14,908,909,910],{},"详情可以前往这个文章查看",[18,911,914],{"href":912,"rel":913},"https:\u002F\u002Fwww.sxiaohe.top\u002Fposts\u002F2013454d.html",[22],"颜色样式",[45,916,209],{"id":917},"创建数据-2",[14,919,920],{},"创建 source\u002F_data\u002Fessay.yml",[223,922,925],{"className":923,"code":924,"language":307,"meta":229},[305],"- class_name: 即刻短文\n essay_list:\n - content: 终于把相册集搞定了, 耶✌️, 瀑布流在滑动滚动条一个视口范围上下100的情况执行一次, 到底部停止监听让性能高了好多，再也不会布局混乱🤪了\n date: 2022\u002F10\u002F25\n link: https:\u002F\u002Fblog.anheyu.com\u002Falbum\u002F\n - content: 搜索🔍支持缩略图显示啦（默认获取文章内容的第一张图片）\n date: 2022\u002F10\u002F23 08:00:00\n from: 安知鱼\n - content: 遇见彩虹🌈吃定彩虹\n date: 2022\u002F10\u002F23 10:00:00\n image:\n - https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F10\u002F23\u002F6354ea92960ef.webp\n - content: ThreeJs API真多丫\n date: 2022\u002F10\u002F19\n - content: 歌曲推荐\n date: 2022\u002F09\u002F25\n aplayer:\n server: tencent\n id: 001FGQba3i10mw\n",[231,926,924],{"__ignoreMap":229},[45,928,929],{"id":929},"数据参数释义",[49,931,932,950],{},[52,933,934],{},[55,935,936,940,945],{},[58,937,938],{},[61,939,617],{},[58,941,942],{},[61,943,944],{},"备选值\u002F类型",[58,946,947],{},[61,948,949],{},"释义",[81,951,952,965,978,990,1003,1015,1027,1039,1051,1063],{},[55,953,954,959,962],{},[86,955,956],{},[61,957,958],{},"class_name",[86,960,961],{},"String",[86,963,964],{},"【可选】标识符，无实际意义，选填",[55,966,967,972,975],{},[86,968,969],{},[61,970,971],{},"essay_list",[86,973,974],{},"Array",[86,976,977],{},"【必选】即刻短文数据列表",[55,979,980,985,987],{},[86,981,982],{},[61,983,984],{},"essay_list.content",[86,986,961],{},[86,988,989],{},"【必选】短文 文字内容",[55,991,992,997,1000],{},[86,993,994],{},[61,995,996],{},"essay_list.date",[86,998,999],{},"Time",[86,1001,1002],{},"【必选】短文发布时间 格式建议为 2022\u002F10\u002F26 08:00:00",[55,1004,1005,1010,1012],{},[86,1006,1007],{},[61,1008,1009],{},"essay_list.image",[86,1011,974],{},[86,1013,1014],{},"【可选】短文图片内容, 可填写多张图片",[55,1016,1017,1022,1024],{},[86,1018,1019],{},[61,1020,1021],{},"essay_list.from",[86,1023,961],{},[86,1025,1026],{},"【可选】短文 来自何处, 当然也可以填任何你想填写的标识",[55,1028,1029,1034,1036],{},[86,1030,1031],{},[61,1032,1033],{},"essay_list.link",[86,1035,961],{},[86,1037,1038],{},"【可选】外部链接",[55,1040,1041,1046,1048],{},[86,1042,1043],{},[61,1044,1045],{},"essay_list.aplayer",[86,1047,974],{},[86,1049,1050],{},"【可选】aplayer 播放器的单曲音乐, 需 aplayer 支持",[55,1052,1053,1058,1060],{},[86,1054,1055],{},[61,1056,1057],{},"essay_list.aplayer.server",[86,1059,961],{},[86,1061,1062],{},"【essay_list.aplayer 后必选】aplayer 服务商",[55,1064,1065,1070,1072],{},[86,1066,1067],{},[61,1068,1069],{},"essay_list.aplayer.id",[86,1071,961],{},[86,1073,1074],{},"【essay_list.aplayer 后必选】单曲 id",[45,1076,1078],{"id":1077},"创建-md-页面文件","创建 md 页面文件",[14,1080,1081],{},"创建source\u002Fessay\u002Findex.md 来生成页面 page",[223,1083,1086],{"className":1084,"code":1085,"language":228,"meta":229},[226],"---\ntitle: 即刻短文\ndate: 2020-07-22 22:06:17\ncomments: true\naside: false\ntop_img: false\ntype: essay\n---\n",[231,1087,1085],{"__ignoreMap":229},[45,1089,1091],{"id":1090},"创建-dom-文件","创建 dom 文件",[14,1093,1094],{},"创建themes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Fpage\u002Fessay.pug, 页面内容, 注意该页面中可能存在部分fontawesome 图标需要自行替换。",[223,1096,1099],{"className":1097,"code":1098,"language":247,"meta":248},[245],"#essay_page\n .author-content.author-content-item.essayPage.single\n .card-content\n .author-content-item-tips 即刻短文\n span.author-content-item-title 咸鱼的日常生活。\n .content-bottom\n .tips 使用 即刻短文静态部署版 构建\n .banner-button-group\n a.banner-button(onclick='pjax.loadUrl(\"\u002Fabout\u002F\")', data-pjax-state)\n i.fas.fa-circle-right(style='font-size: 1.5rem')\n span.banner-button-text 关于我\n #bber\n section.timeline.page-1\n ul#waterfall.list\n each i in site.data.essay\n each item, index in i.essay_list\n if index \u003C 30\n li.bber-item\n .bber-content\n p.datacont= item.content\n if item.image\n .bber-container-img\n each iten, indey in item.image\n a.bber-content-img(href=item.image[indey], target=\"_blank\", data-fancybox=\"gallery\", data-caption=\"\")\n img(src=item.image[indey])\n .bber-content-noimg\n .bber-content-noimg\n .bber-content-noimg\n if item.aplayer\n .bber-music\n .aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type=\"song\" data-order=\"list\" data-preload=\"none\" data-autoplay=\"false\" data-mutex=\"true\" data-theme='var(--anzhiyu-main)')\n hr\n .bber-bottom\n .bber-info\n .bber-info-time\n - var datedata = new Date(item.date).toISOString()\n i.far.fa-clock\n time.datatime(datetime= item.date)= datedata\n if item.link\n a.bber-content-link(target=\"_blank\", title=\"跳转到短文指引的链接\", href=item.link, rel=\"external nofollow\")\n i.fas.fa-link\n | 链接\n if item.from\n .bber-info-from\n i.fas.fa-fire\n span=item.from\n .bber-reply(onclick=\"anzhiyu.commentText(\" + `'${item.content}'` + \")\")\n i.fa-solid.fa-message\n #bber-tips(style='color: var(--anzhiyu-secondtext);')\n | - 只展示最近30条短文 -\n",[231,1100,1098],{"__ignoreMap":229},[45,1102,1104],{"id":1103},"修改-page-文件","修改 Page 文件",[14,1106,1107],{},"修改themes\u002Fbutterfly\u002Flayout\u002Fpage.pug 来使页面内容匹配\n在 case page.type 子项里面添加, 注意缩进",[223,1109,1112],{"className":1110,"code":1111,"language":247,"meta":248},[245]," case page.type\n+ when 'essay'\n+ include includes\u002Fpage\u002Fessay.pug\n when 'tags'\n include includes\u002Fpage\u002Ftags.pug\n when 'link'\n include includes\u002Fpage\u002Fflink.pug\n when 'categories'\n include includes\u002Fpage\u002Fcategories.pug\n",[231,1113,1111],{"__ignoreMap":229},[45,1115,1117],{"id":1116},"加入-css","加入 css",[14,1119,1120],{},"创建source\u002Fcss\u002Fessay_page\u002Fessay_page.css, 然后在_config.butterfly.yml中的inject下的head引入, 注意缩进",[223,1122,1125],{"className":1123,"code":1124,"language":307,"meta":229},[305],"inject:\n head:\n - \u003Clink rel=\"stylesheet\" href=\"\u002Fcss\u002Fessay_page\u002Fessay_page.css\">\n",[231,1126,1124],{"__ignoreMap":229},[223,1128,1131],{"className":1129,"code":1130,"language":335,"meta":229},[333],"#page:has(#essay_page) {\n border: 0;\n box-shadow: none !important;\n padding: 0 !important;\n background: transparent !important;\n}\n#page:has(#essay_page) .page-title {\n display: none;\n}\n#web_bg ~ .page:has(#essay_page) {\n background: var(--anzhiyu-background);\n}\n#bber .bber-container-img {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n flex-wrap: wrap;\n margin-bottom: 0.3rem;\n}\n#bber .bber-container-img .bber-content-noimg {\n width: calc(100% \u002F 4 - 5px);\n}\n\n#bber .bber-content-img img {\n object-fit: cover;\n max-height: 100%;\n border-radius: 12px;\n}\n\n#bber .bber-content-img {\n height: 100px;\n border-radius: 12px;\n overflow: hidden;\n display: flex;\n position: relative;\n width: calc(100% \u002F 4 - 5px);\n margin-bottom: 10px;\n}\n\n#bber .bber-content .datacont {\n order: 0;\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--anzhiyu-fontcolor);\n width: 100%;\n line-height: 1.38;\n border-radius: 12px;\n margin-bottom: 0.5rem;\n display: flex;\n flex-direction: column;\n text-align: justify;\n}\n#bber p {\n margin: 0px;\n}\n#bber div.bber-content {\n display: flex;\n flex-flow: wrap;\n border-radius: 12px;\n width: 100%;\n height: 100%;\n}\n#bber .timeline ul li.bber-item {\n position: relative;\n width: 32%;\n border: var(--style-border-always);\n border-radius: 12px;\n padding: 1rem 1rem 0.5rem;\n transition: all 0.3s ease 0s;\n display: flex;\n flex-flow: column nowrap;\n justify-content: space-between;\n align-items: flex-start;\n background: var(--anzhiyu-card-bg);\n box-shadow: var(--anzhiyu-shadow-border);\n margin-right: 2%;\n}\n#bber .timeline #waterfall.show {\n opacity: 1;\n}\n#bber .timeline #waterfall {\n opacity: 0;\n transition: all 0.3s ease 0s;\n}\n#bber ul.list {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n}\n#bber {\n margin-top: 1rem;\n width: 100%;\n}\n#bber > section > ul > li.bber-item {\n margin-bottom: 1rem;\n}\n\n#bber-tips {\n font-size: 14px;\n display: flex;\n justify-content: center;\n margin-top: 1rem;\n}\n\n#bber .timeline ul li.bber-item hr {\n display: flex;\n position: relative;\n margin: 8px 0px;\n border: 1px dashed var(--anzhiyu-theme-op);\n width: 100%;\n}\n\n#bber .bber-info {\n display: flex;\n align-items: center;\n}\n\n#bber > section > ul > li > div .bber-info-time,\n#bber > section > ul > li > div .bber-info-from {\n color: var(--anzhiyu-fontcolor);\n font-size: 0.7rem;\n background-color: var(--anzhiyu-gray-op);\n padding: 0px 8px;\n border-radius: 20px;\n cursor: default;\n display: flex;\n align-items: center;\n}\n\n#bber .bber-info .far.fa-clock {\n margin-right: 4px;\n}\n#bber > section > ul > li > div .bber-info-from span,\n#bber > section > ul > li > div .bber-info-from {\n margin-left: 4px;\n}\n\n#bber .bber-bottom {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 10px;\n}\n\n#bber .bber-bottom .bber-reply {\n cursor: pointer;\n}\n\n#bber .timeline ul li.bber-item:hover {\n border: var(--style-border-hover);\n}\n\n#bber .bber-content-link {\n display: flex;\n margin-left: 0.5rem;\n font-size: 0.7rem;\n align-items: center;\n background-color: rgba(245, 108, 108, 0.13);\n color: rgb(245, 108, 108);\n padding: 0px 8px;\n border-radius: 20px;\n}\n#bber .bber-content-link i {\n margin-right: 3px;\n}\n#bber .bber-content-link:hover {\n background-color: var(--anzhiyu-main);\n color: var(--anzhiyu-white);\n}\n#bber .bber-music {\n width: 100%;\n height: 90px;\n margin: 0.5rem 0;\n border-radius: 8px;\n overflow: hidden;\n border: var(--style-border-always);\n background: var(--anzhiyu-secondbg);\n}\n#bber .aplayer {\n margin: 0;\n}\n\n#bber .aplayer.aplayer-withlrc .aplayer-pic {\n height: 82px;\n width: 82px;\n margin: 4px;\n border-radius: 4px;\n}\n.bber-music .aplayer.aplayer-withlrc .aplayer-info {\n padding: 5px 7px 0;\n}\n#bber .aplayer .aplayer-info .aplayer-music {\n height: 23px;\n}\n#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {\n font-size: 0.8rem;\n font-weight: 700;\n margin: 0;\n color: var(--anzhiyu-fontcolor);\n}\n\n#bber .aplayer .aplayer-info .aplayer-controller {\n align-items: center;\n}\n#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {\n padding: 0;\n}\n#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {\n position: initial;\n}\n#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {\n background: var(--anzhiyu-gray);\n height: 8px;\n border-radius: 12px;\n transition: 0.3s;\n overflow: hidden;\n}\n#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {\n height: 100%;\n border-radius: 12px;\n}\n#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {\n height: 100%;\n border-radius: 12px;\n}\n#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {\n display: none;\n}\n#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {\n position: initial;\n}\n\n\u002F* 顶部样式 *\u002F\n.author-content.author-content-item.essayPage {\n height: 19rem;\n background: url(https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F08\u002F21\u002F630249e2df20f.jpg) left 28% \u002F cover no-repeat;\n color: var(--anzhiyu-white);\n overflow: hidden;\n margin-top: 0px;\n}\n#page:has(#essay_page) .author-content-item .card-content .banner-button-group .banner-button:hover {\n color: var(--anzhiyu-white);\n border-radius: 20px !important;\n}\n\n\u002F* 响应式 *\u002F\n@media screen and (max-width: 1300px) {\n #bber .timeline ul li.bber-item {\n width: 49%;\n margin-right: 1%;\n }\n}\n@media screen and (max-width: 768px) {\n #bber .timeline ul li.bber-item {\n width: 100%;\n margin-right: 0px;\n }\n}\n[data-theme=\"dark\"] #bber .bber-music .aplayer,\n[data-theme=\"dark\"] #bber .aplayer .aplayer-lrc:before,\n[data-theme=\"dark\"] #bber .aplayer .aplayer-lrc:after {\n background: var(--anzhiyu-card-bg);\n color: var(--anzhiyu-fontcolor);\n}\n#bber .aplayer .aplayer-lrc p {\n color: var(--anzhiyu-fontcolor);\n}\n",[231,1132,1130],{"__ignoreMap":229},[45,1134,1136],{"id":1135},"js-处理","js 处理",[14,1138,1139],{},"新建一个 js 文件用来处理即刻短文的逻辑, 或者写在公共 js 中也可以, 博主写在公共 js 中, 即custom.js, 该 js 在_config.butterfly.yml中的inject使用如下方式引入, 加入了data-pjax, 并且开启了站点的pjax, 然后再引入waterfall.js用于处理瀑布流。",[223,1141,1144],{"className":1142,"code":1143,"language":307,"meta":229},[305],"inject:\n bottom:\n - \u003Cscript async data-pjax src=\"\u002Fjs\u002Fcustom.js\">\u003C\u002Fscript>\n # 即刻依赖waterfall\n - \u003Cscript async data-pjax src=\"\u002Fjs\u002Fwaterfall\u002Fwaterfall.js\">\u003C\u002Fscript>\n",[231,1145,1143],{"__ignoreMap":229},[223,1147,1150],{"className":1148,"code":1149,"language":307,"meta":229},[305],"# Pjax\n# It may contain bugs and unstable, give feedback when you find the bugs.\n# https:\u002F\u002Fgithub.com\u002FMoOx\u002Fpjax\npjax:\n enable: true\n exclude:\n",[231,1151,1149],{"__ignoreMap":229},[14,1153,1154],{},"新建 source\u002Fjs\u002Fwaterfall\u002Fwaterfall.js 内容如下",[223,1156,1158],{"className":1157,"code":372,"language":361,"meta":229},[359],[231,1159,372],{"__ignoreMap":229},[14,1161,1162],{},"custom.js内容如下",[223,1164,1167],{"className":1165,"code":1166,"language":361,"meta":229},[359],"var percentFlag = false; \u002F\u002F 节流阀\nfunction essayScroll() {\n let a = document.documentElement.scrollTop || window.pageYOffset; \u002F\u002F 卷去高度\n const waterfallResult = a % document.documentElement.clientHeight; \u002F\u002F 卷去一个视口\n result \u003C= 99 || (result = 99);\n\n if (\n !percentFlag &&\n waterfallResult + 100 >= document.documentElement.clientHeight &&\n document.querySelector(\"#waterfall\")\n ) {\n \u002F\u002F console.info(waterfallResult, document.documentElement.clientHeight);\n setTimeout(() => {\n waterfall(\"#waterfall\");\n }, 500);\n } else {\n setTimeout(() => {\n document.querySelector(\"#waterfall\") && waterfall(\"#waterfall\");\n }, 500);\n }\n\n const r = window.scrollY + document.documentElement.clientHeight;\n\n let p = document.getElementById(\"post-comment\") || document.getElementById(\"footer\");\n\n (p.offsetTop + p.offsetHeight \u002F 2 \u003C r || 90 \u003C result) && (percentFlag = true);\n}\nfunction replaceAll(e, n, t) {\n return e.split(n).join(t);\n}\nvar anzhiyu = {\n diffDate: function (d, more = false) {\n const dateNow = new Date();\n const datePost = new Date(d);\n const dateDiff = dateNow.getTime() - datePost.getTime();\n const minute = 1000 * 60;\n const hour = minute * 60;\n const day = hour * 24;\n const month = day * 30;\n\n let result;\n if (more) {\n const monthCount = dateDiff \u002F month;\n const dayCount = dateDiff \u002F day;\n const hourCount = dateDiff \u002F hour;\n const minuteCount = dateDiff \u002F minute;\n\n if (monthCount >= 1) {\n result = datePost.toLocaleDateString().replace(\u002F\\\u002F\u002Fg, \"-\");\n } else if (dayCount >= 1) {\n result = parseInt(dayCount) + \" \" + GLOBAL_CONFIG.date_suffix.day;\n } else if (hourCount >= 1) {\n result = parseInt(hourCount) + \" \" + GLOBAL_CONFIG.date_suffix.hour;\n } else if (minuteCount >= 1) {\n result = parseInt(minuteCount) + \" \" + GLOBAL_CONFIG.date_suffix.min;\n } else {\n result = GLOBAL_CONFIG.date_suffix.just;\n }\n } else {\n result = parseInt(dateDiff \u002F day);\n }\n return result;\n },\n changeTimeInEssay: function () {\n document.querySelector(\"#bber\") &&\n document.querySelectorAll(\"#bber time\").forEach(function (e) {\n var t = e,\n datetime = t.getAttribute(\"datetime\");\n (t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = \"inline\");\n });\n },\n reflashEssayWaterFall: function () {\n document.querySelector(\"#waterfall\") &&\n setTimeout(function () {\n waterfall(\"#waterfall\");\n document.getElementById(\"waterfall\").classList.add(\"show\");\n }, 500);\n },\n commentText: function (e) {\n if (e == \"undefined\" || e == \"null\") e = \"好棒！\";\n var n = document.getElementsByClassName(\"el-textarea__inner\")[0],\n t = document.createEvent(\"HTMLEvents\");\n if (!n) return;\n t.initEvent(\"input\", !0, !0);\n var o = replaceAll(e, \"\\n\", \"\\n> \");\n (n.value = \"> \" + o + \"\\n\\n\"), n.dispatchEvent(t);\n var i = document.querySelector(\"#post-comment\").offsetTop;\n window.scrollTo(0, i - 80),\n n.focus(),\n n.setSelectionRange(-1, -1),\n document.getElementById(\"comment-tips\") && document.getElementById(\"comment-tips\").classList.add(\"show\");\n },\n};\n\nanzhiyu.changeTimeInEssay();\nanzhiyu.reflashEssayWaterFall();\n",[231,1168,1166],{"__ignoreMap":229},[14,1170,1171],{},"其中anzhiyu变量中存储的四个方法",[49,1173,1174,1188],{},[52,1175,1176],{},[55,1177,1178,1183],{},[58,1179,1180],{},[61,1181,1182],{},"变量",[58,1184,1185],{},[61,1186,1187],{},"变量特点",[81,1189,1190,1200,1210,1220],{},[55,1191,1192,1197],{},[86,1193,1194],{},[61,1195,1196],{},"diffDate",[86,1198,1199],{},"为处理时间的方法,其实 btf 中也有,只是不太喜欢那个的显示方式,就改成现在这个了。",[55,1201,1202,1207],{},[86,1203,1204],{},[61,1205,1206],{},"changeTimeInEssay",[86,1208,1209],{},"初始化即刻时间",[55,1211,1212,1217],{},[86,1213,1214],{},[61,1215,1216],{},"reflashEssayWaterFall",[86,1218,1219],{},"处理瀑布流显示",[55,1221,1222,1227],{},[86,1223,1224],{},[61,1225,1226],{},"commentText",[86,1228,1229],{},"处理点击跳转评论并添加评论",[14,1231,1232],{},"方法essayScroll为检查滚动条卷去一个视口高度的 100 范围内执行一次, 滑动到底部或评论区取消监听执行。此处博主未做 else 处理取消监听, 如果有写percent函数监听滑动可以一起写在同一个方法里面。（博主就是写在同一个方法里面）, 如果即刻文章很少的话其实是可以不监听滑动的, 即只显示近 30 条, 因为进入页面后会执行一次瀑布流, 页面不会乱, 但是如果您把 essay.pug 中 17 行左右修改后可以达到无限的效果就会出现 dom 结构还没渲染瀑布流就已经执行完了的情况就需要监听滚动来再次执行瀑布流以完成布局。",[45,1234,1236],{"id":1235},"首页滚动显示即刻可选","首页滚动显示即刻(可选)",[14,1238,1239],{},"创建 themes\u002Fbutterfly\u002Flayout\u002Fincludes\u002FbbTimeList.pug, 部分fontawesome图标可能需要您自行修改。",[223,1241,1244],{"className":1242,"code":1243,"language":247,"meta":248},[245],"#bbTimeList.bbTimeList.container\n svg.icon.bber-logo.iconfont.icon-chrome(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`,title=\"即刻短文\",aria-hidden=\"true\")\n use(xlink:href=\"#icon-chrome\")\n #bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container(tabindex=\"-1\")\n #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`)\n each i in site.data.essay\n each item, index in i.essay_list\n if index \u003C 10\n - var contentText = item.image ? item.content + ' [图片]' : item.content\n .li-style.swiper-slide= contentText\n\n i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl(\"\u002Fessay\u002F\")`,title=\"查看全文\")\n",[231,1245,1243],{"__ignoreMap":229},[45,1247,1248],{"id":1248},"引入到主页",[14,1250,1251],{},"修改themes\u002Fbutterfly\u002Flayout\u002Findex.pug, 注意缩进",[223,1253,1256],{"className":1254,"code":1255,"language":247,"meta":248},[245],"block content\n include .\u002Fincludes\u002Fmixins\u002Fpost-ui.pug\n #recent-posts.recent-posts\n include includes\u002FcategoryList.pug\n+ include includes\u002FbbTimeList.pug\n +postUI\n include includes\u002Fpagination.pug\n",[231,1257,1255],{"__ignoreMap":229},[14,1259,1260],{},"如果需要像本站一样在整个顶部引入的话可以参考下面的代码，修改themes\u002Fbutterfly\u002Flayout\u002Fincludes\u002Flayout.pug",[223,1262,1265],{"className":1263,"code":1264,"language":247,"meta":248},[245],"if page.type !== '404'\n #body-wrap(class=pageType)\n include .\u002Fheader\u002Findex.pug\n+ if (is_home())\n+ include .\u002FbbTimeList.pug\n",[231,1266,1264],{"__ignoreMap":229},[45,1268,1270],{"id":1269},"引入-swiper-依赖","引入 swiper 依赖",[14,1272,1273],{},"在_config.butterfly.yml引入依赖, 如果有使用轮播图插件的话此处无需引入",[223,1275,1278],{"className":1276,"code":1277,"language":307,"meta":229},[305],"inject:\n head:\n - \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fnpm.elemecdn.com\u002Fhexo-butterfly-swiper-anzhiyu@1.0.4\u002Flib\u002Fswiper.min.css\">\n bottom:\n - \u003Cscript data-pjax src=\"https:\u002F\u002Fnpm.elemecdn.com\u002Fanzhiyu-blog@1.1.6\u002Fjs\u002Fswiper.min.js\">\u003C\u002Fscript>\n",[231,1279,1277],{"__ignoreMap":229},[45,1281,1283],{"id":1282},"添加自定义-css","添加自定义 css",[14,1285,1286],{},"创建source\u002Fcss\u002Fessay_page\u002Fhome_essay_bar.css, 然后在_config.butterfly.yml中的inject下的head引入, 注意缩进",[223,1288,1291],{"className":1289,"code":1290,"language":307,"meta":229},[305],"inject:\n head:\n - \u003Clink rel=\"stylesheet\" href=\"\u002Fcss\u002Fessay_page\u002Fhome_essay_bar.css\">\n",[231,1292,1290],{"__ignoreMap":229},[223,1294,1297],{"className":1295,"code":1296,"language":335,"meta":229},[333],"#bbTimeList {\n background: var(--anzhiyu-white);\n color: var(--anzhiyu-fontcolor);\n padding: 0.5rem 1rem;\n border-radius: 30px;\n box-shadow: var(--anzhiyu-shadow-lightblack);\n display: flex;\n transition: all 0.3s ease 0s;\n margin: 1rem auto 0;\n border: var(--style-border);\n align-items: center;\n height: 50px;\n width: 100%;\n}\n[data-theme=\"dark\"] #bbTimeList {\n background: #000 !important;\n}\n#bbtalk {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n#bber-talk {\n width: 100%;\n height: 25px;\n line-height: 25px;\n display: flex;\n flex-direction: column;\n}\n.bber-logo {\n font-size: 1.5rem;\n line-height: 22px;\n margin-right: 1rem;\n transition: all 0.3s ease 0s;\n cursor: pointer;\n}\n\n.bber-gotobb {\n line-height: 25px;\n margin-left: 1rem;\n transition: all 0.3s ease 0s;\n cursor: pointer;\n}\n\n#bber-talk .li-style {\n width: 100%;\n max-width: 100%;\n height: 25px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n font-weight: 700;\n margin: auto;\n cursor: pointer;\n white-space: nowrap;\n}\n\n#bbTimeList:hover {\n border: var(--style-border-hover);\n box-shadow: var(--anzhiyu-shadow-main);\n}\n\n\u002F* 文章页H1-H6图标样式效果 *\u002F\n.bbTimeList .bber-logo {\n -webkit-animation: rotate 1.6s linear infinite;\n animation: rotate 1.6s linear infinite;\n}\n@-webkit-keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(-1turn);\n transform: rotate(-1turn);\n }\n}\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(-1turn);\n transform: rotate(-1turn);\n }\n}\n",[231,1298,1296],{"__ignoreMap":229},[45,1300,1302],{"id":1301},"修改自定义-js","修改自定义 js",[14,1304,1305],{},"修改custom.js",[223,1307,1310],{"className":1308,"code":1309,"language":361,"meta":229},[359],"var percentFlag = false; \u002F\u002F 节流阀\nfunction essayScroll() {\n let a = document.documentElement.scrollTop || window.pageYOffset; \u002F\u002F 卷去高度\n const waterfallResult = a % document.documentElement.clientHeight; \u002F\u002F 卷去一个视口\n result \u003C= 99 || (result = 99);\n\n if (\n !percentFlag &&\n waterfallResult + 100 >= document.documentElement.clientHeight &&\n document.querySelector(\"#waterfall\")\n ) {\n \u002F\u002F console.info(waterfallResult, document.documentElement.clientHeight);\n setTimeout(() => {\n waterfall(\"#waterfall\");\n }, 500);\n } else {\n setTimeout(() => {\n document.querySelector(\"#waterfall\") && waterfall(\"#waterfall\");\n }, 500);\n }\n\n const r = window.scrollY + document.documentElement.clientHeight;\n\n let p = document.getElementById(\"post-comment\") || document.getElementById(\"footer\");\n\n (p.offsetTop + p.offsetHeight \u002F 2 \u003C r || 90 \u003C result) && (percentFlag = true);\n}\nfunction replaceAll(e, n, t) {\n return e.split(n).join(t);\n}\nvar anzhiyu = {\n diffDate: function (d, more = false) {\n const dateNow = new Date();\n const datePost = new Date(d);\n const dateDiff = dateNow.getTime() - datePost.getTime();\n const minute = 1000 * 60;\n const hour = minute * 60;\n const day = hour * 24;\n const month = day * 30;\n\n let result;\n if (more) {\n const monthCount = dateDiff \u002F month;\n const dayCount = dateDiff \u002F day;\n const hourCount = dateDiff \u002F hour;\n const minuteCount = dateDiff \u002F minute;\n\n if (monthCount >= 1) {\n result = datePost.toLocaleDateString().replace(\u002F\\\u002F\u002Fg, \"-\");\n } else if (dayCount >= 1) {\n result = parseInt(dayCount) + \" \" + GLOBAL_CONFIG.date_suffix.day;\n } else if (hourCount >= 1) {\n result = parseInt(hourCount) + \" \" + GLOBAL_CONFIG.date_suffix.hour;\n } else if (minuteCount >= 1) {\n result = parseInt(minuteCount) + \" \" + GLOBAL_CONFIG.date_suffix.min;\n } else {\n result = GLOBAL_CONFIG.date_suffix.just;\n }\n } else {\n result = parseInt(dateDiff \u002F day);\n }\n return result;\n },\n changeTimeInEssay: function () {\n document.querySelector(\"#bber\") &&\n document.querySelectorAll(\"#bber time\").forEach(function (e) {\n var t = e,\n datetime = t.getAttribute(\"datetime\");\n (t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = \"inline\");\n });\n },\n reflashEssayWaterFall: function () {\n document.querySelector(\"#waterfall\") &&\n setTimeout(function () {\n waterfall(\"#waterfall\");\n document.getElementById(\"waterfall\").classList.add(\"show\");\n }, 500);\n },\n commentText: function (txt) {\n const postCommentDom = document.querySelector(\"#post-comment\");\n var domTop = postCommentDom.offsetTop;\n window.scrollTo(0, domTop - 80);\n if (txt == \"undefined\" || txt == \"null\") txt = \"好棒！\";\n function setText() {\n setTimeout(() => {\n var input = document.getElementsByClassName(\"el-textarea__inner\")[0];\n if (!input) setText();\n let evt = document.createEvent(\"HTMLEvents\");\n evt.initEvent(\"input\", true, true);\n let inputValue = replaceAll(txt, \"\\n\", \"\\n> \");\n input.value = \"> \" + inputValue + \"\\n\\n\";\n input.dispatchEvent(evt);\n input.focus();\n input.setSelectionRange(-1, -1);\n if (document.getElementById(\"comment-tips\")) {\n document.getElementById(\"comment-tips\").classList.add(\"show\");\n }\n }, 100);\n }\n setText();\n },\n initIndexEssay: function () {\n setTimeout(() => {\n let essay_bar_swiper = new Swiper(\".essay_bar_swiper_container\", {\n passiveListeners: true,\n direction: \"vertical\",\n loop: true,\n autoplay: {\n disableOnInteraction: true,\n delay: 3000,\n },\n mousewheel: true,\n });\n\n let essay_bar_comtainer = document.getElementById(\"bbtalk\");\n if (essay_bar_comtainer !== null) {\n essay_bar_comtainer.onmouseenter = function () {\n essay_bar_swiper.autoplay.stop();\n };\n essay_bar_comtainer.onmouseleave = function () {\n essay_bar_swiper.autoplay.start();\n };\n }\n }, 100);\n },\n};\n\nanzhiyu.initIndexEssay();\nanzhiyu.changeTimeInEssay();\nanzhiyu.reflashEssayWaterFall();\n",[231,1311,1309],{"__ignoreMap":229},{"title":229,"searchDepth":1313,"depth":1313,"links":1314},4,[1315,1317,1330,1340],{"id":12,"depth":1316,"text":12},2,{"id":39,"depth":1316,"text":40,"children":1318},[1319,1321],{"id":47,"depth":1320,"text":47},3,{"id":205,"depth":1320,"text":205,"children":1322},[1323,1328,1329],{"id":209,"depth":1313,"text":209,"children":1324},[1325,1327],{"id":213,"depth":1326,"text":213},5,{"id":235,"depth":1326,"text":235},{"id":395,"depth":1313,"text":395},{"id":435,"depth":1313,"text":436},{"id":515,"depth":1316,"text":516,"children":1331},[1332,1333,1334,1335,1336,1337,1338,1339],{"id":519,"depth":1320,"text":519},{"id":594,"depth":1320,"text":209},{"id":606,"depth":1320,"text":606},{"id":694,"depth":1320,"text":694},{"id":706,"depth":1320,"text":706},{"id":718,"depth":1320,"text":719},{"id":733,"depth":1320,"text":734},{"id":746,"depth":1320,"text":734},{"id":796,"depth":1316,"text":797,"children":1341},[1342,1343,1344,1345,1346,1347,1348,1349,1350,1351,1352,1353,1354,1355],{"id":800,"depth":1320,"text":47},{"id":906,"depth":1320,"text":906},{"id":917,"depth":1320,"text":209},{"id":929,"depth":1320,"text":929},{"id":1077,"depth":1320,"text":1078},{"id":1090,"depth":1320,"text":1091},{"id":1103,"depth":1320,"text":1104},{"id":1116,"depth":1320,"text":1117},{"id":1135,"depth":1320,"text":1136},{"id":1235,"depth":1320,"text":1236},{"id":1248,"depth":1320,"text":1248},{"id":1269,"depth":1320,"text":1270},{"id":1282,"depth":1320,"text":1283},{"id":1301,"depth":1320,"text":1302},[1357],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）",false,"md",null,{"cover":1364,"slots":1365},"https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_55.avif",{},true,"\u002F2023\u002F03\u002Fessaythree",{"text":1369,"minutes":1370,"time":1371,"words":1372},"48 min read",47.34,2840400,9468,{"title":5,"description":1359},{"loc":1367},"posts\u002F2023\u002F03\u002FessayThree",[1377,1378,1379],"hexo","butterfly","美化","tech","2023-12-07 14:09:00","JJ2DMjhrGz9yqHzyIiKmk4fSpZTZtD-vUlrfFrybx2M",[1384,1388,1404,1418,1432,1445,1458,1470,1484,1496,1507,1521,1536,1550,1562,1579,1593,1607,1621,1635,1649,1665,1682,1698,1710,1724,1738,1750,1764,1776,1786,1798,1810,1822,1835,1844],{"categories":1385,"date":1358,"description":1359,"image":1362,"path":1367,"readingTime":1386,"recommend":1362,"tags":1387,"title":5,"type":1380,"updated":1381},[1357],{"text":1369,"minutes":1370,"time":1371,"words":1372},[1377,1378,1379],{"categories":1389,"date":1391,"description":1392,"image":1393,"path":1394,"readingTime":1395,"recommend":1400,"tags":1401,"title":1402,"type":1380,"updated":1403},[1390],"站点魔改","2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":1396,"minutes":1397,"time":1398,"words":1399},"11 min read",10.8,648000,2160,1,[1377,1378],"友链魔改","2025-04-19 12:09:00",{"categories":1405,"date":1406,"description":1407,"image":1408,"path":1409,"readingTime":1410,"recommend":1400,"tags":1415,"title":1416,"type":1380,"updated":1417},[1390],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":1411,"minutes":1412,"time":1413,"words":1414},"9 min read",8.585,515100,1717,[1377,1378],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":1419,"date":1420,"description":1421,"image":1422,"path":1423,"readingTime":1424,"recommend":1400,"tags":1429,"title":1430,"type":1380,"updated":1431},[1390],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":1425,"minutes":1426,"time":1427,"words":1428},"4 min read",3.31,198600,662,[1377,1378,1379],"轻笑底部美化","2025-02-28 10:00:00",{"categories":1433,"date":1434,"description":1435,"image":1436,"path":1437,"readingTime":1438,"recommend":1362,"tags":1442,"title":1443,"type":1380,"updated":1444},[1390],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":1425,"minutes":1439,"time":1440,"words":1441},3.08,184800,616,[1377,1378],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":1446,"date":1447,"description":1448,"image":1449,"path":1450,"readingTime":1451,"recommend":1362,"tags":1455,"title":1456,"type":1380,"updated":1457},[1390],"2025-03-05 08:00:00","这篇文章讲述如何给自己博客中的归档、分类、标签页三个页面的文章卡片添加数字来进行编排，以及对添加的数字进行CSS美化，但也请注意要经常备份以免出现错误。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_29.avif?v=20260104","\u002F2025\u002F03\u002Fartice-sort",{"text":1425,"minutes":1452,"time":1453,"words":1454},3.48,208800,696,[1377,1378],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":1459,"date":1447,"description":1460,"image":1461,"path":1462,"readingTime":1463,"recommend":1362,"tags":1468,"title":1469,"type":1380,"updated":1457},[1390],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":1464,"minutes":1465,"time":1466,"words":1467},"1 min read",0.71,42600,142,[1377,1378],"轻笑风格背景",{"categories":1471,"date":1472,"description":1473,"image":1474,"path":1475,"readingTime":1476,"recommend":1362,"tags":1481,"title":1482,"type":1380,"updated":1483},[1390],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":1477,"minutes":1478,"time":1479,"words":1480},"24 min read",23.275,1396500,4655,[1377,1378],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":1485,"date":1447,"description":1486,"image":1487,"path":1488,"readingTime":1489,"recommend":1362,"tags":1494,"title":1495,"type":1380,"updated":1457},[1390],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":1490,"minutes":1491,"time":1492,"words":1493},"5 min read",4.77,286200,954,[1377,1378],"卡片美化",{"categories":1497,"date":1447,"description":1498,"image":1499,"path":1500,"readingTime":1501,"recommend":1362,"tags":1505,"title":1506,"type":1380,"updated":1457},[1390],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":1464,"minutes":1502,"time":1503,"words":1504},0.345,20700,69,[1377,1378],"功能美化",{"categories":1508,"date":1509,"description":1510,"image":1511,"path":1512,"readingTime":1513,"recommend":1362,"tags":1518,"title":1519,"type":1380,"updated":1520},[1390],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":1514,"minutes":1515,"time":1516,"words":1517},"6 min read",5.595,335700,1119,[1377,1378,1379],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":1522,"date":1523,"description":1524,"image":1525,"path":1526,"readingTime":1527,"recommend":1400,"tags":1531,"title":1534,"type":1380,"updated":1535},[1390],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":1411,"minutes":1528,"time":1529,"words":1530},8.88,532800,1776,[1532,1533,1379],"Nuxt","魔改","在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":1537,"date":1538,"description":1539,"image":1540,"path":1541,"readingTime":1542,"recommend":1400,"tags":1547,"title":1548,"type":1380,"updated":1549},[1390],"2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif","\u002F2025\u002F08\u002Fnuxtaboutpage",{"text":1543,"minutes":1544,"time":1545,"words":1546},"16 min read",15.92,955200,3184,[1532,1533,1379],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":1551,"date":1552,"description":1553,"image":1554,"path":1555,"readingTime":1556,"recommend":1400,"tags":1560,"title":1561,"type":1380,"updated":1549},[1390],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":1490,"minutes":1557,"time":1558,"words":1559},4.38,262800,876,[1532,1533,1379],"添加站点详情页面",{"categories":1563,"date":1565,"description":1566,"image":1567,"path":1568,"readingTime":1569,"recommend":1400,"tags":1573,"title":1576,"type":1577,"updated":1578},[1564],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":1425,"minutes":1570,"time":1571,"words":1572},3.855,231300,771,[1574,1575],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":1580,"date":1581,"description":1582,"image":1583,"path":1584,"readingTime":1585,"recommend":1400,"tags":1590,"title":1591,"type":1380,"updated":1592},[1390],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":1586,"minutes":1587,"time":1588,"words":1589},"23 min read",22.175,1330500,4435,[1532,1533,1379],"添加追更历史","2025-12-01 20:49:00",{"categories":1594,"date":1595,"description":1596,"image":1597,"path":1598,"readingTime":1599,"recommend":1400,"tags":1604,"title":1605,"type":1380,"updated":1606},[1390],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":1600,"minutes":1601,"time":1602,"words":1603},"32 min read",31.72,1903200,6344,[1532,1533,1379],"评论优化","2026-03-01 20:49:00",{"categories":1608,"date":1609,"description":1610,"image":1611,"path":1612,"readingTime":1613,"recommend":1400,"tags":1618,"title":1619,"type":1380,"updated":1620},[1390],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":1614,"minutes":1615,"time":1616,"words":1617},"8 min read",7.28,436800,1456,[1532,1533,1379],"添加装备页面","2025-12-03 20:49:09",{"categories":1622,"date":1623,"description":1624,"image":1625,"path":1626,"readingTime":1627,"recommend":1400,"tags":1632,"title":1633,"type":1380,"updated":1634},[1390],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":1628,"minutes":1629,"time":1630,"words":1631},"12 min read",11.165,669900,2233,[1532,1533,1379],"文章美化","2025-12-09 20:49:00",{"categories":1636,"date":1637,"description":1638,"image":1639,"path":1640,"readingTime":1641,"recommend":1400,"tags":1646,"title":1647,"type":1380,"updated":1648},[1390],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":1642,"minutes":1643,"time":1644,"words":1645},"10 min read",9.745,584700,1949,[1532,1533,1379],"侧边组件美化","2025-12-04 20:49:00",{"categories":1650,"date":1651,"description":1652,"image":1653,"path":1654,"readingTime":1655,"recommend":1400,"tags":1660,"title":1663,"type":1380,"updated":1664},[1390],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":1656,"minutes":1657,"time":1658,"words":1659},"14 min read",13.155,789300,2631,[1661,1662],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":1666,"date":1667,"description":1668,"image":1669,"path":1670,"readingTime":1671,"recommend":1400,"tags":1676,"title":1680,"type":1380,"updated":1681},[1357],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":1672,"minutes":1673,"time":1674,"words":1675},"3 min read",2.72,163200,544,[1677,1678,1679],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":1683,"date":1684,"description":1685,"image":1686,"path":1687,"readingTime":1688,"recommend":1400,"tags":1693,"title":1696,"type":1380,"updated":1697},[1357],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":1689,"minutes":1690,"time":1691,"words":1692},"7 min read",6.86,411600,1372,[1694,1695],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":1699,"date":1700,"description":1638,"image":1701,"path":1702,"readingTime":1703,"recommend":1400,"tags":1707,"title":1708,"type":1380,"updated":1709},[1390],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":1672,"minutes":1704,"time":1705,"words":1706},2.15,129000,430,[1532,1533,1379],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":1711,"date":1712,"description":1713,"image":1714,"path":1715,"readingTime":1716,"recommend":1400,"tags":1721,"title":1722,"type":1577,"updated":1723},[1390],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":1717,"minutes":1718,"time":1719,"words":1720},"2 min read",1.82,109200,364,[1532,1533,1379],"站点资源优化","2026-01-07 20:49:00",{"categories":1725,"date":1727,"description":1728,"image":1729,"path":1730,"readingTime":1731,"recommend":1400,"tags":1735,"title":1736,"type":1380,"updated":1737},[1726],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":1543,"minutes":1732,"time":1733,"words":1734},15.545,932700,3109,[1532,1533,1379],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":1739,"date":1740,"description":1741,"image":1729,"path":1742,"readingTime":1743,"recommend":1400,"tags":1747,"title":1748,"type":1380,"updated":1749},[1726],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":1656,"minutes":1744,"time":1745,"words":1746},13.965,837900,2793,[1532,1533,1379],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":1751,"date":1752,"description":1753,"image":1754,"path":1755,"readingTime":1756,"recommend":1400,"tags":1761,"title":1762,"type":1380,"updated":1763},[1390],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":1757,"minutes":1758,"time":1759,"words":1760},"100 min read",99.23,5953800,19846,[1532,1533,1379],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":1765,"date":1766,"description":1728,"image":1767,"path":1768,"readingTime":1769,"recommend":1400,"tags":1773,"title":1774,"type":1380,"updated":1775},[1357],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":1411,"minutes":1770,"time":1771,"words":1772},8.91,534600,1782,[1532,1533,1379],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":1777,"date":1766,"description":1728,"image":1778,"path":1779,"readingTime":1780,"recommend":1400,"tags":1784,"title":1785,"type":1380,"updated":1775},[1390],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":1672,"minutes":1781,"time":1782,"words":1783},2.47,148200,494,[1532,1533,1379],"【精简】测试老MAC性能",{"categories":1787,"date":1788,"description":1728,"image":1789,"path":1790,"readingTime":1791,"recommend":1400,"tags":1795,"title":1796,"type":1380,"updated":1797},[1390],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":1411,"minutes":1792,"time":1793,"words":1794},8.19,491400,1638,[1532,1533,1379],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":1799,"date":1800,"description":1728,"image":1801,"path":1802,"readingTime":1803,"recommend":1400,"tags":1807,"title":1808,"type":1380,"updated":1809},[1390],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":1425,"minutes":1804,"time":1805,"words":1806},3.235,194100,647,[1532,1533,1379],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":1811,"date":1812,"description":1728,"image":1801,"path":1813,"readingTime":1814,"recommend":1400,"tags":1819,"title":1820,"type":1380,"updated":1821},[1390],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":1815,"minutes":1816,"time":1817,"words":1818},"18 min read",17.265,1035900,3453,[1532,1533,1379],"游戏展示页面","2026-03-22 10:00:00",{"categories":1823,"date":1825,"description":1566,"image":1826,"path":1827,"readingTime":1828,"recommend":1400,"tags":1832,"title":1833,"type":1577,"updated":1834},[1824],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":1717,"minutes":1829,"time":1830,"words":1831},1.31,78600,262,[1574,1575],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":1836,"date":1825,"description":1566,"image":1826,"path":1837,"readingTime":1838,"recommend":1400,"tags":1842,"title":1843,"type":1577,"updated":1834},[1824],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":1689,"minutes":1839,"time":1840,"words":1841},6.295,377700,1259,[1574,1575],"世界志：仙神界",{"categories":1845,"date":1825,"description":1566,"image":1826,"path":1846,"readingTime":1847,"recommend":1400,"tags":1851,"title":1852,"type":1577,"updated":1834},[1824],"\u002Fnovel\u002Fworld\u002Fdh",{"text":1717,"minutes":1848,"time":1849,"words":1850},1.65,99000,330,[1574,1575],"世界志：大荒",[1362,1854],{"title":1402,"path":1394,"stem":1855,"date":1391,"type":1380,"children":-1},"posts\u002F2024\u002F04\u002FflinkPageMeihua",1775291814314]