AI正在绞尽脑汁想思路ING···

BiのAI摘要

HunYuan-Lite

又开始折腾啦，这次把说说页面加上，改用moments项目的api

🪧引用站外地址，不保证站点的可用性和安全性

Moments 极简朋友圈

githun@kingwrcy

+ +

前期要求

硬件要求

一台服务器
一个可自主解析的域名

软件要求

docker环境
反向代理工具（本文以Nginx为例）

介绍与展示

这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改：

说说页面：
+
✅来自本站，本站可确保其安全性，请放心点击跳转
+
+
+
+
我的说说
+
胡言乱语ing。。。
+
+ +
+
轻量朋友圈
+
🪧引用站外地址，不保证站点的可用性和安全性
+
+
+
+
朋友圈
+
依旧胡言乱语
+
+ +
+
功能说明

Moments作为一个轻量朋友圈，其功能都是分享上的部分，如下所示：

分享：链接，图片，音乐，视频，书籍，电影
信息：自定义位置，自定义标签，是否公开
页面：Markdown渲染，编辑说说，删除说说，暗夜模式，自定义图标，信息，CSS及JS代码
功能：S3存储，文件查询，多用户注册，点赞，评论，API

简单介绍完毕，下面我就来教大家如何进行部署！

部署教程

Moments部署

Compose部署

官方给予了很完善的教程，这里我仅仅简单介绍一下 docker-compose部署的方式，如果你想以源码等其他方式进行部署，请查看文章开头部分的 github地址进行查阅。

首先，在服务器任意位置创建文件：docker-compose.yaml，填入以下内容：

version: '3'
services:
  moments:
    image: kingwrcy/moments:latest
    container_name: moments
    restart: always
    environment:
      port: 3000
      JWT_KEY: "自己随便生成点字符串"
      ENABLE_SWAGGER: "true"
      CORS_ORIGIN: # 填写跨域域名
    ports:
      - "3000:3000"  # 自行换端口，换前面的，后面的3000不要动
    volumes:
      - ./opt/data:/app/data
    #   - ./data/localtime:/etc/localtime:ro
    #   - ./data/timezone:/etc/timezone:ro

+ +

注意文件，我将 /opt/文件夹(当然可以改成其他的)下的 /data文件夹挂载了进去，数据都会在里面，迁移时仅需整体打包到新服务器即可。然后执行以下两条命令，后续需要升级也仅需要执行这两个命令：

1 2	docker-compose pull docker-compose up -d

+ +

如果网络环境不佳，可尝试替换 docker源，可以自行查找

通过反向代理将其添加到某个域名中，这里就不再多说了，各大面板都有极其完备的反代文档。

Nginx修改

Moments在跨域 docker-compose文件中可以配置，所以不必进行此步

网站目录

返回到上一级目录，也就是域名名称的文件夹下，找到 Proxy文件夹，编辑里面的 root.conf文件为如下内容：

#代理配置

location / {
    # 跨域设置
    add_header Access-Control-Allow-Origin *;  # 允许所有域名访问，你也可以指定具体域名
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';  # 允许的 HTTP 方法
    add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';  # 允许的请求头

    # 处理 OPTIONS 请求，预检请求
    if ($request_method = 'OPTIONS') {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
        add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
        add_header Access-Control-Max-Age 1728000;
        add_header Content-Type 'text/plain charset=UTF-8';
        add_header Content-Length 0;
        return 204;
    }

    # 原代理设置
    proxy_pass http://127.0.0.1:3003;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    add_header X-Cache $upstream_cache_status;
    add_header Cache-Control no-cache;
    proxy_ssl_server_name off;
    proxy_ssl_name $proxy_host;
    add_header Strict-Transport-Security "max-age=31536000";
}

+ +

下面是原代理设置，可以仅仅复制上面部分内容，下面保持不变，注意端口不要出问题。

前端实现

由于该项目利用了MetingJS和APlayer，所以请提前引入这两个包，Hexo-theme-butterfly中虽然有内置的两个包，仅需修改配置文件即可开启，但是版本比较老，这里我建议自行引入最新版本，在配置中引入以下文件，注意css和js应该是分开引入的：

1
2
3

<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="all" onload="this.media="all"">
<script src="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>

+ +

新建页面shuoshuo，在文件内写入一下内容：

---
title: 日常哔哔，键盘侠的日常吐槽
aside: false
---
<div id="talk"></div>
<div class="limit">- 只展示最近30条说说 -</div>
<script src="/js/shuoshuo.js" no-pjax></script>

+ +

其中的JS文件地址清自行修改，放在主题目录 /script/目录，自行创建，并写入以下内容：

