生活一地鸡毛，但不能停止分享

这大概就是要为博客添加说说功能的原因。

在旧博客中，我使用memos为博客提供说说的功能，即用即发，有手机客户端，非常方便，但是他也有一定的缺点，需要自己的服务器部署memos服务，服务器到期，家里的Nas内网穿透又不稳定，于是，这说说功能似乎确实有些困难。

直到有一天，我在一位大佬的博客里发现了

代理频道，可以实现即发即用的说说功能，最重要的是直接使用Telegram提供的服务和存储。

创建频道这里我一笔带过，具体教程网上很多，需要创建公开频道。

请注意！！【公开链接】中的t.me/{id} 需要记下来。

新建一个Cloudflare Worker项目，并且粘贴以下代码：

addEventListener('fetch', event => {
    event.respondWith(TelgramChannelStarter(event.request))
})

const ChannelNameList = ['colablog_123'];
const deniedRegion = [""];
const baseproxyurl="https://tgapi.xiaoayu.eu.org/?proxy="

async function TelgramChannelStarter(request) {
    const url = new URL(request.url);
    const Region = request.headers.get('cf-ipcountry');
    let denied = deniedRegion.includes(Region);
    const proxyUrl = url.searchParams.get('proxy');
    let mid = parseInt(url.searchParams.get('mid'));
    let cid = parseInt(url.searchParams.get('cid')) || 0;
    let tagname = url.searchParams.get('tag') || "DefaultTag";
    let showtag = url.searchParams.get('showtag') || "true";
    showtag = showtag === 'true';
    let showview = url.searchParams.get('showview');
    showview = showview === 'true';

    let ChannelName = ChannelNameList[cid]
    
    if (!!proxyUrl) {
        if (!(proxyUrl.match(/\:\/\/(.*?)\.telegram\.org/g) || proxyUrl.match(/\:\/\/(.*)\.cdn\-telegram\.org/g)|| proxyUrl.match(/\:\/\/telegram\.org/g))) {
            return new Response('Proxy URL is not valid');
        }
        return fetch(proxyUrl);
    }

    const startbefore = url.searchParams.get('startbefore');
    const ChannelUrl = new URL(`https://t.me/s/${ChannelName}`);

    if (!!startbefore) {
        ChannelUrl.searchParams.set('before', startbefore);
    }

    let getDataFromTelegram = await fetch(ChannelUrl, {
        "headers": {
            "x-requested-with": "XMLHttpRequest"
        },
        "method": "POST"
    }).then(res => res.text())
      .then(res => res
          .replace(/\\n/g, '')
          .replace(/\\(.)/g, '$1')
          .replace(/(^\"|\"$)/g, '')
      );

    if (url.searchParams.get('rawHtml') === 'true') {
        return new Response(getDataFromTelegram, {
            headers: {
                "content-type": "text/html;charset=UTF-8",
                "Access-Control-Allow-Origin": "*"
            }
        });
    }

    const nextBeforeMatch = [...getDataFromTelegram.matchAll(/data-before="([0-9]+)"/g)];
    const nextBefore = nextBeforeMatch.length > 0 ? Number(nextBeforeMatch[0][1]) : 0;
    const ChannelMessages = ElementSpliter(getDataFromTelegram, '<div class="tgme_widget_message_wrap');

    const ChannelMessageData = {};
    ChannelMessages.forEach(ChannelMessage => {
        const MessageIdMatch = ChannelMessage.match(new RegExp(`data-post\="${ChannelName}\/(\\d+)"`));
        if (MessageIdMatch) {
            const MessageId = MessageIdMatch[1];

            // 确保消息ID是唯一的，并且没有重复
            if (!ChannelMessageData.hasOwnProperty(MessageId)) {
                const MessageTextMatch = ChannelMessage.match(/<div class="tgme_widget_message_text js-message_text"(.+?)<\/div>/s);
                const MessagePhotoMatches = [...ChannelMessage.matchAll(/background-image:url$'(.+?)'$/g)];
                const MessageTimeMatch = ChannelMessage.match(/datetime="(.+?)"/);
                const MessageViewsMatch = ChannelMessage.match(/<span class="tgme_widget_message_views">\s*(\d+)\s*<\/span>/);

                let msg_views = MessageViewsMatch ? MessageViewsMatch[1] : "0";
                let msg_time = MessageTimeMatch ? Math.round(new Date(MessageTimeMatch[1]).getTime() / 1000) : Math.round(new Date().getTime() / 1000);
                
                
                
                let msg_text = MessageTextMatch[0].replace(/<div (.*?)>/g, '').replace(/<\/div>/g, '');
                msg_text = msg_text.replace(/href=\"\?q=(.+?)\"/g, function(match, p1) {
                    return 'href="https://t.me/s/' + ChannelName + '/' + p1 + '"';
                });
                // emoji处理
                msg_text = msg_text.replace(/<i class="emoji" style="background-image:url$\'\/\/telegram.org\/img\/emoji\/40\/.+?$\">/g, '')
                // msg_text = msg_text.replace(/<i class="emoji".*?url$\'(.*?)\'$.*?<\/i>/g, function(match, p1) {
                //     // 此处代码结合stellar样式，但不太理想
                //     return `<span class="tag-plugin emoji"><img src="${baseproxyurl}https:${p1}"></span>`;
                //   });

                // 是否显示标签
                if (!showtag){
                    msg_text = msg_text.replace(/<a href="https:\/\/t\.me\/s\/.+?\/%23.+?">#[^<]+<\/a>/g, '');
                }

                // 是否显示浏览量
                if (showview){
                    msg_text = msg_text +'<br>(views:'+msg_views+')'
                }
                
                if (MessageTextMatch && (!denied && MessageTextMatch[0].includes('#' + tagname))) {
                    let resourceList = MessagePhotoMatches.filter(m => !m[1].includes('//telegram.org/img/emoji/'))
                      .map(m => ({
                          "createdTs": msg_time,
                          "externalLink": baseproxyurl + m[1],
                          "type": "image/jpeg",
                          "size": 0
                      }));


                    ChannelMessageData[MessageId] = {
                        id: MessageId,
                        content: msg_text,
                        createdTs: msg_time,
                        creatorName: ChannelName,
                        creatorUsername: ChannelName,
                        resourceList: resourceList,
                        // views: views,
                    };
                }
            }
        }
    });

    if (mid) {
        return new Response(JSON.stringify([ChannelMessageData[mid]]), {
            headers: {
                "content-type": "application/json;charset=UTF-8",
                "Access-Control-Allow-Origin": "*"
            }
        });
    }

    // 如果设置了limit参数，则按照时间倒序排序，并限制输出的消息数量
    let sortedMessages = Object.values(ChannelMessageData).sort((a, b) => b.createdTs - a.createdTs);
    const messagesCountParam = url.searchParams.get('limit');
    const messagesCount = messagesCountParam ? parseInt(messagesCountParam, 10) : sortedMessages.length;
    sortedMessages = sortedMessages.slice(0, messagesCount);

    return new Response(JSON.stringify(sortedMessages), {
        headers: {
            "content-type": "application/json;charset=UTF-8",
            "Access-Control-Allow-Origin": "*"
        }
    });
}



const ElementSpliter = (html, StartElement) => {
  const Elements = []
  const ElementSpliterOnce = (html, StartElement) => {
      let ElementName = [...StartElement.matchAll(/\<(?<ELENAME>[a-zA-Z0-9]+)\s/g)][0].groups.ELENAME
      let ElementContent = StartElement
      for (let Start = html.indexOf(StartElement) + StartElement.length; Start < html.length; Start++) {
          ElementContent += html[Start]
          if (ElementContent.endsWith(`</${ElementName}>`)) {
              const PrefixCount = Object.keys(ElementContent.match(new RegExp(`\<${ElementName}`, 'g'))).length
              const SuffixCount = Object.keys(ElementContent.match(new RegExp(`\<\/${ElementName}(.*?)>`, 'g')) || []).length
              if (
                  PrefixCount === SuffixCount &&
                  PrefixCount !== 0
              ) {
                  return ElementContent
              }
          }

      }
  }
  while (1) {
      if (html.indexOf(StartElement) === -1) break
      const SplitOnce = ElementSpliterOnce(html, StartElement)
      Elements.push(SplitOnce)
      html = html.replace(SplitOnce, '')
  }
  return Elements
}

部署完Cloudflare worker后，请绑定你的域名，我在这里绑定的域名是tgapi.xiaoayu.eu.org

同时请注意，因为设置了标签筛选，你只有在tg上发说说带上#SFCN 标签，才能在中国大陆看到消息。

如果不带上#SFCN的话，只有国外用户可以看到你发的消息，国内无法看到信息，用于屏蔽一些敏感信息。

这里有个小功能：如果你输入 

import { NextPage } from "next";
import ListLayout from "../components/layout/ListLayout";
import { FC, useState } from "react";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
import relativeTime from "dayjs/plugin/relativeTime";
import useSWR from 'swr';
import Image from 'next/image';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

dayjs.locale('zh-cn');
dayjs.extend(relativeTime);

interface Resource {
  createdTs: number;
  externalLink: string;
  type: string;
  size: number;
}

interface Memos {
  id: string;
  content: string;
  createdTs: number;
  resourceList: Resource[];
}

const fetcher = (url: string) => fetch(url).then(res => res.json());

const MemoCard: FC<Memos> = (memo) => {
  const [isOpen, setIsOpen] = useState(false);
  const [photoIndex, setPhotoIndex] = useState(0);
  const images = memo.resourceList.filter(resource => resource.type.startsWith('image/')).map(resource => resource.externalLink);

  return (
    <div className="flex flex-col items-start p-4 transition duration-200 ease-in-out transform bg-white shadow-lg rounded-3xl hover:scale-105 dark:bg-true-gray-900">
      <div className="flex items-center mb-4">
        <Image src="https://cdn.dribbble.com/userupload/15096090/file/original-a79a16aa0e2a9f34c4521da09f7cc4d0.webp" alt="可乐君" width={40} height={40} className="rounded-full" />
        <div className="ml-4">
          <div className="flex items-center justify-between">
            <span className="font-bold">可乐君</span>
            <time className="ml-2 text-sm text-true-gray-400 dark:text-true-gray-500">{dayjs.unix(memo.createdTs).fromNow()}</time>
          </div>
        </div>
      </div>
      <div className="text-true-gray-800 dark:text-true-gray-300" dangerouslySetInnerHTML={{ __html: memo.content }}></div>
      <div className="grid grid-cols-3 gap-4 mt-4 w-full">
        {images.map((image, index) => (
          <div key={image} className="relative w-full pb-1/1 cursor-pointer" onClick={() => { setPhotoIndex(index); setIsOpen(true); }}>
            <div className="absolute inset-0 overflow-hidden">
              <Image src={image} alt="Memo Image" layout="fill" objectFit="cover" className="rounded-lg" />
            </div>
          </div>
        ))}
      </div>
      {isOpen && (
        <Lightbox
          mainSrc={images[photoIndex]}
          nextSrc={images[(photoIndex + 1) % images.length]}
          prevSrc={images[(photoIndex + images.length - 1) % images.length]}
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() => setPhotoIndex((photoIndex + images.length - 1) % images.length)}
          onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % images.length)}
        />
      )}
    </div>
  );
};

const Bibi: NextPage = () => {
  const { data, error } = useSWR('https://tgapi.xiaoayu.eu.org/?tag=SFCN&limit=10&type=memos', fetcher);

  if (error) return <div className="flex items-center justify-center h-screen text-xl font-semibold text-red-600">加载失败</div>;
  if (!data) return <div className="flex items-center justify-center h-screen text-xl font-semibold text-blue-600">加载中...</div>;

  return (
    <ListLayout>
      <h1 className="mb-4 text-2xl font-bold md:text-3xl lg:mb-8">说说✨</h1>
      <div className="space-y-4 mb-8">
        {data.map((memo: Memos) => <MemoCard key={memo.id} {...memo} />)}
      </div>
    </ListLayout>
  );
};

export default Bibi;

中的链接改成自己的链接，limit便是显示条数限制，我这里显示最近10条动态。

中添加依赖包，以支持时间显示和图片灯箱：

"dayjs": "^1.10.7",
"react-image-lightbox": "^5.1.1"


然后在vercel中部署即可，博客链接加入

在电报上发说说加#SFCN标签就可以在说说页面看到最新说说。

前言

如何部署

所需材料

创建频道

Cloudflare Worker部署代码

创建说说页面

集成到菜单栏