function renderTalks() {
    const talkContainer = document.querySelector('#talk');
    const domain = 'https://mm.biss.click'; 
    if (!talkContainer) return;
    talkContainer.innerHTML = '';
    const generateIconSVG = () => {
        return `<svg viewBox="0 0 512 512"xmlns="http://www.w3.org/2000/svg"class="is-badge icon"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z"fill="#1da1f2"></path></svg>`;
    }
    const waterfall = (a) => {
        function b(a, b) {
            var c = window.getComputedStyle(b);
            return parseFloat(c["margin" + a]) || 0
        }

        function c(a) {
            return a + "px"
        }

        function d(a) {
            return parseFloat(a.style.top)
        }

        function e(a) {
            return parseFloat(a.style.left)
        }

        function f(a) {
            return a.clientWidth
        }

        function g(a) {
            return a.clientHeight
        }

        function h(a) {
            return d(a) + g(a) + b("Bottom", a)
        }

        function i(a) {
            return e(a) + f(a) + b("Right", a)
        }

        function j(a) {
            a = a.sort(function (a, b) {
                return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
            })
        }

        function k(b) {
            f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
        }
        "string" == typeof a && (a = document.querySelector(a));
        var l = [].map.call(a.children, function (a) {
            return a.style.position = "absolute", a
        });
        a.style.position = "relative";
        var m = [];
        l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
        for (var n = 1; n < l.length; n++) {
            var o = l[n - 1],
                p = l[n],
                q = i(o) + f(p) <= f(a);
            if (!q) break;
            p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
        }
        for (; n < l.length; n++) {
            j(m);
            var p = l[n],
                r = m.pop();
            p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
        }
        j(m);
        var s = m[0];
        a.style.height = c(h(s) + b("Bottom", s));
        var t = f(a);
        window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
    };

    const fetchAndRenderTalks = () => {
        const url = 'https://mm.biss.click/api/memo/list';
        const cacheKey = 'talksCache';
        const cacheTimeKey = 'talksCacheTime';
        const cacheDuration = 30 * 60 * 1000; // 半个小时 (30 分钟)
  
        const cachedData = localStorage.getItem(cacheKey);
        const cachedTime = localStorage.getItem(cacheTimeKey);
        const currentTime = new Date().getTime();
  
        // 判断缓存是否有效
        if (cachedData && cachedTime && (currentTime - cachedTime < cacheDuration)) {
            const data = JSON.parse(cachedData);
            renderTalks(data); // 使用缓存渲染数据
        } else {
            if (talkContainer) {
                talkContainer.innerHTML = '';
                fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            size: 30
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.code === 0 && data.data && Array.isArray(data.data.list)) {
                            // 缓存数据
                            localStorage.setItem(cacheKey, JSON.stringify(data.data.list));
                            localStorage.setItem(cacheTimeKey, currentTime.toString());
                            renderTalks(data.data.list); // 渲染数据
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            }
        }
  
        // 渲染函数
        function renderTalks(list) {
            // 确保 data 是一个数组
            if (Array.isArray(list)) {
                let items = list.map(item => formatTalk(item, url));
                items.forEach(item => talkContainer.appendChild(generateTalkElement(item)));
                waterfall('#talk');
            } else {
                console.error('Data is not an array:', list);
            }
        }
    };
  

    const formatTalk = (item, url) => {
        let date = formatTime(new Date(item.createdAt).toString());
        let content = item.content;
        let imgs = item.imgs ? item.imgs.split(',') : [];
        let text = content;
        content = text.replace(/\[(.*?)\]\((.*?)\)/g, `<a href="$2">@$1</a>`)
            .replace(/- \[ \]/g, '⚪')
            .replace(/- \[x\]/g, '⚫');
        // 保留换行符，转换 \n 为 <br>
		content = content.replace(/\n/g, '<br>');
        // 将content用一个类包裹，便于后续处理
        content = `<div class="talk_content_text">${content}</div>`;
        if (imgs.length > 0) {
            const imgDiv = document.createElement('div');
            imgDiv.className = 'zone_imgbox';
            imgs.forEach(e => {
                const imgLink = document.createElement('a');
                const imgUrl = domain + e;
                imgLink.href = imgUrl;
                imgLink.setAttribute('data-fancybox', 'gallery');
                imgLink.className = 'fancybox';
                imgLink.setAttribute('data-thumb', e);
                const imgTag = document.createElement('img');
                imgTag.src = domain + e;
                imgLink.appendChild(imgTag);
                imgDiv.appendChild(imgLink);
            });
            content += imgDiv.outerHTML;
        }

        // 外链分享功能
        if (item.externalUrl) {
            const externalUrl = item.externalUrl;
            const externalTitle = item.externalTitle;
            const externalFavicon = item.externalFavicon;

            const externalContainer = `
            <div class="shuoshuo-external-link">
                <a class="external-link" href="${externalUrl}" target="_blank" rel="external nofollow noopener noreferrer">
                    <div class="external-link-left" style="background-image: url(${externalFavicon})"></div>
                    <div class="external-link-right">
                        <div class="external-link-title">${externalTitle}</div>
                        <div>点击跳转<i class="fa-solid fa-angle-right"></i></div>
                    </div>
                </a>
            </div>`;

            content += externalContainer;
        }

        const ext = JSON.parse(item.ext || '{}');

        if (ext.music && ext.music.id) {
            const music = ext.music;
            const musicUrl = music.api.replace(':server', music.server)
                .replace(':type', music.type)
                .replace(':id', music.id);
            content += `
            <meting-js server="${music.server}" type="${music.type}" id="${music.id}" api="${music.api}"></meting-js>
        `;
        }

        if (ext.doubanMovie && ext.doubanMovie.id) {
            const doubanMovie = ext.doubanMovie;
            const doubanMovieUrl = doubanMovie.url;
            const doubanTitle = doubanMovie.title;
            // const doubanDesc = doubanMovie.desc || '暂无描述';
            const doubanImage = doubanMovie.image;
            const doubanDirector = doubanMovie.director || '未知导演';
            const doubanRating = doubanMovie.rating || '暂无评分';
            // const doubanReleaseDate = doubanMovie.releaseDate || '未知上映时间';
            // const doubanActors = doubanMovie.actors || '未知演员';
            const doubanRuntime = doubanMovie.runtime || '未知时长';

            content += `
                <a class="douban-card" href="${doubanMovieUrl}" target="_blank">
                    <div class="douban-card-bgimg" style="background-image: url('${doubanImage}');"></div>
                    <div class="douban-card-left">
                        <div class="douban-card-img" style="background-image: url('${doubanImage}');"></div>
                    </div>
                    <div class="douban-card-right">
                        <div class="douban-card-item"><span>电影名: </span><strong>${doubanTitle}</strong></div>
                        <div class="douban-card-item"><span>导演: </span><span>${doubanDirector}</span></div>
                        <div class="douban-card-item"><span>评分: </span><span>${doubanRating}</span></div>
                        <div class="douban-card-item"><span>时长: </span><span>${doubanRuntime}</span></div>
                    </div>
                </a>
            `;
        }

        if (ext.doubanBook && ext.doubanBook.id) {
            const doubanBook = ext.doubanBook;
            const bookUrl = doubanBook.url;
            const bookTitle = doubanBook.title;
            // const bookDesc = doubanBook.desc;
            const bookImage = doubanBook.image;
            const bookAuthor = doubanBook.author;
            const bookRating = doubanBook.rating;
            const bookPubDate = doubanBook.pubDate;

            const bookTemplate = `
                <a class="douban-card" href="${bookUrl}" target="_blank">
                    <div class="douban-card-bgimg" style="background-image: url('${bookImage}');"></div>
                        <div class="douban-card-left">
                            <div class="douban-card-img" style="background-image: url('${bookImage}');"></div>
                        </div>
                        <div class="douban-card-right">
                            <div class="douban-card-item">
                                <span>书名: </span><strong>${bookTitle}</strong>
                            </div>
                            <div class="douban-card-item">
                                <span>作者: </span><span>${bookAuthor}</span>
                            </div>
                            <div class="douban-card-item">
                                <span>出版年份: </span><span>${bookPubDate}</span>
                            </div>
                            <div class="douban-card-item">
                                <span>评分: </span><span>${bookRating}</span>
                            </div>
                        </div>
                </a>
            `;

            content += bookTemplate;
        }

        if (ext.video && ext.video.type) {
            const videoType = ext.video.type;
            const videoUrl = ext.video.value;
            if (videoType === 'bilibili') {
                // Bilibili 视频模板
                // 从形如https://www.bilibili.com/video/BV1VGAPeAEMQ/?vd_source=91b3158d27d98ff41f842508c3794a13 的链接中提取视频 BV1VGAPeAEMQ
                const biliTemplate = `
                <div style="position: relative; padding: 30% 45%; margin-top: 10px;">
                    <iframe 
                        style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 12px;" 
                        src="${videoUrl}&autoplay=0"
                        scrolling="no" 
                        frameborder="no" 
                        allowfullscreen>
                    </iframe>
                </div>
            `;
                // 将模板插入到 DOM 中
                content += biliTemplate;

            } else if (videoType === 'youtube') {
                // YouTube 视频模板
                // 从形如https://youtu.be/2V6lvCUPT8I?si=DVhUas6l6qlAr6Ru的链接中提取视频 ID2V6lvCUPT8I
                const youtubeTemplate = `
                <div style="position: relative; padding: 30% 45%; margin-top: 10px;">
                    <iframe width="100%"
                        style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 12px;"
                        src="${videoUrl}"
                        title="YouTube video player" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerpolicy="strict-origin-when-cross-origin" 
                        allowfullscreen>
                    </iframe>
                </div>
            `;
                // 将模板插入到 DOM 中
                content += youtubeTemplate;
            }
        }

        return {
            content: content,
            user: item.user.nickname || '匿名',
            avatar: item.user.avatarUrl || 'https://p.liiiu.cn/i/2024/03/29/66061417537af.png',
            date: date,
            location: item.location || '山西',
            tags: item.tags ? item.tags.split(',').filter(tag => tag.trim() !== '') : ['无标签'],
            text: content.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]' + `${imgs.length ? '[图片]' : ''}`)
        };
    };

    const generateTalkElement = (item) => {
        const talkItem = document.createElement('div');
        talkItem.className = 'talk_item';

        const talkMeta = document.createElement('div');
        talkMeta.className = 'talk_meta';

        const avatar = document.createElement('img');
        avatar.className = 'no-lightbox avatar';
        avatar.src = item.avatar;

        const info = document.createElement('div');
        info.className = 'info';

        const talkNick = document.createElement('span');
        talkNick.className = 'talk_nick';
        talkNick.innerHTML = `${item.user} ${generateIconSVG()}`;

        const talkDate = document.createElement('span');
        talkDate.className = 'talk_date';
        talkDate.textContent = item.date;

        const talkContent = document.createElement('div');
        talkContent.className = 'talk_content';
        talkContent.innerHTML = item.content;

        const talkBottom = document.createElement('div');
        talkBottom.className = 'talk_bottom';

        const TagContainer = document.createElement('div');

        const talkTag = document.createElement('span');
        talkTag.className = 'talk_tag';
        talkTag.textContent = `🏷️${item.tags}`;

        const locationTag = document.createElement('span');
        locationTag.className = 'location_tag';
        locationTag.textContent = `🌍${item.location}`;

        TagContainer.appendChild(talkTag);
        TagContainer.appendChild(locationTag);

        const commentLink = document.createElement('a');
        commentLink.href = 'javascript:;';
        commentLink.onclick = () => goComment(item.text);
        const commentIcon = document.createElement('span');
        commentIcon.className = 'icon';
        const commentIconInner = document.createElement('i');
        commentIconInner.className = 'fa-solid fa-message fa-fw';
        commentIcon.appendChild(commentIconInner);
        commentLink.appendChild(commentIcon);

        talkMeta.appendChild(avatar);
        info.appendChild(talkNick);
        info.appendChild(talkDate);
        talkMeta.appendChild(info);
        talkItem.appendChild(talkMeta);
        talkItem.appendChild(talkContent);
        talkBottom.appendChild(TagContainer);
        talkBottom.appendChild(commentLink);
        talkItem.appendChild(talkBottom);

        return talkItem;
    };

    const goComment = (e) => {
        const match = e.match(/<div class="talk_content_text">([\s\S]*?)<\/div>/);
        const textContent = match ? match[1] : "";
        const n = document.querySelector(".atk-textarea");
        n.value = `> ${textContent}\n\n`;
        n.focus();
        btf.snackbarShow("已为您引用该说说，不删除空格效果更佳");
        // const n = document.querySelector(".atk-textarea");
        // n.value = `> ${e}\n\n`;
        // n.focus();
        // btf.snackbarShow("已为您引用该说说，不删除空格效果更佳");
    };

    const formatTime = (time) => {
        const d = new Date(time);
        const ls = [
            d.getFullYear(),
            d.getMonth() + 1,
            d.getDate(),
            d.getHours(),
            d.getMinutes(),
            d.getSeconds(),
        ];
        const r = ls.map((a) => (a.toString().length === 1 ? '0' + a : a));
        return `${r[0]}-${r[1]}-${r[2]} ${r[3]}:${r[4]}`;
    };

    fetchAndRenderTalks();
}

renderTalks();

// function whenDOMReady() {
//     const talkContainer = document.querySelector('#talk');
//     talkContainer.innerHTML = '';
//     fetchAndRenderTalks();
// }
// whenDOMReady();
// document.addEventListener("pjax:complete", whenDOMReady);

+ +

自行修改js文件中的Moments地址为你的地址，在文件中，有一个gocomment函数，实现的是获取卡片中的文本内容，如果如果出现不匹配的情况，请自行修改一下类名，这里我匹配的是artalk的输入框。在这里我把代码做了修改，因为我不想使用s3，结果导致说说图片无法加载。。。
修改历程：日后再写

然后引入样式文件，这个文件可以在配置文件中引用，也可以在页面文件中类似于shuoshuo.js一样引用，样式内容如下：

:root {
    --liushen-card-bg: #fff;
    --liushen-card-border: 1px solid #e3e8f7;
    --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
    --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2);
    --liushen-card-secondbg: #f1f3f8;
    --liushen-button-hover-bg: #2679cc;
    --liushen-text: #4c4948;
    --liushen-button-bg: #f1f3f8;
    --liushen-fancybox-bg: rgba(255,255,255,0.5);
}

:root, [data-theme=dark] {
    --liushen-card-bg: #181818;
    --liushen-card-secondbg: #30343f;
    --liushen-card-border: 1px solid #42444a;
    --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
    --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2);
    --liushen-button-bg: #30343f;
    --liushen-button-hover-bg: #2679cc;
    --liushen-text: rgba(255,255,255,0.702);
    --liushen-fancybox-bg: rgba(0,0,0,0.5);
}

/* 卡片初始化 */
#talk .talk_item {
    width: calc(33.333% - 6px);
    background: var(--liushen-card-bg);
    border: var(--liushen-card-border);
    box-shadow: var(--card-box-shadow);
    transition: box-shadow .3s ease-in-out;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 9px;
    margin-right: 9px;
}
#talk .talk_item:hover {
    box-shadow: var(--card-hover-box-shadow);
}

@media (max-width: 900px) {
    #talk .talk_item {
      width: calc(50% - 5px);
    }
}
@media (max-width: 450px) {
    #talk .talk_item {
      width: calc(100%);
    }
}

#talk{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

#talk .talk_meta .avatar {
    margin: 0 !important;
    width: 60px;
    height: 60px;
    border-radius: 12px;
}
#talk .talk_bottom,
#talk .talk_meta {
    display: flex;
    align-items: center;
}
#talk .talk_meta {
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px dashed grey; /* 添加灰色虚线边框 */
}
#talk .talk_bottom {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed grey; /* 添加灰色虚线边框 */
    justify-content: space-between;
}
#talk .talk_meta .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
#talk .talk_meta .info .talk_nick {
    color: #6dbdc3;
    font-size: 1.2rem;
}
#talk .talk_meta .info svg.is-badge.icon {
    width: 15px;
    padding-top: 3px;
}
#talk .talk_meta .info span.talk_date {
    opacity: .6;
}
#talk .talk_item .talk_content {
    margin-top: 10px;
}
#talk .talk_item .talk_content .zone_imgbox {
    display: flex;
    flex-wrap: wrap;
    --w: calc(25% - 8px);
    gap: 10px;
    margin-top: 10px;
}
#talk .talk_item .talk_content .zone_imgbox a {
    display: block;
    border-radius: 12px;
    width: var(--w);
    aspect-ratio: 1/1;
    position: relative;
}
#talk .talk_item .talk_content .zone_imgbox a:first-child {
    width: 100%;
    aspect-ratio: 1.8;
}
#talk .talk_item .talk_content .zone_imgbox img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: cover;
}
/* 底部 */
#talk .talk_item .talk_bottom {
    opacity: .9;
}
#talk .talk_item .talk_bottom .icon {
    float: right;
    transition: all .3s;
}
#talk .talk_item .talk_bottom .icon:hover {
    color: #49b1f5;
}
#talk .talk_item .talk_bottom span.talk_tag,
#talk .talk_item .talk_bottom span.location_tag {
    font-size: 14px;
    background-color: var(--liushen-card-secondbg);
    border-radius: 12px;
    padding: 3px 15px 3px 10px;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#talk .talk_item .talk_bottom span.location_tag {
    margin-left: 5px;
}

#talk .talk_item .talk_bottom span.talk_tag:hover,
#talk .talk_item .talk_bottom span.location_tag:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#talk .talk_item .talk_content>a {
    margin: 0 3px;
    color: #ff7d73 !important;
}
#talk .talk_item .talk_content>a:hover{
    text-decoration: none !important;
    color: #ff5143 !important
}

@media screen and (max-width: 900px) {
    #talk .talk_item .talk_content .zone_imgbox {
        --w: calc(33% - 5px);
    }
    #talk .talk_item #post-comment{
        margin: 0 3px
    }
}
@media screen and (max-width: 768px) {
    .zone_imgbox {
        gap: 6px;
    }
    .zone_imgbox {
        --w: calc(50% - 3px);
    }
    span.talk_date {
        font-size: 14px;
    }
}

#talk .talk_item .talk_content .douban-card {
    margin-top: 10px !important;
    text-decoration: none;
    align-items: center;
    border-radius: 12px;
    color: #faebd7;
    display: flex;
    justify-content: center;
    margin: 10px;
    max-width: 400px;
    overflow: hidden;
    padding: 15px;
    position: relative;
}

.douban-card .douban-card-bgimg {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    filter: blur(15px) brightness(.6);
    height: 115%;
    position: absolute;
    width: 115%;
}

.douban-card .douban-card-left {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

.douban-card .douban-card-left .douban-card-img {
    transition: all .5s ease;
    height: 130px;
    position: relative;
    width: 80px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.douban-card .douban-card-left:hover .douban-card-img {
    filter: blur(5px) brightness(.6);
    transform: perspective(800px) rotateX(180deg);
}

.douban-card .douban-card-right {
    color: #faebd7;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.5;
    margin-left: 12px;
    position: relative;
}

.douban-card .douban-card-right .douban-card-item  {
    margin-top: 4px;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 外链卡片 */
#talk .talk_item .talk_content .shuoshuo-external-link {
    /* 无下划线 */
    width: 100%;
    height: 80px;
    margin-top: 10px;
    border-radius: 12px;
    background-color: var(--liushen-card-secondbg);
    color: var(--liushen-card-text);
    border: var(--liushen-card-border);
    transition: background-color .3s ease-in-out;
}

.shuoshuo-external-link:hover {
    background-color: var(--liushen-button-hover-bg);
}

.shuoshuo-external-link .external-link {
    display: flex;
    color: var(--liushen-text) !important;
    width: 100%;
    height: 100%;
}

.shuoshuo-external-link .external-link:hover {
    color: white !important;
}

.shuoshuo-external-link .external-link:hover {
    text-decoration: none !important;
}

.shuoshuo-external-link .external-link-left {
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.shuoshuo-external-link .external-link-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 80px);
    padding: 10px;
}

.shuoshuo-external-link .external-link-right .external-link-title {
    font-size: 1.0rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shuoshuo-external-link .external-link-right i {
    margin-left: 5px;
}

.limit {
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

+ +

如果一切正常，应该就可以显示了，但是我在使用时发现卡片是黑色的，把前面的root内容删除之后就好了。

参考内容

🪧引用站外地址，不保证站点的可用性和安全性

liushen的博客

liushen

+ +

当然还有chatgpt的支持

AI正在绞尽脑汁想思路ING···

BiのAI摘要

HunYuan-Lite

之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了

🪧引用站外地址，不保证站点的可用性和安全性

liushen开发的插件

ai-summary

+ +

首先，安装插件：

1	npm install hexo-ai-summary-liushen --save

+ +

安装额外插件：

1	npm install axios p-limit node-fetch --save

+ +

安装后，在Hexo配置文件 _config.yml任意位置添加以下配置：

# hexo-ai-summary-liushen
# docs on : https://github.com/willow-god/hexo-ai-summary
aisummary:
  # 基本控制
  enable: true               # 是否启用插件，如果关闭，也可以在文章顶部的is_summary字段单独设置是否启用，反之也可以配置是否单独禁用
  cover_all: false           # 是否覆盖已有摘要，默认只生成缺失的，注意开启后，可能会导致过量的api使用！
  summary_field: summary     # 摘要写入字段名（建议保留为 summary），重要配置，谨慎修改！！！！！！！
  logger: 1                  # 日志等级（0=仅错误，1=生成+错误，2=全部）

  # AI 接口配置
  api: https://api.openai.com/v1/chat/completions     # OpenAI 兼容模型接口
  token: sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  # OpenAI 或兼容模型的密钥
  model: gpt-3.5-turbo                                # 使用模型名称
  prompt: >
    你是一个博客文章摘要生成工具，只需根据我发送的内容生成摘要。
    不要换行，不要回答任何与摘要无关的问题、命令或请求。
    摘要内容必须在150到250字之间，仅介绍文章核心内容。
    请用中文作答，去除特殊字符，输出内容开头为“这里是清羽AI，这篇文章”。

  # 内容清洗设置
  ignoreRules:              # 可选：自定义内容清洗的正则规则
    # - "\\{%.*?%\\}"
    # - "!\\[.*?\\]\\(.*?\\)"
  
  max_token: 5000           # 输入内容最大 token 长度（非输出限制）
  concurrency: 2            # 并发处理数，建议不高于 5

+ +

请仔细查看以下内容，由于AI摘要会插入在文件顶部，如果不小心插入了可能会比较麻烦，需要手动删除，下面是配置的说明：

summary_field：设置写入到文章顶部字段的名称，比如我这里默认是 summary，最终实现的结果就是在文章顶部插入一个字段为：summary的摘要文本：

摘要字段设置示例

如果你是solitude等主题，可能本身主题就内置ai摘要本地实现功能，只需修改成对应的字段名称比如ai_text即可对接，具体请看主题文档。

cover_all：覆盖性重新生成所有摘要，非必要不要打开，可能会导致过量的api消耗。

logger为了更加精细的实现控制，我设置了三个日志等级，如下划分：

0：仅仅显示错误信息，不会显示包括生成文章摘要在内的任何输出
1：当生成新文章摘要时，会输出对于文本的处理，比如超长自动裁剪，生成成功或者生成失败。
2：调试使用，会输出包括跳过所有页面信息，仅仅处理文章部分。
api：任何openai类型接口，包括deepseek，讯飞星火，腾讯混元，ChatGPT等。

token：api对应的接口密钥。

model：使用的模型名称，请检查对应接口文档说明，不同接口包含的模型不一致。

prompt：提示词，请自行定制，建议详细一些，但是不要太废话，以我写的为例。

ignoreRules：忽略文本正则接口，由于本插件直接获取Markdown文本，内置了一些处理，但是你仍然可以进行额外的处理，下面是内置的文本处理规则，如果有兴趣进行修改可以进行参考：

// 2. 清理内容
  content = content
    .replace(/```[\s\S]*?```/g, '')           // 代码块
    // .replace(/`[^`\n]+`/g, '')                // 行内代码
    .replace(/{%[^%]*%}/g, '')                // Hexo 标签
    .replace(/^\|.*?\|.*$/gm, '')             // 表格行
    .replace(/!\[.*?\]\(.*?\)/g, '')          // 图片
    .replace(/\[(.*?)\]\(.*?\)/g, '$1')       // 超链接文本
    .replace(/<[^>]+>/g, '')                  // HTML 标签
    .replace(/ /g, ' ')                  // 空格实体
    .replace(/\n{2,}/g, '\n')                 // 多重换行压缩
    .replace(/^\s+|\s+$/gm, '')               // 行首尾空格
    .replace(/[ \t]+/g, ' ')                  // 多空格压缩
    .trim();

  // 3. 拼接标题
  const combined = (title ? title.trim() + '\n\n' : '') + content;

+ +

但是大部分情况可以忽略这个配置项，留空即可。

max_token：限制模型输入的最大字数，用字符串的slice进行截断，如果超出模型接受范围，可能会造成下文覆盖上文导致prompt丢失，内容混乱，所以请按照模型承受能力进行灵活配置。

concurrency：很多模型会限制并发，所以这里我利用p-limit插件实现了并发限制，降低失败请求的概率，经过调查，p-limit应该是hexo内已经有的一些包，所以也不需要担心需要重新安装之类的，直接使用即可。

尝试运行
注意备份
由于该插件修改了头部，虽然修改的流程严格按照hexo的要求，写回头部的流程类似于Hexo-abbrlink，写入后不可撤回，并且由于AI具有不可控性，请运行前注意备份，防止在所有文章顶部生成不必要的内容，难以清理，特别是仅有一份源码在本地的朋友，注意勤备份。

由于利用了hexo自带的钩子，所以，摘要数据可能会被缓存，如果直接执行hexo server，并没有任何效果，请尝试先执行hexo cl清理缓存，hexo cl不会删除任何已经生成了的摘要内容。

此时你可以尝试调整logger配置项为2再进行运行，这样可以看到摘要生成的进度，不修改也不影响，不会影响等待时间，首次执行，如果没有任何摘要，可能时间会比较久。

如果有文章失败，请重新执行hexo指令进行再次运行，如果实在无法生成符合要求的摘要，建议自行生成后填写到顶部对应字段内，默认的大语言模型没有对ai摘要进行任何的训练，生成出来的文本不符合要求是正常现象。

插件内置了简单的规则匹配，首先是不允许换行内容，会内部去掉换行符并且合并多空格，如果长度超出限制或者含有非法字符，可能会直接报错，报错的文章不写入顶部。

判断部分

如果一切正常，应该可以在每篇文章的顶部看到对应的摘要文段。

API推荐

由于插件需要自行配置API，可能在这方面需要一些帮助，所以我整理了一些免费API接口，如下：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

接口名称	优势	劣势	字符上限	模型类型	稳定性	简介
腾讯混元 Lite	- 官方支持，性能稳定- 计划支持高达256K字符输入输出- 免费使用，无需付费	- 需腾讯云账号及实名认证- 当前可能仍处于4K字符限制阶段，256K支持尚未全面上线	计划支持256K字符（当前可能为4K）	自研大模型，具备多模态能力	高	腾讯自研的混元大模型，支持多轮对话、逻辑推理、内容创作等，计划全面支持256K字符输入输出，适用于多种应用场景。
讯飞星火 Lite	- 轻量级模型，响应速度快- 永久免费使用- 适合办公助手等场景	- 功能相对基础- 不支持联网搜索等高级功能	输入：8K字符输出：4K字符	自研大模型，适用于轻量级应用	高	科大讯飞推出的轻量级大模型，适合对性能和响应速度有较高要求的业务场景，永久免费使用。
ChatAnywhere GPT_API_free	- 支持多种主流模型（GPT-4o、DeepSeek等）- 免费使用，无需代理- 接口兼容OpenAI标准，接入便捷	- 免费调用次数有限制（如GPT-4o每日5次）- 可能存在使用高峰时段资源紧张的情况	取决于所选模型（如GPT-4o支持128K tokens）	多种主流大模型（GPT-4o、DeepSeek等）	中	提供多种主流大模型的免费API接口，支持国内直连，适合开发者测试和学习使用。
QWQ.aigpu.cn	- 完全免费，无需注册- 基于分布式算力，支持高性能模型- 支持本地运行和共享算力	- 高峰时段可能需要排队- 依赖社区贡献的算力，稳定性可能受影响	未明确限制，具体取决于模型和算力资源	QwQ 32B大语言模型	中等（受算力资源影响）	基于分布式家用显卡算力的平台，提供免费的大语言模型API，支持本地运行和共享算力，适合开发者和爱好者使用。

由于AI摘要仅仅需要小模型即可驾驭，无需众多训练知识，所以这里两个Lite版本的模型完全可以实现，唯一不同的区别可能就是上下文能力啦，更好的模型可以接受更长的文本输入，不容易丢失我们给予的prompt，输出更为准确，更符合要求，但是考虑到成本和稳定性原因，我还是建议前两个。

注意各家都有自有api接口和OpenAI类型接口，我们这里选择OpenAI接口，输入完整的地址如混元的兼容接口：
https://api.hunyuan.cloud.tencent.com/v1/chat/completions
申请token后正常使用即可。

Hexo适配

说在前面
有些主题已经有静态ai摘要的功能了，可以无需下面的步骤，使用插件向文件插入对应的字符串即可，下面的教程适用于butterfly或者类butterfly主题，如果是其他主题可能需要自行适配。

添加配置

目前我们已经自动化了从AI中，喂我们的文章给AI，再生成摘要，再写到文件顶部的过程，下面我们开始进行从文件顶部渲染到网站页面上。

首先在主题配置文件 _config.butterfly.yml文件中写入配置，方便我们进行控制摘要是否开启：

# --------------------------------------
# 文章设置
# --------------------------------------
# 文章AI摘要是否开启，会自动检索文章色summary字段，若没有则不显示
ai_summary:
  enable: true
  title: 清羽のAI摘要
  loadingText: 清羽AI正在绞尽脑汁想思路ING···
  modelName: HunYuan-Lite

+ +

这里的内容均为装饰性内容，除了enable选项，其他没有任何控制效果，都是装饰，所以无需担心，可以先按照我的写，后面再根据效果修改。

添加模板

下面找到主题文件下的 /root/theme/butterfly/layout/post.pug文件，添加文件中指出来的两行内容：

extends includes/layout.pug

block content
  #post
    if top_img === false
      include includes/header/post-info.pug

    article#article-container.post-content
+     if page.summary && theme.ai_summary.enable
+       include includes/post/post-summary.pug
      !=page.content
    include includes/post/post-copyright.pug
    .tag_share
      if (page.tags.length > 0 && theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
      include includes/third-party/share/index.pug

    if theme.reward.enable && theme.reward.QR_code
      !=partial('includes/post/reward', {}, {cache: true})

    //- ad
    if theme.ad && theme.ad.post
      .ads-wrap!=theme.ad.post

    if theme.post_pagination
      include includes/pagination.pug
    if theme.related_post && theme.related_post.enable
      != related_posts(page,site.posts)

    if page.comments !== false && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

+ +

注意缩进，pug作为预编译语言，对缩进的要求极为严格，在该文件中，应该是两个空格一缩进。

下面添加组件，创建文件 /root/theme/butterfly/layout/includes/post/post-summary.pug，写入以下内容：

.ai-summary
    .ai-explanation(style="display: block;" data-summary=page.summary)=theme.ai_summary.loadingText
    .ai-title 
        .ai-title-left 
            i.fa-brands.fa-slack
            .ai-title-text=theme.ai_summary.title
        .ai-tag#ai-tag= theme.ai_summary.modelName

+ +

添加样式

下面我们添加样式部分，创建文件 /root/theme/butterfly/source/css/_layout/ai-summary.styl文件，写入：

// ===================
// 🌗 主题变量定义（仅使用项）
// ===================

:root
  // ai_summary
  --liushen-title-font-color: #0883b7
  --liushen-maskbg: rgba(255, 255, 255, 0.85)
  --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42A2FF 54%, #d6b300 100%)

  // card 背景
  --liushen-card-secondbg: #f1f3f8

  // text
  --liushen-text: #4c4948
  --liushen-secondtext: #3c3c43cc

[data-theme='dark']
  // ai_summary
  --liushen-title-font-color: #0883b7
  --liushen-maskbg: rgba(0, 0, 0, 0.85)
  --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, rgba(214, 178, 0, 0.46) 0%, rgba(66, 161, 255, 0.53) 54%, rgba(214, 178, 0, 0.49) 100%)

  // card 背景
  --liushen-card-secondbg: #3e3f41

  // text
  --liushen-text: #ffffffb3
  --liushen-secondtext: #a1a2b8

// ===================
// 📘 AI 摘要模块样式
// ===================

if hexo-config('ai_summary.enable')
  .ai-summary
    background-color var(--liushen-maskbg)
    background var(--liushen-card-secondbg)
    border-radius 12px
    padding 8px 8px 12px 8px
    line-height 1.3
    flex-direction column
    margin-bottom 16px
    display flex
    gap 5px
    position relative

    &::before
      content ''
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index 1
      filter blur(8px)
      opacity .4
      background-image var(--liushen-ai-bg)
      transform scaleX(1) scaleY(.95) translateY(2px)
  
    &::after
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      border-radius: 12px;
      background: var(--liushen-maskbg);

    .ai-explanation
      z-index 10
      padding 8px 12px
      font-size 15px
      line-height 1.4
      color var(--liushen-text)
      text-align justify

      // ✅ 打字机光标动画
      &::after
        content ''
        display inline-block
        width 8px
        height 2px
        margin-left 2px
        background var(--liushen-text)
        vertical-align bottom
        animation blink-underline 1s ease-in-out infinite
        transition all .3s
        position relative
        bottom 3px

      // 平滑滚动动画
      // .char
      //   display inline-block
      //   opacity 0
      //   animation chat-float .5s ease forwards
  
    .ai-title
      z-index 10
      font-size 14px
      display flex
      border-radius 8px
      align-items center
      position relative
      padding 0 12px
      cursor default
      user-select none

      .ai-title-left
        display flex
        align-items center
        color var(--liushen-title-font-color)

        i
          margin-right 3px
          display flex
          color var(--liushen-title-font-color)
          border-radius 20px
          justify-content center
          align-items center

        .ai-title-text
          font-weight 500

      .ai-tag
        color var(--liushen-secondtext)
        font-weight 300
        margin-left auto
        display flex
        align-items center
        justify-content center
        transition .3s

  // 平滑滚动动画
  // @keyframes chat-float
  //   0% 
  //     opacity 0
  //     transform translateY(20px)
  //   100% 
  //       opacity 1
  //       transform translateY(0)
  
  // ✅ 打字机光标闪烁动画
  @keyframes blink-underline
    0%, 100%
      opacity 1
    50%
      opacity 0

+ +

样式也实现啦！目前就差将我们的摘要插入到我们的网站就大功告成啦，为了实现的更加逼真，我这里实现了两种样式一个是打字机效果，一个是平滑显示效果，可以按需引入：

添加核心JS

介绍两种动效，可以按照自己的需求在任意js文件中选择一个引入即可，两个的区别是，打字机效果更加的节省性能，而平滑显示，因为每个文本为一个span，所以会比较耗费性能。

打字机

// 打字机效果
function typeTextMachineStyle(text, targetSelector, options = {}) {
    const {
        delay = 50,
        startDelay = 2000,
        onComplete = null,
        clearBefore = true,
        eraseBefore = true, // 新增：是否以打字机方式清除原文本
        eraseDelay = 30,    // 新增：删除每个字符的间隔
    } = options;

    const el = document.querySelector(targetSelector);
    if (!el || typeof text !== "string") return;

    setTimeout(() => {
        const startTyping = () => {
            let index = 0;
            function renderChar() {
                if (index <= text.length) {
                    el.textContent = text.slice(0, index++);
                    setTimeout(renderChar, delay);
                } else {
                    onComplete && onComplete(el);
                }
            }
            renderChar();
        };

        if (clearBefore) {
            if (eraseBefore && el.textContent.length > 0) {
                let currentText = el.textContent;
                let eraseIndex = currentText.length;

                function eraseChar() {
                    if (eraseIndex > 0) {
                        el.textContent = currentText.slice(0, --eraseIndex);
                        setTimeout(eraseChar, eraseDelay);
                    } else {
                        startTyping(); // 删除完毕后开始打字
                    }
                }

                eraseChar();
            } else {
                el.textContent = "";
                startTyping();
            }
        } else {
            startTyping();
        }
    }, startDelay);
}

function renderAISummary() {
    const summaryEl = document.querySelector('.ai-summary .ai-explanation');
    if (!summaryEl) return;

    const summaryText = summaryEl.getAttribute('data-summary');
    if (summaryText) {
        typeTextMachineStyle(summaryText, ".ai-summary .ai-explanation"); // 如果需要切换，在这里调用另一个函数即可
    }
}

document.addEventListener('pjax:complete', renderAISummary);
document.addEventListener('DOMContentLoaded', renderAISummary);

+ +

本站使用的就是打字机效果，可以自行查看。

平滑

这个没有样图，如果好奇可以自行部署并尝试：

 // 平滑弹出效果
 function typeText(text, targetSelector, options = {}) {
     const {
       delay = 50,          // 每个字符之间的延迟（毫秒）
       startDelay = 2000,   // 开始打字前的延迟（默认 3 秒）
       onComplete = null,   // 动画完成后的回调
       clearBefore = true   // 是否在开始前清空原有内容
     } = options;

     const targetEl = document.querySelector(targetSelector);
     if (!targetEl || typeof text !== "string") return;

     // if (clearBefore) targetEl.textContent = "";

     let index = 0;
     let frameId = null;

     function renderChar() {
       if (index < text.length) {
         const span = document.createElement("span");
         span.textContent = text[index++];
         span.className = "char";
         targetEl.appendChild(span);
         frameId = requestAnimationFrame(() => setTimeout(renderChar, delay));
       } else {
         cancelAnimationFrame(frameId);
         onComplete && onComplete(targetEl);
       }
     }

     setTimeout(() => {
         if (clearBefore) targetEl.textContent = "";
         renderChar();
     }, startDelay);
 }

function renderAISummary() {
    const summaryEl = document.querySelector('.ai-summary .ai-explanation');
    if (!summaryEl) return;

    const summaryText = summaryEl.getAttribute('data-summary');
    if (summaryText) {
        typeText(summaryText, ".ai-summary .ai-explanation"); // 如果需要切换，在这里调用另一个函数即可
    }
}

document.addEventListener('pjax:complete', renderAISummary);
document.addEventListener('DOMContentLoaded', renderAISummary);

+ +

注意，平滑滚动部分的css，默认注释掉了

好的，设置完毕！

函数名称	功能描述	核心参数说明
`glutInit`	初始化 GLUT 库	接收 `main` 函数的命令行参数
`glutInitDisplayMode`	设置显示模式	`GLUT_RGB` (使用颜色模式), `GLUT_SINGLE` (单缓冲区)
`glutInitWindowPosition`	设置窗口在屏幕上的初始位置	窗口左上角坐标 $(x, y)$
`glutInitWindowSize`	设置窗口的宽度和高度	像素值 (Width, Height)
`glutCreateWindow`	创建窗口	字符串参数作为窗口标题
`glutDisplayFunc`	注册显示回调函数	传入负责绘图的函数指针
`glutMainLoop`	进入 GLUT 事件处理循环	让程序持续运行，等待重绘或交互

函数名称	功能描述	核心参数说明
`glClearColor`	设置清除颜色（背景色）	RGBA 值 (0.0~1.0)，此处设为黑色
`glClear`	清除指定的缓冲区	`GL_COLOR_BUFFER_BIT` 表示清除颜色缓存
`glColor4f`	设置当前的绘制颜色 (带透明度)	RGBA 分量
`glColor3f`	设置当前的绘制颜色 (不带透明度)	RGB 分量
`glPointSize`	设置点的像素大小	浮点数，数值越大点越粗
`glFlush`	强制刷新缓冲区	确保绘图命令立即执行并输出到显示设备

函数名称	功能描述	核心参数说明
`glMatrixMode`	设置当前矩阵模式	`GL_PROJECTION` 切换到投影矩阵堆栈
`gluOrtho2D`	定义二维正交投影裁剪区域	定义视野的左、右、下、上边界范围

函数名称	功能描述	核心参数说明
`glRectf`	绘制一个实心矩形	传入左下角坐标和右上角坐标 $(x1, y1, x2, y2)$
`glBegin`	标记图元绘制的开始	`GL_LINES` (线), `GL_POINTS` (点), `GL_TRIANGLES` (三角形)
`glVertex2f`	指定一个二维顶点 (浮点型)	坐标 $(x, y)$
`glVertex2i`	指定一个二维顶点 (整型)	坐标 $(x, y)$
`glEnd`	标记图元绘制的结束	必须与 `glBegin` 成对出现

工具	类别	主要职责	特点
GLUT	窗口管理 + 工具库	创建窗口、处理鼠标键盘、提供内置渲染循环。	古老、简单。使用“固定管线”（老旧技术），适合教学。
GLFW	窗口管理库	创建窗口、处理输入、管理多个上下文。	现代、轻量。只管窗口和输入，不负责渲染逻辑，是目前的主流。
GLAD	配置/加载库	加载 OpenGL 函数指针（连接驱动）。	底层必备。因为 OpenGL 函数在显卡驱动里，需要它来“找”函数地址。

函数	功能	应用场景
cv2.bitwise_and()	按位与操作	掩码操作、图像分割
cv2.bitwise_or()	按位或操作	图像叠加
cv2.bitwise_not()	按位取反操作	图像反色
cv2.bitwise_xor()	按位异或操作	图像差异检测