📦 一个用于 WordPress 的设备展示插件，支持分类管理、字段自定义、排序导入、评论交互等功能，适用于打造「我的设备页」或「装备清单」展示。

🔧 功能特色

• 设备自定义文章类型：每个设备独立管理，支持标题、副标题、介绍、评分、按钮、图片链接。

• 设备分类系统：支持层级分类，可自定义分类顺序。

• 响应式前端展示：简洁卡片布局，自动适配不同设备。

• 评论增强：支持点击评论按钮快速跳转输入，并高亮引用设备信息。

• 评论区样式美化：自定义结构与 CSS 样式，评论体验更好。

• CSV 批量导入：快速导入多个设备，适合迁移和批量添加。

• 排序管理页面：可视化调整分类和设备在前台的显示顺序。

• 远程图片支持：通过 image_url 字段加载外链图，不占用本地空间。

• 自定义模板集成：插件自动注册展示模板，可在页面中选择使用。

演示地址：

插件下载：

前端：

后台：

📦 安装方式

1. 下载插件源码或将本仓库克隆到 /wp-content/plugins/mly-equipment。

2. 进入 WordPress 后台 → 插件 → 启用 “MLY Equipment” 插件。

3. 新建页面 → 页面模板选择 设备展示模板（MLY 插件）。

4. 插入短代码：[mly_equipment] 即可加载设备内容。

配置文档：

🧩 短代码说明

[mly_equipment]

• 插入设备展示区块。

• 根据后台分类与排序设置，自动输出分组设备卡片。

📁 CSV 导入格式

支持字段：

title,subtitle,description,rating,button_text,button_link,category,image_url

后台“设备导入”中上传 CSV 文件，即可批量导入。

🗂 页面设置说明

后台“页面设置”菜单中可：

• 设置设备分类顺序（影响展示顺序）

• 设置设备卡片排序（每个分类内的顺序）

🎨 自定义样式

插件已自动引入 assets/mly-equipment.css 和 assets/mly-comment.css 文件，仅作用于 mly-plugin-page-equipment.php 页面模板，避免影响全局。

💬 评论交互

• 每个设备卡片自带评论按钮。

• 点击评论后会跳转至评论框，并自动插入设备信息引用。

• 插件已支持样式判断，将引用内容高亮显示。

为 WordPress 的 WooCommerce 提供 YPay / 易支付平台的扫码支付支持，兼容支付宝、微信等支付通道。

✨ 插件特色

• 🔗 支持易支付、YPay 等平台标准接口

• 💳 支持 WooCommerce 订单支付流程

• ⚙️ 提供独立后台设置界面，可配置商户信息与回调地址

• 🔁 支持异步（notify_url）+ 同步（return_url）双向回调

• 🌐 完全前后端分离，适配大多数主题

• 🧩 可移植结构，适合二次开发

📂 插件结构

wc-mlypay/
├── includes/
│ ├── class-wc-gateway-mlypay.php # 主支付网关逻辑
│ ├── notify_url.php # 异步通知地址
│ └── return_url.php # 同步跳转地址
├── templates/
│ └── page-mlypay-redirect.php # 跳转页模板
├── wc-mlypay.php # 插件主文件
└── README.md

🛠️ 安装方法

1. 下载本项目 zip 压缩包

2. 上传至 WordPress 插件目录 /wp-content/plugins/

3. 后台启用插件

4. 前往WooCommerce > 设置 > 付款 > 启用 /管理 “MLY支付”

5. 配置以下参数：

📦 使用教程

推荐使用Meily Pay（自用），其他易支付/Ypay平台也可以

使用文档地址（完善中）：

截图

✅ 通过测试的版本

• WordPress 6.8.1

• WooCommerce 9.8.5（测试的最新版）

• PHP 8.1

⚠️ 注意事项

• 本插件为表单跳转支付（扫码），不支持 WooCommerce 古腾堡编辑器 Blocks 新版结账页（下个版本更新）

• 保证网站 HTTPS 以确保兼容性

• 插件默认使用 GET 回调方式（符合易支付多数兼容系统）

👇下载地址

留子一年第一次被澳洲Local邀请到家里做客，起因是我和朋友一起选到公共政策专业的课程国际危机管理，本来我是应该选“国际危机管理”和“亚太地区的外交与政治”两门课，虽然我是传播学专业，但是，我的专业很多都是商业战略有关，与我未来的研究方向有偏差，所以我特意选修了这两门课。但是戏剧性的是，我因为课程时间冲突，没有成功入选课程，但是我的朋友在我的建议下阴差阳错入选了，我也跟她在课下学习了一些课程上的内容，我才知道公共政策专业只有二十几个学生，绝大部分都是来自美国、澳洲和欧洲。

课程第一轮考试结束的时候，班上的澳洲local建立了WhatsApp群组，邀请我们参加家庭聚会，时间就在期中假期结束前的最后一天。我和Echo从刚刚入学就认识了，我们一起接受邀请并计划该带什么食物和酒水。最后，我们带了Echo自己做的雪花酥，白葡萄酒和两箱可乐（因为主家说可能不会准备无酒精饮料，但是Echo要开车，所以我们自带了）。雪花酥一登场，就把大家迷住了，很快就吃完了，主家Sean更是在还剩下四个的时候悄悄给我们使眼色把盘子端到身边配白葡萄酒吃完了。

说好五点到，只有几个亚洲人到了，原来白人也这么爱迟到，来了十五个人，但是只有我们早鸟先合影了~

然后就是丰盛的白人饭，腌制现烤的牛胸肉、烤肠、芝士Pasta、烤鱼、豆羹以及一些三明治辅料。我们贡献了新奥尔良风味的烤鸡翅和鸡腿，原来他们都没吃过这个只有在中国市场才有的味道，几位美国人听到这个眼睛放大都不可思议，不过味道很好。

我们聊了很多话题，因为除了我们之外的同学都是来自政治学院，所以我们畅所欲言地聊了很多经济和文化方面的话题，特别是最近特朗普政府的经济政策，仿佛是一个炸弹瞬间就炸开，大家都在猛烈抨击，特别是几个澳洲人和四个美国人，认为特朗普的执政是一个灾难，然后提到最近正在布里斯班举行的针对特朗普政策的游行，我最近也在家附近到处看到了宣传海报。聊到中国，我们聊了很多Tiktok上的中国视频，包括赛博朋克之城——重庆，大家都很痴迷中国美食，特别是最近在市中心开的布里斯班第三家海底捞火锅，Sean指着悬挂在客厅的海底捞火锅肚兜对我们说，他们刚刚去体验了一番。Sean还给我们展示他正在使用小红书，他说经常在小红书上看中国留学生推荐的布里斯班好吃的中餐店，加了我们的好友，希望我们把雪花酥的制作教程和好吃的中餐店分享给他。

我从五点呆到八点，我们感受到了Sean和他的妻子对派对的付出和努力，这是我第一次去local家里聚会，全程一直和来自世界各地的同学们社交，澳洲人、美国人、欧洲人、新加坡人、泰国人，感觉自己一晚上说了一个月的英语量，但是只要享受和体会一下，就发现人与人之间真诚胜过一切。

最近三个事情像三座大山一样压着我，一个是学习方面临前所未有的压力，一个是爱情方面新的挑战，另一个是人生的抉择。我们常常缺乏外部归因的勇气和能力，无形的压力包裹着外界的嘈杂和内部的浮躁，然而就算是ENFJ，也有丧失能量感的时刻。宇哥说他要沉淀，我想，我也需要。

上一次遇到错综复杂的事情，去了龟山徒步，效果不错。本来一直计划今天去Coot-Tha山徒步，库萨山能够远眺布里斯班City景貌，是看日出和日落的绝佳城市观景平台。但是今天天气突然乌云密布，恐要下雨，打开手机看天气预报，未来连续三天大雨，恐怕错过今天就要等到下周。犹豫不定之间，时间已经来到晚上六点半，于是趁着夜色和凉风，再去夜爬呼吸新鲜空气，如今看来，这一招对我来说还是挺有用的。

大家可以参与投票，作为一个ENFJ，我会首先选择倾诉，然后是徒步慢跑、打游戏、旅游等自我调节方式。

夜晚人不多，坐在C位

写在最后

如果你觉得我的博客内容还不错，欢迎订阅我的博客，在下方填写您的邮箱可以轻松订阅我，并在我发布更新的时候收到邮件提醒。

写在开头

本文开头包含本博客的第一次使用Live图。电脑端用户可以把鼠标停留在live图左上角以查看视频片段，移动端用户点击并停留在live图任意位置。目前正在做该组件的Halo插件中~

行程一览：Toowong→Wellington Point→Moogerah Dam→Toowong

Willington Point

去年我因为参与学联活动的拍摄第一次去Willington Point👇

在Wellington Point拍到绝美海边蓝调

UQCSSA计划在中秋节附近在学校举办一场盛大的中秋晚会，而我们传媒部门将贡献一部短片作为节目之一，也是为我们组织打一个小广告。Wellington Point是此次拍摄的外景取景地之一。

https://ryanzm.cn/archives/wellington-point-2024

这次在我的建议下，我们又来到了Willington Point看日落。冬季的日落不同于春夏时节，太阳以肉眼可见的速度下坠，并在片刻间将天空染成金色和红色，然后在刹那间又消失在茫茫夜幕。——就像是和你的刹那体验。

木瓜湖的星空

木瓜湖Lake Moogerah：Moogerah Dam, Moogerah QLD 4309（手机拍摄）

写在最后

如果你觉得我的博客内容还不错，欢迎订阅我的博客，在下方填写您的邮箱可以轻松订阅我，并在我发布更新的时候收到邮件提醒。

👇去年期中假期也去了黄金海岸，三日游。今天过来买东西，过几天会再来picnic⛺️🧺🍖

复活节出游·在黄金海岸的第一天

在和朋友一行7人北岛的特种兵一日游结束后，紧接着又和朋友一起驾车前往黄金海岸。

https://ryanzm.cn/archives/fu-huo-jie-lu-xing-huang-jin-hai-an-day1

在黄金海岸的第二天·Skypoint观景台

我们在Skypoint吃了丰盛的自助早餐，在观景台黄金海岸的海滩和城市风光尽收眼底。

https://ryanzm.cn/archives/huang-jin-hai-an-skypointguan-jing-tai

在黄金海岸的第三天·Miami海滩的奇幻拍摄点

结束Skypoint观景台的俯瞰视角，我们跟随小红书的指引来到Miami海滩，这里有一处欣赏黄金海岸冲浪者天堂海滩的神秘观测点，也是众多旅行者的打卡点。

https://ryanzm.cn/archives/Miami-hai-tan

这次呢？

😢黄金海岸还在恢复中

历经前段时间的飓风，黄金海岸的细软金色沙滩被海水、雨水和暴风裹挟着垂向岸边，形成了罕见的悬崖景观，至今，依靠着自然复原力的黄金海岸还在努力将高高堆积的沙滩移向海边。也许，时间会抹平一切，但是景观自此不同。

我看到的：

洞门

去黄金海岸DFO奥特莱斯买东西，路过Crocs去买一双洞洞鞋加入洞门。

👆我们挑了一些鞋花

Crocs Crush Clog - Culture King

Introducing the Classic Mega Crush Clog, featuring an enhanced rubber tread, updated detailing around the outsole, and a platform ready to take any outfit to ...

https://www.culturekings.com.au/products/crocs-crush-clog-black

👆一双鞋，13个鞋花 总计234刀……

看到这里了订阅一下呗~

Moments瞬间插件类似微博和朋友圈，官方地址为：

但是有一些主题不支持瞬间插件，也就是说没有内置moments.html。Thyuu主题采用内置的评论组件，不支持Halo原生的评论组件，另外i，该组件目前只适配文章和页面，不适配瞬间，所以本文重点不在评论（以后再说吧）。

瞬间地址：

如图：

首页及其他页面右下角按钮：

代码：

新建Moments.html 位置在主题文件夹内

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" th:replace="~{modules/layout :: layout(
        _title = '瞬间',
        menu_site_title = '瞬间',
        _content = ~{::content},
        _head = ~{::head},
        page_js = null,
        body_class = 'page-template page-template-moments page')}">
 <!-- ✅ 页面 <head> 片段 -->
 <head></head>
 <body>
  <th:block th:fragment="head"> 
   <style>
    .tags {
      margin: 0.5rem 0 1.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .tag {
      display: inline-block;
      padding: 3px 10px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 11px;
      color: #888;
      background-color: #f8f8f8;
      margin: 10px 0px;
    }

    .tag::before {
      content: "#";
      margin-right: 2px;
    }
  </style> 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" /> 
   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script> 
  </th:block> 
  <!-- ✅ 页面内容 --> 
  <th:block th:fragment="content"> 
   <main id="main" class="site-main" role="main"> 
    <div class="moments-wrapper"> 
     <!-- 顶部背景与头像 --> 
     <div class="moment-top-bg" style="position: relative;"> 
      <img class="moment-top-bg" src="/upload/bg-3.jpg" alt="背景图" /> 
      <div class="moment-top-name">
       又见梅林
      </div> 
      <img class="moment-top-avater" src="https://img.ryanzm.cn/2025/01/20/678de9c70a3c8.png" alt="头像" /> 
     </div> 
     <!-- 每条 moment --> 
     <div th:each="moment : ${moments.items}" class="moment-card"> 
      <hr style="border: none; border-top: 1px solid #eee;" /> 
      <div class="moment-meta"> 
       <img th:src="@{${moment.owner.avatar}}" alt="avatar" /> 
       <div class="info"> 
        <div class="name">
         [[${moment.owner.displayName}]]
        </div> 
        <div> 
         <time th:text="${#dates.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm')}"></time> 
        </div> 
       </div> 
      </div> 
      <div class="moment-content" th:utext="${moment.spec.content.html}">
        [[${moment.spec.content.plain}]] 
      </div> 
      <!-- 媒体区域：图片、视频、音频 --> 
      <div class="moment-media" th:if="${not #lists.isEmpty(moment.spec.content.medium)}"> 
       <div class="img-grid"> 
        <a th:each="media : ${moment.spec.content.medium}" th:if="${media.type.name == 'PHOTO'}" data-fancybox="gallery" th:href="${media.url}"> <img th:src="${media.url}" alt="图片" /> </a> 
       </div> 
       <th:block th:each="media : ${moment.spec.content.medium}"> 
        <video th:if="${media.type.name == 'VIDEO'}" th:src="${media.url}" controls=""></video> 
        <audio th:if="${media.type.name == 'AUDIO'}" th:src="${media.url}" controls=""></audio> 
       </th:block> 
      </div> 
      <!-- 底部区域 --> 
      <div class="moment-footer"> 
       <span th:if="${moment.metadata.annotations.mylocal != null}"> &#55357;&#56525; [[${moment.metadata.annotations.mylocal}]] </span> 
       <!-- 展开按钮和评论 --> 
       <div class="moment-actions"> 
        <button class="moment-action-toggle"> <i class="iconfont icon-gengduo"></i> </button> 
        <div class="moment-action-popup"> 
         <button class="moment-comment-btn" th:attr="data-id=${moment.metadata.name}"> <i class="icon-pinglun"></i> <span class="moment-comment-label">评论</span> <span class="moment-comment-count" th:attr="data-path='/moments/' + ${moment.metadata.name}"></span> </button> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 分页 --> 
     <div th:if="${moments.hasPrevious() or moments.hasNext()}" class="pagination" style="padding: 20px; display: flex; justify-content: center; background: white; border-radius: 0 0 20px 20px;"> 
      <th:block th:replace="~{modules/widgets/pagination :: page('/moments', ${moments})}" /> 
     </div> 
    </div> 
   </main> 
   <script type="module">
  import { init, commentCount } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

  // 三点展开操作按钮
  document.querySelectorAll('.moment-action-toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      const container = btn.closest('.moment-actions');
      container.classList.toggle('open');
    });
  });

  // 点赞逻辑：每条每人每天只能点一次
  document.querySelectorAll('.moment-like-btn').forEach(btn => {
    const id = btn.getAttribute('data-id');
    const countSpan = btn.querySelector('.like-count');
    const today = new Date().toISOString().split('T')[0];
    const key = `like_${id}_${today}`;
    const storedCount = localStorage.getItem(`${key}_count`);

    if (localStorage.getItem(key)) {
      btn.classList.add('liked');
      countSpan.textContent = storedCount || 1;
    }

    btn.addEventListener('click', () => {
      if (localStorage.getItem(key)) {
        alert('今天已经点过赞啦！');
        return;
      }
      btn.classList.add('liked');
      localStorage.setItem(key, "1");
      let newCount = parseInt(countSpan.textContent) + 1;
      countSpan.textContent = newCount;
      localStorage.setItem(`${key}_count`, newCount.toString());
    });
  });

  // 评论按钮触发弹出框
  document.querySelectorAll('.moment-comment-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.getAttribute('data-id');
      showWalinePopup(id);
    });
  });

  // 显示 Waline 弹窗
  function showWalinePopup(id) {
  const popupId = `comment-popup-${id}`;
  const elId = `waline-${id}`;

  // ✅ 新增：每次点击时，先销毁旧弹窗
  const oldPopup = document.querySelector(`#${popupId}`);
  if (oldPopup) oldPopup.remove();

  // ✅ 然后重新创建弹窗
  const popup = document.createElement('div');
  popup.id = popupId;
  popup.className = 'moment-comment-popup';

  popup.innerHTML = `
    <div class="close-btn">
      <i class="iconfont icon-guanbi comment-popup-close"></i>
    </div>
    <div id="${elId}" class="waline-inner"></div>
  `;
  document.body.appendChild(popup);

  // ✅ 绑定关闭按钮
  popup.querySelector('.comment-popup-close').addEventListener('click', () => {
    popup.style.display = 'none';
  });

  // ✅ 初始化 Waline（无登录，无图片上传）
  window.WalineV3.init({
    el: `#${elId}`,
    serverURL: 'https://m.ryanzm.cn/',
    reaction: false,
    path: `/moments/${id}`,
    login: 'disable',
    imageUploader: false,
    copyright: false,
  });
}

  // 评论数量统计并隐藏为 0 的
  commentCount({
    serverURL: 'https://m.ryanzm.cn/',
    selector: '.moment-comment-count',
    callback: (el, count) => {
      if (parseInt(count) < 1) {
        el.style.display = 'none';
      } else {
        el.textContent = count;
      }
    }
  });

  document.querySelectorAll('.img-grid').forEach(grid => {
  const imgs = grid.querySelectorAll('img');
  if (imgs.length === 1) {
    const img = imgs[0];

    const classifyImage = () => {
      const width = img.naturalWidth;
      const height = img.naturalHeight;
      if (width > height) {
        grid.classList.add('single-img', 'landscape');
      } else {
        grid.classList.add('single-img', 'portrait');
      }
    };

    if (img.complete) {
      classifyImage();
    } else {
      img.onload = classifyImage;
    }
  }
});
</script> 
   <script>
  window.initMomentsScript = function () {
    // 三点展开按钮
    document.querySelectorAll('.moment-action-toggle').forEach(btn => {
      btn.addEventListener('click', () => {
        const container = btn.closest('.moment-actions');
        container.classList.toggle('open');
      });
    });

    // 点赞逻辑（略：可照你原本逻辑复制进来）

    // 评论按钮弹出
    document.querySelectorAll('.moment-comment-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const id = btn.getAttribute('data-id');
        showWalinePopup(id);
      });
    });

    // 评论数统计
    if (window.Waline && window.Waline.commentCount) {
      window.Waline.commentCount({
        serverURL: 'https://m.ryanzm.cn/',
        selector: '.moment-comment-count',
        callback: (el, count) => {
          if (parseInt(count) < 1) {
            el.style.display = 'none';
          } else {
            el.textContent = count;
          }
        }
      });
    }

    // 单图样式
    document.querySelectorAll('.img-grid').forEach(grid => {
      const imgs = grid.querySelectorAll('img');
      if (imgs.length === 1) {
        const img = imgs[0];
        const classifyImage = () => {
          const width = img.naturalWidth;
          const height = img.naturalHeight;
          if (width > height) {
            grid.classList.add('single-img', 'landscape');
          } else {
            grid.classList.add('single-img', 'portrait');
          }
        };
        if (img.complete) {
          classifyImage();
        } else {
          img.onload = classifyImage;
        }
      }
    });
  };
</script> 
  </th:block>  
 </body>
</html>

/* moment-放在后台自定义CSS中 */

.moments-wrapper {
	max-width: 720px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.moment-card {
	background: #fff;
	padding: 0em 2.5em 2.5em 2.5em;
}

.moment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.6rem;
	padding-top: 2.5em;
}

.moment-meta img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.moment-meta .info {
	font-size: 14px;
	color: #666;
}

.moment-meta .info .name {
	font-weight: bold;
	font-size: 16px;
	color: #333;
}

.moment-content {
	font-size: 15px;
	color: #333;
	white-space: pre-wrap;
	line-height: 1.7;
	margin-bottom: 0.5rem;
	max-width: 85%;
}

.moment-footer {
	font-size: 13px;
	color: #999;
	position: relative;
}

.moment-media {
	margin: 10px 0;
	max-width: 85%;
}

.img-grid {
	display: grid;
	gap: 6px;
}

.img-grid:has(a:nth-child(1):nth-last-child(1)) {
	grid-template-columns: 1fr;
}

.img-grid:has(a:nth-child(1):nth-last-child(2)),
    .img-grid:has(a:nth-child(1):nth-last-child(4)) {
	grid-template-columns: 1fr 1fr;
}

.img-grid:has(a:nth-child(1):nth-last-child(3)),
    .img-grid:has(a:nth-child(1):nth-last-child(n+5)) {
	grid-template-columns: 1fr 1fr 1fr;
}

.img-grid a {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
}

.img-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.moment-tags {
	margin: 0.5rem 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.tag {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 13px;
	color: #666;
	background-color: #f8f8f8;
	margin: 10px 0px;
}

.tag::before {
	content: "#";
	margin-right: 2px;
}

.moment-actions {
	position: absolute;
	right: 16px;
	bottom: 0px;
}

.moment-action-popup {
	display: none;
	position: absolute;
	right: 40px;
	bottom: -5px;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	border-radius: 6px;
	z-index: 10;
	padding: 5px;
}

.moment-actions.open .moment-action-popup {
	display: block;
}

.moment-like-btn,
.moment-comment-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	color: #333;
	padding: 4px 8px;
	font-size: 14px;
}

.moment-comment-label {
	white-space: nowrap;
}

.moment-action-toggle {
	padding: 4px 7px;
	font-size: 20px;
	color: #999;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
        /* 不要圆角 */
	box-shadow: none;
        /* 不要阴影 */
}

.moment-action-toggle:hover {
	color: #333;
}

/* 评论弹出框 */
.moment-comment-popup {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 420px;
	max-height: 80vh;
	background: rgba(255, 255, 255, 0.75);
 /* 半透明白色 */
	backdrop-filter: blur(12px);
 /* 毛玻璃效果 */
	-webkit-backdrop-filter: blur(12px);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	z-index: 9999;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.img-grid.single-img.landscape a {
	width: 70%;
}

.img-grid.single-img.portrait a {
	width: 40%;
}

.img-grid.single-img a {
	aspect-ratio: auto !important;
	height: auto !important;
	width: auto;
	max-width: 100%;
 /* 防止超出屏幕 */
}

.img-grid.single-img {
	display: block;
	text-align: center;
}

.img-grid.single-img img {
	object-fit: contain !important;
	height: auto !important;
	width: 100%;
	display: block;
}

.moment-top-avater {
	position: absolute;
	bottom: -25px;
	right: 4%;
	width: 10%;
	border-radius: 12%;
	border: 3px solid #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.moment-top-name {
	position: absolute;
	bottom: 7px;
	right: 17%;
	color: white;
	font-size: 1.2em;
	font-weight: bold;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.moment-top-bg {
	border-radius: 16px 16px 0 0;
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

/* 评论框顶部关闭按钮容器 */
.moment-comment-popup .close-btn {
	text-align: right;
	padding: 8px 12px 0;
}

/* 评论内容容器支持滚动 */
.moment-comment-popup .waline-inner {
	flex: 1;
	overflow-y: auto;
	padding: 0 16px 16px;
}

.comment-popup-close {
	font-size: 20px;
	color: #666;
	cursor: pointer;
	padding: 10px 16px;
	transition: 0.2s;
}

.comment-popup-close:hover {
	color: #111;
}

@media screen and (max-width: 768px) {
	.moments-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 12px;
 /* 给一点点边距 */
		box-sizing: border-box;
	}

	.moment-content,
  .moment-media {
		max-width: 100%;
	}

	.img-grid.single-img.landscape a {
		width: 80%
	}

	.img-grid.single-img.portrait a {
		width: 50%;
	}

	.moment-top-bg {
		height: 200px;
	}

	.moment-card {
		padding: 0em 1.5em 1.5em 1.5em;
	}

	.moment-meta {
		padding-top: 1.5em;
	}

	.moment-top-avater {
		width: 15%;
	}

	.moment-top-name {
		bottom: 2px;
		right: 22%;
		font-size: 1em;
	}

	.moment-actions {
		right: 0px;
	}
}

首页和其他页面的悬浮按钮：

代码：

< script >
// 弹出iframe只选择.moments-wrapper
if (window.location.hash === "#embed") {
    document.addEventListener("DOMContentLoaded",
    function() {
        const wrapper = document.querySelector('.moments-wrapper');
        if (wrapper) {
            const clone = wrapper.cloneNode(true); // ⚠️ 先 clone
            document.body.innerHTML = ''; // 再清空 body
            document.body.appendChild(clone); // 添加克隆内容
            document.body.style.margin = '0';
            document.body.style.background = '#f8f8f8';

            if (window.initMomentsScript) {
                window.initMomentsScript();
            }
            if (window.WalineV3 && window.WalineV3.commentCount) {
                window.WalineV3.commentCount({
                    serverURL: 'https://m.ryanzm.cn/',
                    selector: '.moment-comment-count',
                    callback: (el, count) = >{
                        if (parseInt(count) < 1) {
                            el.style.display = 'none';
                        } else {
                            el.textContent = count;
                        }
                    }
                });
            }
        }
    });
} < /script>


<!-- 👇 全站右下角 moments 弹窗入口 -->

<style>
  .rzm-moment-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 70px;
    background-color: white; / * 方形白底 * /
    border-radius: 12px;      / * 圆角方形 * /
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #333;
    cursor: pointer;
  }

.rzm-moment-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  margin-bottom: 4px;
  margin-top: 10px;
}
  
.rzm-moment-label {
    font-size: 12px;
    color: #333;
  }

  / * 可选：悬停样式 * /
  .rzm-moment-btn:hover {
    background-color: #f0f0f0;
  }

  .rzm-moment-popup {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 360px;
    height: 75%;
    max-width: 100%;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    overflow: hidden;
    z-index: 9998;
  }

  .rzm-moment-popup iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  .rzm-moment-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    z-index: 10;
  }

  / * 🔴小红点 * /
.rzm-moment-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}

 @media screen and (max-width: 768px) {
   .rzm-moment-btn {
     bottom:60px;
   }
 }
</style >

<!--🔘按钮HTML-->
<div class = "rzm-moment-btn"title = "查看瞬间" >
<img src = "/upload/朋友圈.svg"alt = "瞬间图标"class = "rzm-moment-icon" / >
<span class = "rzm-moment-label" > 瞬间 < /span>
  
  <!-- 🔴 红点通知 -->
  <span class="rzm-moment-dot"></span > </div>



<!-- 📱 弹窗 HTML -->
<div class="rzm-moment-popup">
  <div class="rzm-moment-close">✖</div > <iframe src = "/moments#embed"loading = "lazy"title = "Moments" > </iframe>
</div >

<!--💡弹窗逻辑--><script > document.addEventListener('DOMContentLoaded',
function() {
    const btn = document.querySelector('.rzm-moment-btn');
    const popup = document.querySelector('.rzm-moment-popup');
    const close = document.querySelector('.rzm-moment-close');

    btn.addEventListener('click', () = >{
        if (popup.style.display === 'block') {
            popup.style.display = 'none';
        } else {
            popup.style.display = 'block';
        }
    });

    close.addEventListener('click', () = >{
        popup.style.display = 'none';
    });
}); < /script>

<script type="module">
  import { init, commentCount } from 'https:/ / unpkg.com / @waline / client@v3 / dist / waline.js ';

  // 将模块函数挂载到全局
  window.WalineV3 = { init, commentCount };

  commentCount({
    serverURL: 'https: //m.ryanzm.cn/',
selector: '.moment-comment-count',
callback: (el, count) = >{
    if (parseInt(count) < 1) {
        el.style.display = 'none';
    } else {
        el.textContent = count;
    }
}
}); 
</script>

<!--waline评论组件-->
<script>
  function showWalinePopup(id) {
  const popupId = `comment-popup-${id}`;
  const elId = `waline-${id}`;

  / / ✅每次都销毁旧的弹窗，防止滚动卡死const oldPopup = document.querySelector(`#$ {
    popupId
}`);
if (oldPopup) oldPopup.remove();

const popup = document.createElement('div');popup.id = popupId;popup.className = 'moment-comment-popup';

popup.innerHTML = ` < div class = "close-btn" > <i class = "iconfont icon-guanbi comment-popup-close" > </i>
    </div > <div id = "${elId}"class = "waline-inner" > </div>
  `;
  document.body.appendChild(popup);

  / / ✅关闭按钮popup.querySelector('.comment-popup-close').addEventListener('click', () = >{
    popup.style.display = 'none';
});

// ✅ 初始化 Waline（无登录、无图片上传）
window.WalineV3.init({
    el: `#$ {
        elId
    }`,
    serverURL: 'https://m.ryanzm.cn/',
    reaction: false,
    path: ` / moments / $ {
        id
    }`,
    login: 'disable',
    imageUploader: false,
    copyright: false,
});
}
< /script>

注意，我在这里使用了过渡性质的Waline作为评论组件，有关评论的代码都不应该被复用，因为我也不知道以后thyuu会不会把内置的评论组件适配瞬间插件。以后如果万一有一天thyuu迎来更新（大概率不会，因为瞬间这个功能在很多人看来非必要），我再更新到thyuu评论组件，并迁移现有的waline评论到新评论组件中。

写在最后

茫茫互联网，缘分一线牵，您如果对网站内容感兴趣，您可以在下面这些地方找到订阅表单，或者直接在下方表单中提交您的邮箱以完成订阅。

引言

马来西亚是一个多民族国家。根据马来西亚统计局发布的《2022年人口报告》，马来西亚华人公民占公民总数的22.8%（DOSM，2022）。马来西亚华人文化不仅是几代华人在多元文化背景中保持自身文化独特性的根本，更是其确认族群身份与实现文化认同的重要基础（Wang & Yang，2023）。在语言与行为方面，马来西亚华人文化既深植于中华文化的传统之中，又自然地吸收了其他文化的元素，包括多种亚洲文明。这种融合体现了中华文化的延展性与动态性，同时也推动了其在全球范围内的传播（Liu，2024a）。

作为一名中国公民，我长期生活在中国，对中华文化有着天然的继承与认同。第一次接触马来西亚华人文化是在与马来西亚华人朋友Iwina的交流中。她曾向我抱怨，常常被中国人询问：

你是中国哪个地方的人?

这令她感到不适。她表示，自己可以接受“祖籍”这一说法，但她是马来西亚公民，而非中国人。听完她的这番话，我瞬间就开始假设如果是我，我会怎么询问，随之我也对马来西亚华人文化产生了强烈兴趣。对中国人而言，我们习惯于将自身与中华文化紧密联结，很少遭遇这样的身份认同困扰。这次经历激发了我从中国人的视角出发，反思并探索马来西亚华人所承载的独特历史与文化身份。

通过与三位马来西亚华人交流访谈，并结合网络资料，我将借助“内在视角”（emic）与“外在视角”（etic）两种方法（Liu，2024a），以中国公民这一“外部身份（outsider）”出发，尝试理解与体验马来西亚华人文化。研究材料包括纪录片、文献及社交平台上的用户生成内容等。

马来西亚华人文化中的食物、教育与习俗

本次跨文化体验将围绕食物、教育与习俗三个核心维度展开。通过文化体验与实地访谈，结合Dodd提出的文化三层次模型（Dodd，1998；Liu，2024a），我将从中国文化的视角出发，探讨文化身份的建构与认同机制。

美食

食物作为文化意义的载体，融合了信仰、态度、价值观与期望等元素，从而塑造个体的文化身份（Tomaščíková，2021）。根据Lotman（2005）的观点，食物系统构成了“象征半球”（symbolic hemisphere）——一个以象征和情感为核心的文化空间，其中的味道、记忆与实践形成了独特的文化表达；而Parasecoli（2011）所说的“象征工具包”，则包含风俗、食谱与风味，是移民者在迁徙过程中保留与应用文化传统的基础。这正是我选择食物作为研究重点之一的原因。一方面，跨文化的饮食分享可以帮助我们快速理解背后的价值观与文化习俗；另一方面，马来西亚华人所保留的饮食传统既是对本土文化的适应，也展现了对原生文化的传承与再创造，这使我们能够观察哪些元素正在演变为“新传统”，而哪些则延续着深厚的历史记忆。

教育

在教育方面，华人移民社区发展出了一套独特而稳固的教育系统。这种教育不仅是文化传承的方式，更是族群身份的塑造过程（Dodd，1998；Ganassin，2020）。在马来西亚历史上，年长一代马来西亚华人及教育工作者曾在“种族政策”背景下，为华文教育的合法性与发展持续争取（Tan & Teoh，2015）。执政者往往借由种族基础上的教育体系与身份政治来塑造国家认同，而华文教育的重要性在马来西亚华人家庭中却是代代相传的共识（Thimm，2016）。在这一背景下，华文教育不仅是个人成长的关键，更成为马来西亚华人群体在全球华人文化中构建独特身份与价值体系的重要途径。因此，我认为教育在马来西亚华人文化中具有不可替代的重要地位。

习俗

虽然生活环境发生了巨大变化，但马来西亚华人群体的部分传统节日与礼仪活动仍保留着古代中国的哲学思想与文化信仰（Seong，2015）。例如春节与神明游行等节日活动，体现出其文化表达仍深受中华传统的影响。移民一代的马来西亚华人在不同宗教、仪式与社群语境下展现出多重身份，这种身份的协商虽体现了文化的妥协，但大多数人依然坚持传承中华文化以维护族群独特性（Carstens，2005）。马来西亚华人对祖先与神明的信仰虽部分继承自中国文化，但更重要的是其本地化的发展过程。因此，考察中国文化与马来西亚华人文化在宗教与节俗方面的异同，成为理解文化融合与再创造的关键。

互动过程

随着几代人的更替，马来西亚“本地出生华人”与年轻一代的身份认同出现了新的差异（Gabriel，2014）。此外，马来西亚华人群体因祖籍地与现居地的不同，在文化背景与行为认知方面也呈现出显著的多样性（Carstens，2005）。因此，我邀请了三位具有不同地域背景的马来西亚华人国际学生作为受访者，以期获得更为丰富、立体的第一手资料。

第一位是我的朋友Iwina，来自马来半岛西海岸中部的雪兰莪州，祖籍福建；第二位是Jia Yee，来自西海岸的森美兰州，祖籍海南；第三位是Xinyi，亦祖籍福建，在南部的柔佛州成长。我们在学术课程与课外活动中建立了友谊，并持续就跨文化议题开展深入交流。由于三人皆以中文为第一语言，访谈得以顺利进行。

访谈围绕以下五个问题展开，涵盖食物、教育、习俗与身份认同等方面：

1. 有没有你印象深刻或值得推荐的马来西亚华人风味的食物或饮品？

2. 马来西亚华人家庭是否有独特的教育策略？你怎么看？

3. 马来西亚华人有哪些有特色的节日与习俗？

4. 作为国际学生，你如何理解并呈现自己的文化与历史身份？

5. 你对中国人或中华文化是否存在刻板印象？你如何看待中国文化？

• 在关于食物的话题中，我们很快打开心扉。马来西亚华人饮食受到中国广东、福建、海南等地饮食习惯的深远影响，并在马来西亚的多元文化与气候环境中融合发展。例如，Iwina提到“鱼生”在马来西亚华人社区中十分流行，而根据记载，鱼生最早发扬于中国广东、广西等地；而Jia Yee则强调了海南鸡饭在她家族中的代际传承。

• 在教育方面，马来西亚华人家庭普遍更重视子女接受系统的华文教育。通常，他们采用中英双语教学方式，也就是在华文学校上课，同时学习中文和英文，学习压力相较于其他马来学生普遍更大。Jia Yee回忆称，她在中学时期平均每日学习时间超过12小时，除了课堂学习，还包括课外补习与社团活动。另外，三位受访者普遍表示担忧政府对华文教育的认可程度不足。

• 谈及节日与民俗时，访谈气氛尤为和谐。马来西亚华人群体一方面积极参与本地多元文化节庆，另一方面对中华传统节日的传承格外重视。例如春节与元宵节，不仅体现了家庭与社群的凝聚力，更强化了代际文化认同。Iwina与Jia Yee都认为，马来西亚华人庆祝春节的氛围甚至比中国本土更为浓烈。

• 而在文化身份的话题上，访谈逐渐呈现出情感深度。马来西亚华人清晰地区分国家归属与文化传承，在国家认同方面展现出强烈的归属感与自豪感。当谈及祖辈在争取民族平等过程中所作出的贡献时，受访者普遍表达了自豪之情；但她们也都提到曾因身份问题而受到冒犯，例如被质疑是否“结束流浪，回到中国”，或被贬为“中国文化的抄袭者和挪用者”。

问题陈述

在与受访者的深入互动中，我既欣喜地体会到中马两地文化在食物、教育和习俗方面的高度契合，也敏锐地察觉到一些沟通上的障碍。这些问题集中体现于多元文化背景下的身份认同冲突、国家归属意识，以及文化刻板印象的差异。因此，我将从“发生了什么”与“为什么会这样”两个层面展开分析，并探讨可能的跨文化沟通策略。

当谈及文化认同与国家身份时，我们的交流愈加频繁且深入。Iwina 作为马来西亚华人，对于被误称为“中国人”感到明显不适，她强调自己的国籍与文化身份之间存在清晰界限，并对此感到自豪。而Jia Yee 则分享了一些涉及身份冒犯的经历，例如被问“作为中国人何时回国”，以及有人质疑马来西亚华人文化是否只是对中国文化的简单复制。这些反馈令我深感意外，因为在我假设的交流情境中，我可能不会如此冒犯性地询问这些问题。相反，我曾尝试以历史、经济与教育等理据去解释这种文化延续的合理性。

然而，回顾自身的成长背景，我深刻意识到我从小所接受的历史与文化教育，是高度系统化且极具国家叙事性的。例如，从传统诗词到近代历史，从民族荣耀到近代屈辱，这些知识塑造了我对中华文化的深度认同。在这种背景下，我不自觉地形成了一个认知误区——认为中国大陆才是中华文化唯一正统的继承地。这种偏见直到跨文化交流发生冲突时才显现其局限性。

了解更多：我们在协商与争论的是什么

上述文化张力背后，实际反映了一个更深层的问题：在全球华人文化的继承与表达中，不同社群如何协商各自的文化位置与身份合法性。这种“文化协商”不仅体现在语言与风俗的交流中，更在象征意义与政治身份的界定上产生了一定程度的冲突与紧张（Liu，2024b）。

面对官方叙事中对其集体记忆与文化价值的边缘化，马来西亚华人长期以来主张多元文化主义，并通过持续的行动争取民族平等与文化认可（Mei，2023），例如许多早年移居马来半岛的华人先辈在华文教育、华人政治参与以及中华传统宗教和习俗方面的继承、发扬和争取。类似的经验在中国也有发生。随着民族复兴意识的增强，中国人对于自身国家独立性与文化自豪感的建构日益强烈。部分极端观点甚至将马来西亚华人“坚持中华文化却不认同中国国籍”的行为视为一种文化背叛。然而，回顾中华文化的发展历程，我们会发现其本质是兼容并包、历久弥新的共享文化，它以开放性与创造性吸纳他者经验，构建出超越国界的文化共同体。

因此，理解文化传播的真正含义，必须跳脱单一国家主义或文化中心主义的框架。即便我是以“他者”身份进入马来西亚文化语境，也必须意识到文化交流背后的社会结构、历史创伤与身份协商。这不仅是一种礼貌与尊重，更是理解复杂全球华人身份体系的必要前提。

换位思考：我们为什么会争论与分歧

人类的认知活动往往深受先验知识与过往经验的影响（Liu，2024b）。中马两地华人虽同根同源，但在族群认同（Phinney，1996）与国家认同（Turner & Giles，1981）上的差异，成为双方在沟通中发生误解的重要诱因。

值得注意的是，“族群认同（ethnic identity）”与“国家认同（national identity）”这一分类体系源于西方学术传统，尤其是在美国、加拿大等多民族国家的社会心理学与社会学研究中被广泛使用。相较而言，中国社会在认同建构上较少区分“国家”（state）与“族群”（ethnicity），两者在官方话语与社会实践中高度叠合，常以“中华民族”这一整体性认同加以包容与统一。这种结构性差异使得中国人往往难以理解马来西亚华人对“马来西亚国籍”与“中华文化”的双重认同，并因此在跨文化沟通中出现认知落差。正如Phinney（1996）与Turner & Giles（1981）所强调的，族群认同更聚焦于文化、语言与传统的归属，而国家认同则涉及政治边界、法律地位与公民身份，两者虽可重叠，但在移民社会中经常呈现差异和冲突。

相较于国家认同的政治与疆界属性，族群认同更关注文化层面的归属，如血缘、历史与价值观（Batterton & Horner，2016）。中国当代民族政策以“中华民族共同体”为核心，强调国家统一与民族融合（Zhang & Feng，2022）。这种政策倾向虽然削弱了族群差异的政治表达，但却进一步强化了“文化共同体”意识。多数中国人将“中华儿女”视为自然身份，很少以“汉族中国人”或“侗族中国人”来界定自己。

相反，马来西亚华人则在长时间的社会边缘化与政策差异中发展出对国家归属与文化传承的双重认同。他们在认同中华文化的同时，更强调自身作为马来西亚公民的历史正当性。这种将“文化认同”与“国家认同”加以明确区分的做法，是马来西亚华人身份建构的核心逻辑（Gabriel，2014）。若在跨文化交流中忽视这一逻辑，将自身认知强加于他者，不仅无法真正理解文化差异，反而会激化误解与冲突。

与此同时，我们也容易陷入“外群体同质化效应”（outgroup homogeneity effect）（Liu，2024b），即在面对来自华语世界的非中国大陆华人时，将他们看作文化上的统一整体，忽略了内部的复杂性与差异性。对此，Berry（1980）提出的“文化融合策略”（integration strategy）为我们提供了解决路径。在跨文化适应过程中，个体需要在认知、行为与情感层面上寻求平衡（Imamura & Zhang，2014）。这不仅要求我们理解文化表象，更要进入文化背后的历史叙事与情感体系之中。唯有如此，跨文化沟通才可能真正实现平等、理解与共感。

反思

通过与马来西亚华人的深入互动，以及对相关文献的回顾与整合，我以中国文化身份为起点，开展了一次跨文化的观察与体验过程。这不仅是一次文化差异的体认，更是一次自我认知与他者理解的双向建构。我逐渐意识到，跨文化沟通不仅关乎语言的互通与表层行为的互动，更关乎身份、认同、历史记忆与权力结构在交流过程中的潜在作用。

一方面，得益于我们共享的语言背景，访谈得以顺利进行。在使用中文这一共同语言的过程中，编码与解码的障碍被显著减少，这为理解深层文化意涵提供了条件。然而，这种“语言上的亲近”却也遮蔽了我们之间在身份建构与文化经验方面的深刻差异。例如，虽然我们在语言、节日和饮食习惯上有诸多相似之处，但在国家认同、社会记忆以及对“中华文化”归属权的理解上却存在潜在张力。这种张力在访谈中屡次显现，促使我开始重新审视自己曾经习以为常的文化立场与认知模式。

另一方面，我在食物、教育与节俗的体验过程中，很快进入“文化体验者”的角色，并以中国视角去观察马来西亚华人文化的重构与演化。然而，正是在这种观察中，我逐步意识到自身视角的局限性。在最初的互动中，我将马来西亚华人视为“文化的延续者”或“海外的他者”，未能充分认识到他们作为文化主体的独立性。这种视角反映出一种无意识的“文化中心主义”倾向，即默认中国大陆才是中华文化的正统传承中心，而海外华人文化则是其附属或变体。事实上，马来西亚华人在多重边缘化的社会环境中，主动建构出具有弹性与多元性的文化身份，这种身份既包含对中华文化的认同，也融合了对马来西亚社会的适应与反哺。

此外，我也深刻认识到，自我在交流中所持有的“知识优越感”可能会无意中构成文化压迫。在尝试向受访者解释中华文化的“正统性”时，我实际上也在复制一种单向度的知识传播模式，而忽视了文化传播应当是相互协商、平等对话的过程。这种意识的觉醒提醒我，在未来的跨文化交流中，必须以开放、批判和反思的心态去理解他者的文化立场，避免将个体经验泛化为集体认知，更不能将文化差异简化为“对错”或“真伪”的二元判断。

另外，数字媒体时代的信息茧房与算法推荐机制正加剧跨文化认知的分裂。在日常的信息接收中，我们往往身处于“观点一致”的回音室之中，从而难以理解他者的真实文化体验与历史语境。因此，我认为跨文化沟通不仅仅是一个语言技术的问题，更是一项认知重构与情感共鸣的实践任务。我们需要不断打破既有认知边界，通过深度互动、文献回顾与换位思考等方式，建立起对他者文化的立体理解与情感连结。

总而言之，这次交流经历让我认识到，文化认同并非单一静态的存在，而是在历史、政治与社会交往中不断被协商与重构的动态过程。未来，在面对更多跨文化交流情境时，跨文化沟通成功的关键可能就在于重视彼此的文化差异，尊重历史经验与价值诉求，并通过持续的换位思考与反身性实践，推动真正意义上的对等交流与文化共感。

写在最后

茫茫互联网，缘分一线牵，您如果对网站内容感兴趣，您可以在下面这些地方找到订阅表单，或者直接在下方表单中提交您的邮箱以完成订阅。

References

1. Batterton, J., & Horner, S. L. (2016). Contextual Identities: Ethnic and National Identities of International and American Students. Journal of Studies in International Education, 20(5), 472-487. https://doi.org/10.1177/1028315316662979

2. Berry, J. W. (1980). Acculturation as varieties of adaptation. In A. M. Padilla (Ed.), Acculturation: Theory, models, and findings (pp. 9-25). Westview Press.

3. Carstens, S. A. (2005). Histories, Cultures, Identities: Studies in Malaysian Chinese Worlds. NUS Press.

4. Dodd, C. (1998). Dynamics of intercultural communication. McGraw-Hill Humanities.

5. DOSM. (2022). Current Population Estimates, Malaysia, 2022. DOSM. https://v1.dosm.gov.my/v1/index.php?r=column/pdfPrev&id=dTZXanV6UUdyUEQ0SHNWOVhpSXNMUT09

6. Gabriel, S. P. (2014). “After the Break”: Re-Conceptualizing Ethnicity, National Identity and 'Malaysian-Chinese' Identities. Ethnic and Racial Studies, 37 (7), 1211-1224. https://doi.org/10.1080/01419870.2014.859286

7. Ganassin, S. (2020). Language, Culture and Identity in Two Chinese Community Schools: More than One Way of Being Chinese?. Multilingual Matters. https://doi.org/10.21832/9781788927239

8. Imamura, M. & Zhang, Y. B. (2014). Functions of the common ingroup identity model and acculturation strategies in intercultural communication: American host nationals’ communication with Chinese international students. International Journal of Intercultural Relations, 43, 227-238. https://doi.org/10.1016/j.ijintrel.2014.08.018

9. Liu, S. (2024a). Week 2: Culture -The luggage we carry [PowerPoint slides]. Learn.UQ. https://learn.uq.edu.au/bbcswebdav/pid-9645438-dt-content-rid-60477638_1/xid-60477638_1

10. Liu, S. (2024b). Week 4 Social Categorisation: Us vs Them [PowerPoint slides]. Learn.UQ. https://learn.uq.edu.au/bbcswebdav/pid-9645460-dt-content-rid-60619025_1/xid-60619025_1

11. Lotman, Y. M. (2005). On the semiosphere. Σημειωτκή-Sign Systems Studies, 33(1), 205-229.

12. Mei, H. G. Y. (2023). Examining the Intersection of Cultural Identities: The Malaysian Chinese Experience. Junctures : the Journal for Thematic Dialogue, 23, 55-71. https://doi.org/10.34074/junc.23004

13. Parasecoli, F. 2011. “Savoring Semiotics: Food in Intercultural Communication.” Social Semiotics, 21(5), 645-663. https://doi.org/10.1080/10350330.2011.578803

14. Seong, G. S. (2015). Penang Chinese Customs and Traditions. Kajian Malaysia : Journal of Malaysian Studies, 33, 135-152. https://www.proquest.com/docview/1761731398

15. Tan, Y. S. & Teoh, H. S. (2014) The Development of Chinese Education in Malaysia, 1952-1975: Political Collaboration Between the Malaysian Chinese Association and the Chinese Educationists. History of Education (Tavistock), 44(1), 83-100. https://doi.org/10.1080/0046760X.2014.959073

16. Thimm, V. (2016). “I Can Give You Money but There Is No Use. The Best Thing I [can] Give You Is Education.” Negotiating Educational Migration and Gender in a Chinese Malaysian Family. TRaNS(Trans-Regional and -National Studies of Southeast Asia), 4(1), 65-84. https://doi.org/10.1017/trn.2015.25

17. Tomaščíková, S. 2021. “Intercultural Communication, Cultural Code-Switching, Gender and Food.” Current Issues in Philology and Pedagogical Linguistics, (3), 122-130. https://doi.org/10.29025/2079-6021-2021-3-122-130

18. Turner, J. C. & Giles, H. (1981). Introduction. In J. C. Turner & H. Giles (Eds.), Intergroup behavior (pp. 1-32). The University of Chicago Press.

19. Wang, Z. & Yang, H. (2023). The Cultural Distress of Malaysian Chinese:the Prose Collection of the Person Delivering the Kindling by Pan Bihua. Forum for Chinese Literature of the World, (01),113-118. https://doi.org/10.16228/j.issn1008-0163.2023.01.018

20. Zhang, J. & Feng, X. (2022). Ethnic Marginal: the Best Perspective in the Study of the Psychological Development of the Community of the Chinese Nation. Tribune of Education Culture, (04), 55-70. https://doi.org/10.15958/j.cnki.jywhlt.2022.04.009

困困鱼在今天在Halo应用商店上架了自定义邮件模板插件，这个插件能够帮助我们将Halo原始的朴素的通知邮件设计成更加符合网站调性的自定义邮件，另外，也给了我们很多变量方便我们在模板中引用，本文将分享一下又见梅林网站正在使用中的邮件模板和代码。

另外，自定义邮件模板插件配合halo的文章订阅插件将能更好地提升用户粘性。文章订阅插件是一款能够帮助站长提升稳定的访客群体和回访的邮件营销工具，当用户通过订阅表单提交邮箱并完成订阅之后，每当发布新文章时，都会向邮箱列表发送文章更新邮件，包含新文章标题和摘要等关键信息。

又见梅林网站通常在首页和文章页面设置了邮箱订阅表单，茫茫互联网，缘分一线牵，您如果对网站内容感兴趣，您可以在下面这些地方找到订阅表单，或者直接在下方表单中提交您的邮箱以完成订阅。

👆首页订阅表单

订阅系列

众所周知，邮箱会拦截非信任发送者在邮件中附带的图片，但是由于订阅网站的可能都是想和又见梅林常联系的朋友，我觉得你们一定会在收到带有图片的邮件时选择信任发送者吧哈哈哈！所以这个系列我都是带有一些图片资源的，并会隔一段时间更换一下！

确认订阅

由于国内和欧盟、美国等国家对于信息安全的法律，网站经营者需要获得订阅者明确的订阅确认才能批量发送订阅邮件。整体选择顶部图片+介绍和下方通知正文部分的格局，这样的话可能增添了部分趣味性。

代码：

<style>
    @media only screen and (max-width: 500px) {
      body {
        padding: 20px 10px !important;
      }
      .container {
        width: 100% !important;
        padding: 24px 16px !important;
      }
      h2 {
        font-size: 20px !important;
      }
      .cta-button {
        font-size: 14px !important;
        padding: 12px 20px !important;
      }
      .banner-info {
        bottom: 8px !important;
        left: 12px !important;
        padding: 8px 12px !important;
      }
    }
  </style> 
  <div style="margin: 0; padding: 40px 0; background: #f5f6f8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"> 
   <div class="container" style="max-width: 600px; width: 100%; margin: 0 auto; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,0.08);"> 
    <!-- 顶部插图 --> 
    <div style="position: relative; background: #eef1f5;"> 
     <img src="https://img.ryanzm.cn/2025/02/11/67aad70f0cd0d.png" alt="封面图" style="width: 100%; max-height: 180px; display: block; object-fit: cover;" /> 
     <!-- 左下角说明 --> 
     <div class="banner-info" style="position: absolute; bottom: 12px; left: 20px; background: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px 16px; border-radius: 12px;"> 
      <div style="font-size: 13px; margin-bottom: 4px;">
        &#55358;&#57002; 拍摄于开封&middot;清明上河园 
       <a href="https://ryanzm.cn/archives/xin-nian-chu-you-kai-feng-qing-ming-shang-he-yuan" target="_blank" style="display: inline-block; margin-left: 5px; margin-top: 3px; padding: 4px 10px; font-size: 12px; background: #ffffff; color: #333; text-decoration: none; border-radius: 8px;"> 查看文章 </a> 
      </div> 
     </div> 
     <!-- 右上角 Logo --> 
     <img src="https://cdn.ryanzm.cn/mly/logo-light.png" style="position: absolute; top: 16px; right: 20px; width: 20%; opacity: 0.92;" /> 
    </div> 
    <!-- 正文内容 --> 
    <div style="padding: 40px 32px;"> 
     <h2 style="font-size: 22px; color: #333; margin: 0 0 12px;">&#55356;&#57225; 确认订阅</h2> 
     <p style="font-size: 15px; color: #555; line-height: 1.7; margin: 0 0 12px;"> 您好，感谢你选择订阅 <strong style="color: #5561ff;">又见梅林</strong>。 根据中国《个人信息保护法》和其他国家相关法律，邮箱订阅需要由本人确认订阅。</p> 
     <p style="font-size: 15px; color: #555; line-height: 1.7; margin: 0 0 12px;">您的订阅请求还差最后一步！为了保护您的权益，烦请您请点击下面的按钮确认您的订阅。当有新文章发布时，我将第一时间为你送达通知&#55357;&#56556;。 </p> 
     <!-- 按钮 --> 
     <div style="margin: 32px 0; text-align: center;"> 
      <a th:href="${confirmUrl}" class="cta-button" style="display: inline-block; padding: 14px 26px; background: #5561ff; color: #fff; text-decoration: none; font-size: 16px; border-radius: 999px; box-shadow: 0 3px 8px rgba(85,97,255,0.3);"> 确认订阅 → </a> 
     </div> 
     <!-- 底部 --> 
     <div style="font-size: 13px; color: #999; border-top: 1px solid #eee; padding-top: 20px; text-align: center;">
       &copy; 又见梅林. 保留所有权利
      <br /> 此邮件由系统自动发送，请勿直接回复。 
     </div> 
    </div> 
   </div> 
  </div> 

取消订阅

代码：

  <style>
    /* 简易响应式适配 */
    @media only screen and (max-width: 500px) {
      body {
        padding: 20px 10px !important;
      }
      .container {
        width: 100% !important;
        padding: 24px 16px !important;
      }
      h2 {
        font-size: 20px !important;
      }
      .cta-button {
        font-size: 14px !important;
        padding: 12px 20px !important;
      }
      .banner-info {
        bottom: 8px !important;
        left: 12px !important;
        padding: 8px 12px !important;
      }
    }
  </style>

<div style="margin: 0; padding: 40px 0; background: #f5f6f8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
  <div class="container" style="max-width: 600px; width: 100%; margin: 0 auto; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,0.08);">
    <!-- 顶部插图 -->
    <div style="position: relative; background: #eef1f5;">
      <img src="https://img.ryanzm.cn/2025/02/11/67aad523f1468.png" alt="封面图" style="width: 100%; max-height: 180px; display: block; object-fit: cover;" />
      <!-- 左下角说明 -->
      <div class="banner-info" style="position: absolute; bottom: 12px; left: 20px; background: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px 16px; border-radius: 12px;">
        <div style="font-size: 13px; margin-bottom: 4px;">🪪 拍摄于开封·清明上河园
          <a href="https://ryanzm.cn/archives/xin-nian-chu-you-kai-feng-qing-ming-shang-he-yuan" target="_blank" style="display: inline-block; margin-left: 5px; margin-top: 3px; padding: 4px 10px; font-size: 12px; background: #ffffff; color: #333; text-decoration: none; border-radius: 8px;">查看文章</a></div>
      </div>
      <!-- 右上角 Logo -->
      <img src="https://cdn.ryanzm.cn/mly/logo-light.png" style="position: absolute; top: 16px; right: 20px; width: 20%; opacity: 0.92;" /></div>
    <!-- 正文内容 -->
    <div style="padding: 40px 32px;">
      <h2 style="font-size: 22px; color: #333; margin: 0 0 12px;">😢 取消订阅</h2>
      <p style="font-size: 15px; color: #555; line-height: 1.7; margin: 0 0 12px;">您好，取消订阅成功了。</p>
      <p style="font-size: 15px; color: #555; line-height: 1.7; margin: 0 0 12px;">如果您对我有任何建议，请给我留言。如果您误触了取消订阅按钮，点击下面的按钮可以重新订阅我！</p>
      <!-- 按钮 -->
      <div style="margin: 32px 0; text-align: center;">
        <a th:href="${confirmUrl}" class="cta-button" style="display: inline-block; padding: 14px 26px; background: #5561ff; color: #fff; text-decoration: none; font-size: 16px; border-radius: 999px; box-shadow: 0 3px 8px rgba(85,97,255,0.3);">重新订阅 →</a></div>
      <!-- 底部版权 -->
      <div style="font-size: 13px; color: #999; border-top: 1px solid #eee; padding-top: 20px; text-align: center;">© 又见梅林. 保留所有权利
        <br>此邮件由系统自动发送，请勿直接回复。</div></div>
  </div>
</div>

订阅文章推送

订阅文章推送采用类似微信朋友圈的样式，给人一种刷动态的感觉。已经做好了移动端适配，移动端中图片文字将从左图右文变为上图下文。

👆左侧为PC端，右侧为移动端

代码：

<style>
	@media only screen and (max-width: 500px) { .article-card { flex-direction:
	column !important; } .article-card .image-wrapper { width: 100% !important;
	height: auto !important; } .article-card img.article-image { width: 100%
	!important; height: auto !important; max-height: 120px; object-fit: cover;
	border-radius: 12px 12px 0 0 !important; display: block; } }
</style>
<div style="margin: 0; padding: 40px 0; background: #f5f6f8; font-family: Helvetica, Arial, sans-serif;">
	<!-- 卡片容器 -->
	<div class="container" style="
	max-width: 600px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	">
		<!-- 顶部区域 -->
		<div style="position: relative;">
			<img src="https://img.ryanzm.cn/2025/04/09/67f631ba436f8.png" alt="背景图"
			style="border-radius: 16px 16px 0 0; width: 100%; height: 200px; object-fit: cover; display: block;"
			/>
			<img src="https://cdn.ryanzm.cn/mly/logo-light.png" style="position: absolute; top: 20px; left: 30px; width: 20%; opacity: 0.92;"
			/>
			<div style="position: absolute; bottom: 10px; right: 90px; color: white; font-size: 18px; font-weight: bold; text-shadow: 0 0 4px rgba(0,0,0,0.4);">
				又见梅林
			</div>
			<img src="https://img.ryanzm.cn/2025/01/20/678de9c70a3c8.png" alt="头像"
			style="position: absolute; bottom: -25px; right: 15px; width: 60px; height: 60px; border-radius: 12%; border: 3px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,0.1);"
			/>
		</div>
		<!-- 内容区 -->
		<div style="padding: 10% 8%;">
			<!-- 动态头部 -->
			<div style="display: flex; align-items: center; margin-bottom: 14px;">
				<img src="https://img.ryanzm.cn/2025/01/20/678de9c70a3c8.png" style="width: 36px; height: 36px; border-radius: 15%; margin-right: 10px;"
				/>
				<div style="font-size: 15px; font-weight: bold; color: #3b4c66;">
					又见梅林
				</div>
			</div>
			<!-- 动态文案 -->
			<div style="font-size: 15px; color: #333; line-height: 1.6; margin-bottom: 24px;">
				滴！
				<strong>
					又见梅林
				</strong>
				有新的文章动态啦~
			</div>
			<!-- 左图右文 / 上图下文响应式卡片 -->
			<div class="article-card" style="
			display: flex;
			gap: 16px;
			background: #f7f8fa;
			border-radius: 12px;
			padding: 16px;
			align-items: stretch;
			flex-direction: row;
			">
				<!-- 图片区域 -->
				<div class="image-wrapper" style="flex-shrink: 0; width: 100px; height: auto;">
					<img src="https://ryanzm.cn/upload/bg-3.jpg" class="article-image" alt="文章封面"
					style="width: 100%; height: 100%; object-fit: cover; border-radius: 10px;"
					/>
				</div>
				<!-- 文字区域 -->
				<div style="flex: 1;">
					<a th:href="${postUrl}" th:text="${postTitle}" target="_blank" style="
					margin: 0 0 8px;
					font-size: 16px;
					color: #222;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					">
					</a>
					<p th:text="${postExcerpt}" style="
					margin: 0;
					font-size: 14px;
					color: #666;
					line-height: 1.6;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
					">
					</p>
				</div>
			</div>
			<div style="font-size: 13px; color: #888; line-height: 1.6; margin-top: 15px;">
				发布于
				<span th:text="${postPublishTime}">
				</span>
			</div>
			<!-- CTA按钮 -->
			<div style="text-align: center; margin: 30px 0 0;">
				<a th:href="${postUrl}" target="_blank" style="display: inline-block; background: #5561ff; color: #fff; padding: 12px 28px; font-size: 15px; border-radius: 999px; text-decoration: none; box-shadow: 0 3px 8px rgba(85,97,255,0.15);">
					查看完整内容 →
				</a>
			</div>
			<!-- 底部版权 -->
			<div style="font-size: 13px; color: #999; border-top: 1px solid #eee; padding-top: 20px; text-align: center; margin-top: 40px;">
				© 又见梅林. 保留所有权利
				<br>
				此邮件由系统自动发送，请勿直接回复。
			</div>
		</div>
	</div>
</div>

评论系列

评论回复通知邮件不同于上述订阅系列，是日常使用最频繁、受众面最广的邮件通知形式，而且很大一部分收件人可能只是阅读者并非订阅者，所以不宜在邮件中使用图片这种容易产生误会和不信任的形式。另外，这种邮件通知需要清晰明了地展示信息，所以我用了最直接的方式，但兼具趣味性。

文章/页面评论邮件

采用聊天气泡的样式来简洁明了地展示评论内容，并且基本上没有额外的css：

文章评论邮件代码：

<div style="margin: 0; padding: 40px 0; background: #f5f6f8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
	<!-- 卡片容器 -->
	<div style="max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); overflow: hidden;">
		<!-- 顶部栏 -->
		<div style="background: #5561ff; color: #fff; padding: 20px 30px;">
			<h2 style="margin: 0; font-size: 18px;">
				💬 你收到了新的评论
			</h2>
		</div>
		<!-- 主体内容 -->
		<div style="padding: 30px; font-size: 14px; color: #333; line-height: 1.7;">
			<!-- 称呼 -->
			<p>
				<strong th:text="${subscriber.displayName}">
				</strong>
				，你好！
			</p>
			<!-- 引导说明 -->
			<p>
				<span th:text="${commenter}">
				</span>
				在
				<strong>
					又见梅林
				</strong>
				网站评论了你的文章
				<a th:href="${postUrl}" target="_blank" th:text="|《${postTitle}》|" style="color: #5561ff; text-decoration: none;">
				</a>
				，以下是评论内容：
			</p>
			<hr style="border: none; border-top: 1px solid #eee; margin: 24px 0;">
			<!-- 聊天式评论区域 -->
			<strong>
				<div style="font-size: 13px; color: #888; margin-bottom: 4px;" th:text="${commenter} + '：'">
				</div>
			</strong>
			<div style="display: flex; align-items: flex-start; margin-top: 10px;">
				<!-- 气泡评论块 -->
				<div style="
				position: relative;
				background: #f2f4f7;
				padding: 12px 16px;
				border-radius: 10px;
				font-size: 14px;
				color: #333;
				line-height: 1.6;
				max-width: 100%;
				">
					<span th:text="${content}">
					</span>
					<!-- 小尾巴 -->
					<span style="
					position: absolute;
					left: -10px;
					top: 10px;
					width: 0;
					height: 0;
					border-top: 2px solid transparent;
					border-bottom: 8px solid transparent;
					border-right: 10px solid #f2f4f7;
					">
					</span>
				</div>
			</div>
			<!-- 按钮 -->
			<div style="text-align: center; margin-top: 30px;">
				<a th:href="${postUrl}" target="_blank" style="display: inline-block; background: #5561ff; color: #fff; padding: 12px 28px; font-size: 15px; border-radius: 999px; text-decoration: none; box-shadow: 0 3px 8px rgba(85,97,255,0.15);">
					👉 查看原文和评论
				</a>
			</div>
		</div>
		<!-- 底部 -->
		<div style="font-size: 13px; color: #999; text-align: center; padding: 20px 20px 30px; border-top: 1px solid #eee;">
			© 又见梅林. 保留所有权利
			<br>
			本邮件由系统自动发送，请勿直接回复
		</div>
	</div>
</div>

页面评论邮件代码：

<div style="margin: 0; padding: 40px 0; background: #f5f6f8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">

	<!-- 卡片容器 -->
	<div style="max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); overflow: hidden;">

		<!-- 顶部栏 -->
		<div style="background: #5561ff; color: #fff; padding: 20px 30px;">
			<h2 style="margin: 0; font-size: 18px;">💬 你收到了新的评论</h2>
		</div>

		<!-- 主体内容 -->
		<div style="padding: 30px; font-size: 14px; color: #333; line-height: 1.7;">

			<!-- 称呼 -->
			<p>
				<strong th:text="${subscriber.displayName}"></strong>，你好！
			</p>

			<!-- 引导说明 -->
			<p>
				<span th:text="${commenter}"></span> 在 <strong>又见梅林</strong> 网站评论了你的页面
				<a th:href="${pageUrl}" target="_blank" th:text="|《${pageTitle}》|"
				   style="color: #5561ff; text-decoration: none;"></a>，以下是评论内容：
			</p>

			<hr style="border: none; border-top: 1px solid #eee; margin: 24px 0;">

			<!-- 聊天式评论区域 -->
			<strong>
				<div style="font-size: 13px; color: #888; margin-bottom: 4px;" th:text="${commenter} + '：'"></div>
			</strong>
			<div style="display: flex; align-items: flex-start; margin-top: 10px;">



				<!-- 气泡评论块 -->
				<div style="
          position: relative;
          background: #f2f4f7;
          padding: 12px 16px;
          border-radius: 10px;
          font-size: 14px;
          color: #333;
          line-height: 1.6;
          max-width: 100%;
        ">
					<span th:text="${content}"></span>
					<!-- 小尾巴 -->
					<span style="
            position: absolute;
            left: -10px;
            top: 10px;
            width: 0;
            height: 0;
            border-top: 2px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 10px solid #f2f4f7;
          "></span>
				</div>
			</div>

			<!-- 按钮 -->
			<div style="text-align: center; margin-top: 30px;">
				<a th:href="${pageUrl}" target="_blank"
				   style="display: inline-block; background: #5561ff; color: #fff; padding: 12px 28px; font-size: 15px; border-radius: 999px; text-decoration: none; box-shadow: 0 3px 8px rgba(85,97,255,0.15);">
					👉 查看原文和评论
				</a>
			</div>
		</div>

		<!-- 底部 -->
		<div style="font-size: 13px; color: #999; text-align: center; padding: 20px 20px 30px; border-top: 1px solid #eee;">
			© 又见梅林. 保留所有权利
			<br> 本邮件由系统自动发送，请勿直接回复
		</div>

	</div>
</div>

评论回复邮件

评论回复邮件会直接发送给用户，是网站的门面，依旧采用气泡对话地样式，简洁明了地传递信息。

代码：

<div style="margin: 0; padding: 40px 0; background: #f5f6f8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
	<div style="max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); overflow: hidden;">
		<!-- 顶部 -->
		<div style="background: #5561ff; color: #fff; padding: 20px 30px;">
			<h2 style="margin: 0; font-size: 18px;">
				💬 您收到了一条新回复
			</h2>
		</div>
		<!-- 主体 -->
		<div style="padding: 30px; font-size: 14px; color: #333; line-height: 1.7;">
			<p>
				<strong th:text="${subscriber.displayName}">
				</strong>
				，您好！
				<br>
				您在
				<strong>
					又见梅林
				</strong>
				网站的评论收到新回复，以下是您与
				<strong th:text="${replier}">
				</strong>
				的对话：
			</p>
			<hr style="border: none; border-top: 1px solid #eee; margin: 24px 0;">
			<!-- 你自己的评论（左气泡） -->
			<div style="margin: 28px 0;">
				<strong>
					<div style="font-size: 13px; color: #888; margin-bottom: 4px;" th:text="${subscriber.displayName} + '：'">
					</div>
				</strong>
				<div style="
				position: relative;
				background: #f1f3f5;
				padding: 12px 16px;
				border-radius: 12px;
				font-size: 14px;
				color: #333;
				line-height: 1.6;
				max-width: 90%;
				display: inline-block;
				">
					<span th:text="${isQuoteReply} ? ${quoteContent} : ${commentContent}">
					</span>
					<!-- 左尾巴 -->
					<span style="
					position: absolute;
					left: -10px;
					top: 12px;
					width: 0;
					height: 0;
					border-top: 2px solid transparent;
					border-bottom: 8px solid transparent;
					border-right: 10px solid #f1f3f5;
					">
					</span>
				</div>
			</div>
			<!-- ta 的回复（右气泡） -->
			<div style="margin: 28px 0; text-align: right;">
				<strong>
					<div style="font-size: 13px; color: #888; margin-bottom: 4px;" th:text="${replier} + '：'">
					</div>
				</strong>
				<div style="
				position: relative;
				background: #5561ff;
				padding: 12px 16px;
				border-radius: 12px;
				font-size: 14px;
				color: #333;
				line-height: 1.6;
				max-width: 90%;
				display: inline-block;
				text-align: left;
				">
					<span th:text="${content}" style="color: #fff;">
					</span>
					<!-- 右尾巴 -->
					<span style="
					position: absolute;
					right: -10px;
					top: 12px;
					width: 0;
					height: 0;
					border-top: 2px solid transparent;
					border-bottom: 8px solid transparent;
					border-left: 10px solid #5561ff;
					">
					</span>
				</div>
			</div>
			<!-- 查看按钮 -->
			<div style="text-align: center; margin-top: 36px;">
				<a th:href="${commentSubjectUrl}" target="_blank" style="display: inline-block; background: #5561ff; color: #fff; padding: 12px 28px; font-size: 15px; border-radius: 999px; text-decoration: none; box-shadow: 0 3px 8px rgba(85,97,255,0.15);">
					👉 点击查看完整对话
				</a>
			</div>
		</div>
		<!-- 底部 -->
		<div style="font-size: 13px; color: #999; text-align: center; padding: 20px 20px 30px; border-top: 1px solid #eee;">
			© 又见梅林. 保留所有权力
			<br>
			本邮件由系统自动发送，请勿直接回复。
		</div>
	</div>
</div>

站务系列

另外，还有其他形式的通知邮件，如密码重置请求、用户登录邮箱验证等，由于本站没有开放用户注册，所以这类邮件只有站长本人能看到，那就偷偷懒，先没有做，后续可能会补上！

密码重置邮件

好吧，也是做了密码重置邮件（示例）：

代码：

<div style="margin: 0; padding: 40px 0; background: #f5f6f8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
	<div style="max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); overflow: hidden;">
		<!-- 顶部区域 -->
		<div style="background: #5561ff; color: #fff; padding: 20px 30px;">
			<h2 style="margin: 0; font-size: 20px;">
				🔐 密码重置请求
			</h2>
		</div>
		<!-- 内容区域 -->
		<div style="padding: 30px; font-size: 15px; color: #333; line-height: 1.7;">
			<!-- 称呼 -->
			<p>
				<strong th:text="${username}">
				</strong>
				，你好！
			</p>
			<!-- 引导 -->
			<p>
				你刚刚请求了重置
				<strong>
					又见梅林
				</strong>
				网站的密码，你可以点击下面的链接完成密码重置：
			</p>
			<!-- 链接按钮 -->
			<div style="text-align: center; margin: 30px 0;">
				<a th:href="${link}" style="
				display: inline-block;
				background: #5561ff;
				color: #fff;
				text-decoration: none;
				padding: 12px 24px;
				font-size: 15px;
				border-radius: 999px;
				box-shadow: 0 3px 10px rgba(85,97,255,0.2);
				">
					🔐 点击重置密码
				</a>
			</div>
			<!-- 明文备用链接 -->
			<p style="font-size: 13px; color: #888;">
				如果上面的按钮无法点击，请将以下链接复制到浏览器中打开：
			</p>
			<div style="background: #f2f3f5; padding: 10px 14px; font-size: 13px; border-radius: 8px; word-break: break-all;">
				<span th:text="${link}">
				</span>
			</div>
			<!-- 有效期提示 -->
			<p th:text="|链接有效期为 ${expirationAtMinutes} 分钟，请尽快完成操作。|">
			</p>
			<!-- 忽略说明 -->
			<p style="margin-top: 20px;">
				如果你没有发起该请求，请忽略此邮件，你的账户信息依然安全。
			</p>
		</div>
		<!-- 底部 -->
		<div style="font-size: 13px; color: #999; text-align: center; padding: 20px 20px 30px; border-top: 1px solid #eee;">
			© 又见梅林. 保留所有权利
			<br>
			此邮件由系统自动发送，请勿直接回复。
		</div>
	</div>
</div>

写在最后

茫茫互联网，缘分一线牵，您如果对网站内容感兴趣，您可以在下面这些地方找到订阅表单，或者直接在下方表单中提交您的邮箱以完成订阅。

原创内容，转载请告知

引言

以Facebook、Instagram、X和微博为代表的社交媒体平台，为用户提供了内容生产、人际互动与情感交流的数字空间（Ruz et al., 2020）。我们见证了数字权力格局的嬗变与网络名人的崛起，这种由人类与非人类行动者共同构建的内容生产与社交参与的繁荣图景（Yu et al., 2024）。然而，人工智能、算法与自动化技术引发的变革，也在动摇以人类为中心的社交参与堡垒（Walter，2024）。"互联网已死"的命题正引发学界与业界的广泛关注（Griffin，2024），甚至催生专门网站对此理论进行系统阐释: https://thedeadinternettheory.com/ 。这种对"死亡互联网"的反思，本质上是对数字空间中人类主体性与存在论的深层叩问。

推荐阅读：

https://www.computerworld.com/article/3632173/meta-puts-the-dead-internet-theory-into-practice.htmlhttps://epicvr.pl/en/dead-internet-theory-is-the-internet-we-know-dead/https://distractionmagazine.com/dead-internet-theory/https://www.unsw.edu.au/newsroom/news/2024/05/-the-dead-internet-theory-makes-eerie-claims-about-an-ai-run-web-the-truth-is-more-sinister

死亡互联网理论 （Dead Internet Theory）从两个维度展开批判：

• 其一，AI技术与平台推荐算法的深度应用，使数字公民陷入社交机器人与算法的包围之中，生成式AI与大模型生产的内容洪流，以及程式化的情感互动，正在削弱人类对数字空间的参与、创造与形塑能力（Walter，2024）；

• 其二，Zarkadakis（2022）对数字基础设施与人权的反思，将数字寡头（地主）与用户（佃农）的类比，揭示了数字人权从政府向科技企业的让渡过程中，人类数字身份因推送算法的时间权力不平等而被驯化，持续沦为数字劳工的困境。

尽管该理论常被视为阴谋论，但其对数字空间权力结构与人类主体性危机的洞察，为人机交互伦理研究提供了重要视角。本文以死亡互联网理论为切入点，通过数字权力资源理论与行动者网络理论的双重视角，探讨数字权力博弈与虚拟影响者如何重构社交媒体传播生态。结合商业与政治领域的典型案例，辩证分析人机互动的繁荣图景与潜在危机。

数字权力博弈：基于数字权力资源理论的解读

数字资本主义（Schiller，1999）与数字权力资源理论（Kemmerling & Trampusch，2023）为解析死亡互联网理论提供了理论框架。掌握数据、技术与基础设施的科技巨头，通过对数据可及性的控制构建数字依赖关系，这种结构性优势加剧了数字权力博弈（Kemmerling & Trampusch，2023）。Castells（2004）提出的信息化主义理论(Informationalism)，既肯定数字基础设施赋能大众实现阶层跨越与信息平权的可能性，也揭示数字空间的新型剥削形式——平台化进程中"免费"时间的殖民化与无偿劳动的普遍化（Pulignano et al., 2024）。在社交媒体构建的注意力经济中，用户兼具生产者与消费者双重身份，其内容生产与使用行为构成未被承认的数字劳动。仅有少数网络名人通过资本与团队运作，在商业成功与声誉积累中赢得数字权力博弈（Roy & Gupta，2018）。

Zarkadakis（2020）的批判性视角表明，算法机制与有限注意力经济的结合，将数字劳动、剥削与监控整合为系统性权力博弈，加剧数字空间的阶层分化。这构成反思死亡互联网理论的第一个前提：数字权力博弈为自动化机器人、AI生成内容等技术侵蚀人类社交互动基础提供制度温床，进而引向该理论的第二个批判维度。

人类主体性消解：行动者网络理论的视角

基于行动者网络理论（Actor Network Theory）（Law，2008），社交媒体空间中的人类用户、社交机器人、算法系统等异质性行动者构成动态网络。Twitter、TikTok等平台通过精密算法塑造用户身份，挖掘潜在影响者，其运作机制已然催生自动化机器人农场与粉丝工厂的产业化（Yang et al., 2019）。这些社交机器人以训练有素的数字军团形态，通过点赞、转发、评论等集体行动制造虚假繁荣。Hajli等（2022）的研究证实，社交机器人能够主动放大人类情感，触发愤怒情绪的病毒式传播（Shi et al., 2020）。AI生成的虚拟主播与人工影响者更深度介入政治与商业领域，通过可见性操演影响公众认知（Block & Lovegrove，2021）。

社交媒体作为公众信息获取与意见形成的重要场域（Li等，2023），正经历人机交互范式的革命性转变。AI生成内容与虚拟影响者的参与，实质上反映了数字资本主义制度下技术革命对传统传播秩序的颠覆。这种对AI驱动内容与自动化技术的忧虑，构成死亡互联网理论的第二个批判前提。

从内容生产到受众参与：商业与政治案例

内容生产端的虚拟革命：以CGI影响者Miquela为例

美国Brud公司打造的虚拟影响者 Miquela，https://www.miquela.fyi/ 以其Instagram平台300万粉丝构建的数字身份，开创了后人类时代的传播范式革命（Hsu，2019）。这个由算法生成的数字身体，通过精心设计的时尚叙事与身体展演，在物理性缺席中实现技术在场。其身体政治展演实为技术-资本联合体对集体意识的符号规训：粉丝对虚拟身体的模仿与再创作，本质上是数字资本主义通过欲望机器进行的认知殖民。技术资本的货币化逻辑（Shilling，2012），在此过程中完成经济资本、文化资本与社会资本的三重转换，形成新型数字权力拓扑结构。当技术允许虚拟身体突破物质性桎梏，构建"具身离身化"的社交关系时（Stevens，2022），人类主体性正面临梅洛-庞蒂现象学意义上的认知危机——物理身体的知觉优先性被数字具身性解构，形成德勒兹式的"无器官身体"认知困境。

推荐阅读：

https://agoradigital.art/blog-who-is-miquela-sousa/https://www.36kr.com/p/1748926103909641https://www.cut-the-saas.com/ai/the-ai-behind-virtual-influencer-lil-miquelahttps://www.thecut.com/2018/05/lil-miquela-digital-avatar-instagram-influencer.html

受众端的算法操控：社交机器人的政治实践

《纽约时报》披露的"粉丝工厂"（The Follower Factory）事件（Confessore等，2018），揭示了社交机器人从商业工具向政治武器的范式转变。这些由AI驱动的数字军团，已从简单的关注、点赞等原子化行为，进化为具备集体行动能力的认知战部队。在新冠疫苗议题中，8.87%的社交机器人通过情感计算技术，在议题网络传播链的关键节点实施情绪操控（Zhang等，2022），解构了哈贝马斯意义上的理性交往空间。俄乌冲突中的机器人集群（Li，2023），则通过构建虚拟意见领袖网络，支持了对某一立场的快速传播，将拉图尔的"行动者网络理论"推向技术政治学的实践巅峰——算法不仅中介化社会关系，更通过认知框架预制实现意识形态的自动化生产。这种由技术无意识驱动的认知战争，使得阿伦特强调的"公共领域"沦为算法霸权支配的拟真剧场。

👆 武沛颍,陈昌凤. 社交机器人能否操纵舆论——以Twitter平台的北京冬奥舆情为例[J]. 新闻与写作,2022(9):79-88.

推荐阅读：

https://www.thepaper.cn/newsDetail_forward_9707053https://www.scientificamerican.com/article/how-ai-bots-could-sabotage-2024-elections-around-the-world/https://cnais.sem.tsinghua.edu.cn/info/1073/1661.htmhttps://www.36kr.com/p/1722259636225

反思

本文通过数字权力资源理论与行动者网络理论的双重阐释，揭示死亡互联网理论的两个核心批判维度：其一，数字人权向科技寡头的让渡、注意力经济的算法操控、数字劳动的剥削性结构，共同构成平台、普通用户与影响者间的不平等的权力结构；其二，基于此的数字权力博弈，使得AI生成内容与社交机器人从工具性存在转变为影响社会动态的自主行动者，引发对人类中心社交互动的存在论危机。

我同意”死亡互联网理论“在目前来看是一个阴谋论，但在赛博格时代的数字荒野中，它犹如一面棱镜，折射出技术资本主义下人类主体性的多重困境。本文揭示了数字权力博弈的本质是技术理性对生活世界的殖民化过程，而虚拟行动者的崛起则标志着后人类语境中"技术无意识"的形成。在这一背景下，“死亡互联网”并非字面意义上的终结，而是意味着一个以人类为核心的互联网秩序正在逐渐消解。社交平台不再是用户表达真实自我与构建集体意义的场所，而逐渐演变为算法治理下的“模拟空间”与“注意力市场”。算法不仅中介化社会关系，更通过认知框架的预制实现意识形态的再生产。这种技术无意识的生产机制，使得数字民主沦为算法霸权支配下的拟真剧场。在此过程中，技术、资本与数据逻辑联手塑造了一个以效率、再现性与可预测性为导向的新型社交生态，其中人类行动者与非人类行动者之间的界限日益模糊，而个体的能动性也被逐步压缩为“行为数据”。

这种异化进程暴露了现代性承诺的深层悖论：数字平权运动催生的技术民主化，反而孕育出更隐蔽的技术陷阱。"符号性暴力"在数字空间获得物质载体，平台算法通过微感知调节建构起福柯式的自我技术。用户对点赞量的焦虑、对虚拟身份的沉迷，本质上是被技术理性内化的自我规训。当新冠疫苗讨论中的情感机器人能够操控公共理性时，"交往空间"已然被技术中介掏空其政治本体论意义。

破解这种技术异化的困境，需要构建三重辩证复归路径：在认识论层面，将AI技术视为可驯化的、可用于服务全人类的有力工具；在实践论维度，需推进数字人权从消极自由向积极赋权的范式转换，建立基于认知正义的技术伦理框架；而在存在论高度，必须重新思考在算法社会中守护人类"在世之在"的本真性。这种复归不是对技术进步的浪漫拒斥，而是通过哈贝马斯倡导的交往理性重建，在技术系统中植入人性化的"负熵流"。

欧盟《人工智能法案》对深度伪造的规制以及许多国家政府出台对AI等技术的限制性规定标志着技术政治学的觉醒。但根本性突破在于：能否在数字本体论层面重构"技术-人性"的共生关系，使算法社会从"治理术"走向"共同世界"。这要求我们以现象学姿态重返技术体验的始源情境，在算法编织的意义之网中，守护人类作为意义赋予者的存在论特权——这或许是人类在数字荒野中重建精神家园的终极救赎。

写在最后

如果你觉得我的博客内容还不错，欢迎订阅我的博客，在下方填写您的邮箱可以轻松订阅我，并在我发布更新的时候收到邮件提醒。

References

• Block, E., & Lovegrove, R. (2021). Discordant storytelling, ‘honest fakery’, identity peddling: How uncanny CGI characters are jamming public relations and influencer practices. Public Relations Inquiry, 10(3), 265-293. https://doi.org/10.1177/2046147X211026936

• Castells, M. (2004). Informationalism, networks, and the network society: a theoretical blueprint. In M. Catells (Ed.), The Network Society (pp. 3–46). Edward Elgar Publishing. https://doi.org/10.4337/9781845421663.00010

• Confessore, N., Dance, G. J.X., Harris, R. & Hansen, M. (2018, January 27). The Follower Factory. New York Times. https://www.nytimes.com/interactive/2018/01/27/technology/social-media-bots.html

• Davis, C. A., Varol, O., Ferrara, E., Flammini, A., & Menczer, F. (2016). BotOrNot: A System to Evaluate Social Bots. PROCEEDINGS OF THE 25TH INTERNATIONAL CONFERENCE ON WORLD WIDE WEB (WWW’16 COMPANION), 273–274. https://doi.org/10.1145/2872518.2889302

• Griffin, A. (2024, April 17). Humans now share the web equally with bots, report warns amid fears of the ‘dead internet’. Independent. https://www.independent.co.uk/tech/dead-internet-web-bots-humans-b2530324.html

• Hajli, N., Saeed, U., Tajvidi, M., & Shirazi, F. (2022). Social Bots and the Spread of Disinformation in Social Media: The Challenges of Artificial Intelligence. British Journal of Management, 33(3), 1238–1253. https://doi.org/10.1111/1467-8551.12554

• Hsu, T. (2019, June 17). These Influencers Aren’t Flesh and Blood, Yet Millions Follow Them. New York Times. https://www.nytimes.com/2019/06/17/business/media/miquela-virtual-influencer.html

• Kemmerling M. & Trampusch C. (2023). Digital power resources (DPR): the political economy of structural and infrastructural business power in digital(ized) capitalism, Socio-Economic Review, 21(4), 1851–1876, https://doi.org/10.1093/ser/mwac059

• Law, J. (2008). Actor Network Theory and Material Semiotics. In B. S. Turner (Ed.), The New Blackwell Companion to Social Theory (pp. 141–158). Wiley‐Blackwell. https://doi.org/10.1002/9781444304992.ch7

• Li, Q., Liu, Q., Liu, S., Di, X., Chen, S., & Zhang, H. (2023). Influence of social bots in information warfare: A case study on @UAWeapons Twitter account in the context of Russia–Ukraine conflict. Communication and the Public, 8(2), 54-80. https://doi.org/10.1177/20570473231166157

• Pulignano, V., Marino, S., Johnson, M., Domecka, M., & Riemann, M. L. (2024). ‘Digital Tournaments’: the colonisation of freelancers’ ‘free’ time and unpaid labour in the online platform economy. Cambridge Journal of Economics, 48(1), 133–150. https://doi.org/10.1093/cje/bead042

• Roy, R., & Gupta, N. (2018). Digital Capitalism and Surveillance on Social Networking Sites: A Study of Digital Labour, Security and Privacy for Social Media Users. In A. K. Kar, S. Sinha, & M. P. Gupta (Eds.), Digital India (pp. 67–81). Springer International Publishing AG. https://doi.org/10.1007/978-3-319-78378-9_4

• Ruz, G. A., Henríquez, P. A., & Mascareño, A. (2020). Sentiment analysis of Twitter data during critical events through Bayesian networks classifiers. Future Generation Computer Systems, 106, 92-104. https://doi.org/10.1016/j.future.2020.01.005

• Schiller, D. (1999). Digital capitalism: Networking the global market system. MIT press.

• Shi, W., Liu, D., Yang, J., Zhang, J., Wen, S., & Su, J. (2020). Social Bots’ Sentiment Engagement in Health Emergencies: A Topic-Based Analysis of the COVID-19 Pandemic Discussions on Twitter. International Journal of Environmental Research and Public Health, 17(22), 8701. https://doi.org/10.3390/ijerph17228701

• Shilling, C. (2012). The body and social theory (3rd ed.). Sage Publications. https://doi.org/10.4135/9781473914810

• Stevens, K. (2022). The digital human something; or, the case of Miquela. Screen (London), 63(1), 130–136. https://doi.org/10.1093/screen/hjac008

• Walter, Y. (2024). Artificial influencers and the dead internet theory. AI & Society. https://doi.org/10.1007/s00146-023-01857-0

• Yang, K. C., Varol, O., Davis, C. A., Ferrara, E., Flammini, A., & Menczer, F. (2019). Arming the public with artificial intelligence to counter social bots. Human Behavior and Emerging Technologies, 1(1), 48-61.

• Yu, J., Dickinger, A., So, K. K. F., & Egger, R. (2024). Artificial intelligence-generated virtual influencer: Examining the effects of emotional display on user engagement. Journal of Retailing and Consumer Services, 76, 103560. https://doi.org/10.1016/j.jretconser.2023.103560

• Zarkadakis, G. (2022). The Internet Is Dead: Long Live the Internet. In H. Werthner, E. Prem, E. A. Lee, & C. Ghezzi (eds), Perspectives on Digital Humanism. Springer, Cham. https://doi.org/10.1007/978-3-030-86144-5_7

• Zhang, M., Chen, Z., Qi, X., & Liu, J. (2022). Could Social Bots’ Sentiment Engagement Shape Humans’ Sentiment on COVID-19 Vaccine Discussion on Twitter? Sustainability, 14(9), 5566. https://doi.org/10.3390/su14095566

首先！要给各位朋友们说一声抱歉，最近由于我在申请博士和博士奖学金，以及这学期第一波课程作业和考试的来临，我忙的是昏头转向，很多意料之外的事情集中地出现在我的视野之中，让我有点应接不暇，所以博客一直没有更新。这几天一看，网站主题授权也挂了，图片也挂了。在8号紧急修复一波，并给大家报告一下最近发生的日常小事。

首先，给大家报告一下，经过努力我获得了博士录取通知书，但是由于昆士兰大学不允许接收自费博士，所以，我需要额外申请一个全奖奖学金来cover掉我的学费和生活费。目前奖学金的申请也已经提交了，等待六月份出结果。

抵达

坐了十个小时的飞机，终于在2月24日抵达了布里斯班，已经是第三次抵达布里斯班国际机场了。

新住处

用Uber叫到了特斯拉，半个小时从机场到达了新住处所在的Toowong区，去年我住的是学生公寓的studio，带卫生间、厨房，包含一个人居住所需的所有地方和设备，但是仅仅只有16平米，而且窗户封死不能打开，就这样的房间519刀/周。今年开始我就和朋友一起找了新的2B2B，也就是两室两厅，包含两个带有卫生间的卧室和客厅厨房等公共区域，总共100多平米的房间需要大概520刀/周。客厅和卧室自带的大阳台看着很舒心。

飓风

开学第二周，就在小红书接到了布里斯班即将迎接飓风Alfred的正面袭击。一开始预报将达到二级飓风，也就是差不多12级台风。按照往年的经验，布里斯班这个海边城市，将受到巨大影响。特别是布里斯班处于丘陵地带，很多地方处于低处，会有很大洪水的风险。

政府发布的洪水信息可以看到，昆士兰大学大部分都将被洪水淹没，以及布里斯班市中心、Southbank、Westend和Toowong区域。与此同时，昆士兰大学发布了飓风信息，并表示将在3月11日开始封校，不准任何人进出学校。根据前人经验，飓风导致的洪水可能会淹没部分街道的变电站，这可能会导致停电停水之类的能源供应短缺。

而这时，我才想起来没有去超市采购，因为洪水可能导致超市供应短缺，而学校也建议我们屯一周以上的食物和水。于是，进入超市我们发现了下面的情景——所有的矿泉水全部都被抢购一空，剩下的饮料也所剩无几，甚至运动补剂等功能饮料也基本上都卖完了。

于是，我选择住在我朋友家，她们家地势高，受影响程度应该很小。在朋友家里呆了一周的时间，这段时间布里斯班的人多多少少都在准备如何抵御，学校停课，所以我们没有花很多时间学习，大部分时候都在聊天和玩游戏。

还有——做饭

果然停电了

该来的还是来了，我住的公寓那一条街还是停电了，所幸朋友家没有停电！这期间，我们还开车去了机场接另外一个朋友，大雨瓢泼就像是给挡风玻璃覆盖了一层毛玻璃滤镜。

自从我们家停电之后，我就一直想回去看看，因为想转移一下家里冰箱里面的食物。

结果到家一看，一整个大惊喜——卧室有点渗水了。。。。。我们紧急操作了一番留下证据发给了公寓物业，让他们知悉并采取进一步行动。可怜我的浴巾和毛巾都用来吸水并阻挡水进一步漫进来。

飓风过后

排骨藕汤

去华人区买藕想给朋友做一下湖北有名的排骨藕汤。没想到藕那么贵！两节藕花了25刀！比肉贵多了。。

另外，请大家吃湖北小吃-襄阳牛肉面、面窝、豆皮和藕夹

最后，给麦麦留一个位置！

麦麦最近出了新品，蜂蜜辣鸡腿堡，还是很不错的，我排队等餐的时候，隔壁肯德基的员工也来排队买了（你为啥屁股上都是面粉啊！）

写在最后

最近我依旧面临比较多的作业和任务需要完成，可能没办法像之前一样更新，但是我会尽量尽快将目前的生活状态发出来，等到四月中旬期中假期再好好完善。

希望大家可以订阅我的博客，填写您的邮箱可以在我发布更新的时候收到提醒。

本文介绍了两个适合Halo代码示例，分别是新增自定义链接卡片和我的设备页面。

1.链接卡片

Halo有链接卡片插件，但是很多网站都没有办法获取图片等资源，导致整个卡片都非常丑，包括下面这样的丑陋卡片（携程和又见梅林自己的网站）：

于是在这个文章发布一下链接卡片的代码，已经将CSS样式置入主题，文章发布可以直接使用HTML代码。包含封面图片、标题、副标题和链接，已完成手机端自适应。下面是PC端和手机端的效果预览。

效果预览：

新年出游·开封清明上河园：节目表演、打铁花、烟花秀

大年初五结束了万岁山武侠城的游览，初六第二站来到开封清明上河园，依旧人山人海。主要观赏的表演和节目有：岳飞枪挑小梁王、东京保卫战、打铁花烟花秀……

https://ryanzm.cn/archives/xin-nian-chu-you-kai-feng-qing-ming-shang-he-yuan

代码：

CSS:

/* 卡片容器 */
    .xd-link-card {
        --blur-radius: 20px;
        --bg-opacity: 0.88;
        --bg-image: none;

        display: flex;
        width: 100%;
        margin: 20px auto;
        background: white;
        border-radius: 15px;
        overflow: hidden;
        border: 1px solid #e0e0e0;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.3s ease;
        position: relative;
    }

    /* 图片区域 */
    .xd-card-image {
        flex: 0 0 180px;
        position: relative;
        z-index: 1;
    }

    .xd-card-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 15px;
        padding: 10px;
    }

    /* 内容区域 */
    .xd-card-content {
        flex: 1;
        padding: 20px 30px 10px 20px;
        position: relative;
        isolation: isolate;
        display: flex;                
        flex-direction: column;       
        justify-content: center;      
        min-height: 130px;            
    }

    /* 背景模糊特效 */
    .xd-card-content::before {
        content: '';
        position: absolute;
        top: -15%;
        left: -15%;
        right: -15%;
        bottom: -15%;
        background-image: 
            linear-gradient(
                rgba(255, 255, 255, var(--bg-opacity)),
                rgba(255, 255, 255, var(--bg-opacity))
            ),
            var(--bg-image);
        background-blend-mode: luminosity;
        background-position: center;
        background-size: cover;
        filter: blur(var(--blur-radius)) saturate(1.8);
        z-index: -1;
    }

    /* 文字内容 */
    .xd-card-title {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 13px;
    }

    .xd-card-icon {
        height: 22px;
        width: 22px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .xd-card-title-text {
        font-size: 19px;
        color: #333;
        line-height: 1.3;
        text-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .xd-card-description {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
      margin-bottom: 12px;
    }

    .xd-card-url {
        display: inline-block;
        color: #0066cc;
        font-size: 12px;
        pointer-events: none;
        line-height: 1.2;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .xd-link-card {
            flex-direction: column;
            --blur-radius: 15px;
            --bg-opacity: 0.92;
        }

        .xd-card-image {
            height: 160px;
            flex-basis: auto;
        }

        .xd-card-image img {
            border-radius: 15px;
        }

        .xd-card-content {
            padding: 16px;
            justify-content: flex-start;  
            min-height: auto;             
        }

        .xd-card-title {
            gap: 8px;
        }

        .xd-card-icon {
            height: 20px;
            width: 20px;
        }

        .xd-card-title-text {
            font-size: 18px;
        }
    }

HTML:

<a href="https://ryanzm.cn/archives/xin-nian-chu-you-kai-feng-qing-ming-shang-he-yuan" 
   class="xd-link-card" 
   style="--bg-image: url('https://img.ryanzm.cn/2025/02/11/67aad523f1468.png')">
    <div class="xd-card-image">
        <img src="https://img.ryanzm.cn/2025/02/11/67aad523f1468.png">
    </div>
    <div class="xd-card-content">
        <h2 class="xd-card-title">
            <img class="xd-card-icon" 
                 src="https://img.ryanzm.cn/2024/11/09/672f4d983a839.png">
            <span class="xd-card-title-text">新年出游·开封清明上河园：节目表演、打铁花、烟花秀</span>
        </h2>
        <p class="xd-card-description">
            大年初五结束了万岁山武侠城的游览，初六第二站来到开封清明上河园，依旧人山人海。主要观赏的表演和节目有：岳飞枪挑小梁王、东京保卫战、打铁花烟花秀……
        </p>
        <span class="xd-card-url">https://ryanzm.cn/archives/xin-nian-chu-you-kai-feng-qing-ming-shang-he-yuan</span>
    </div>
</a>

注意使用时需要关闭文章-设置的自动序号，使用HTML需要修改：<--bg-image: url> <img> <p> <span>

2.我的装备页面

新增了一个我的设备页面用来推荐我使用的好物，持续更新中。

PC端每行3个，移动端每行1个，包含设备图片、标题、副标题、评价文字和打分。您可以点击下面链接卡片跳转查看或者直接看下面的嵌入预览：

预览：

我的设备-又见梅林

https://ryanzm.cn/device

下方嵌入浏览：

代码：

CSS：

        .device-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 5px;
        }

        .device-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .device-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            transition: transform 0.3s;
        }

        .device-card:hover {
            transform: translateY(-5px);
        }

        .device-image {
            width: 100%;
            height: 220px;
            object-fit: contain;
            margin-bottom: 15px;
        }

        .device-title {
            font-size: 20px;
            color: #333;
            margin-bottom: 10px;
        }

        .device-subtitle {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
            line-height: 1.6;
        }

        .device-review {
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 12px;
            margin: 15px 0;
            background: #f9f9f9;
        }

        .device-review-text {
            font-size: 13px;
            color: #444;
            line-height: 1.5;
            margin-bottom: 8px;
        }

        .device-star-rating {
            display: flex;
            gap: 3px;
        }

        .device-star {
            color: #ffb400;
            font-size: 18px;
        }

        .device-button {
            display: block;
            width: 100%;
            text-align: center;
            background: linear-gradient(135deg, #ff8000, #ff5500);
            color: white;
            padding: 5px 0;
            border-radius: 15px;
            text-decoration: none;
            font-size: 15px;
            transition: opacity 0.3s;
        }

        .device-button:hover {
            opacity: 0.9;
        }

        @media (min-width: 768px) {
            .device-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 767px) {
            .device-grid {
                grid-template-columns: 1fr;
            }

            .device-card {
                padding: 15px;
            }
        }

HTML：

<h1 style="padding: 30px 0px 20px 0px; text-align: center;">办公设备</h1><div class="device-container">
        <div class="device-grid">
            <!-- 设备1 -->
            <div class="device-card">
                <img src="https://img.ryanzm.cn/2025/02/18/67b4617fc8684.jpg" class="device-image">
                <h3 class="device-title">iPhone 14 Pro</h3>
                <p class="device-subtitle">暗紫色 256GB 4800万像素主摄</p>
                <div class="device-review">
                    <p class="device-review-text">
                        📱 日常拍摄主力机，ProRAW格式后期空间大，搭配iCloud 2TB云存储，运行聊天、办公软件、视频图片处理软件以及游戏等健步如飞。
                    </p>
                    <div class="device-star-rating">
                        <span class="device-star">★★★★★</span>
                    </div>
                </div>
                <a href="#" class="device-button">查看详情</a>
            </div>

            <!-- 设备2 -->
            <div class="device-card">
                <img src="https://img.ryanzm.cn/2025/02/18/67b4682defde2.jpg" class="device-image">
                <h3 class="device-title">联想拯救者游戏本Y7000P</h3>
                <p class="device-subtitle">32GB 1TB固态 4060</p>
                <div class="device-review">
                    <p class="device-review-text">
                        💻 伴随本科时期媒体和文字作业，也用它打游戏，完美运行PR、AE等软件，偶尔没保存蓝屏重启，见证了GPA飞跃。现在是我跑研究数据的机器。
                    </p>
                    <div class="device-star-rating">
                        <span class="device-star">★★★★★</span>
                    </div>
                </div>
                <a href="#" class="device-button">查看详情</a>
            </div>

            <!-- 设备3 -->
            <div class="device-card">
                <img src="https://img.ryanzm.cn/2025/02/18/67b46f24198b2.jpg" class="device-image">
                <h3 class="device-title">小米 Redmi Book Pro 14</h3>
                <p class="device-subtitle">锐龙版 16GB 512GB 独显</p>
                <div class="device-review">
                    <p class="device-review-text">
                        💻 轻薄本上课做作业专用，在我硕士期间背来背去，写论文码字专用，有时也会用它看看电影。有时候会发烫，但是比前面的超重超响机器便携。
                    </p>
                    <div class="device-star-rating">
                        <span class="device-star">★★★★☆</span>
                    </div>
                </div>
                <a href="#" class="device-button">查看详情</a>
            </div>

                      <!-- 设备4 -->
            <div class="device-card">
                <img src="https://img.ryanzm.cn/2025/02/18/67b47313b11a8.webp" class="device-image">
                <h3 class="device-title">iPad Pro 2024 M4</h3>
                <p class="device-subtitle">银色 256GB M4芯片 11英寸</p>
                <div class="device-review">
                    <p class="device-review-text">
                      上课看PPT记笔记专用，画画、看电影、玩文明6、盖泡面。
                    </p>
                    <div class="device-star-rating">
                        <span class="device-star">★★★★★</span>
                    </div>
                </div>
                <a href="#" class="device-button">查看详情</a>
            </div>
                                <!-- 设备5 -->
            <div class="device-card">
                <img src="https://img.ryanzm.cn/2025/02/18/67b473d5c7d6a.jpg" class="device-image">
                <h3 class="device-title">Apple Pencil Pro</h3>
                <p class="device-subtitle">磁吸 适用于Pad Pro (M4)/Air (M2)</p>
                <div class="device-review">
                    <p class="device-review-text">
                      与iPad画画、做笔记搭配使用，但是经常用的时候忘记充电。
                    </p>
                    <div class="device-star-rating">
                        <span class="device-star">★★★★☆</span>
                    </div>
                </div>
                <a href="#" class="device-button">查看详情</a>
            </div>
          <!-- 设备6 -->
            <div class="device-card">
                <img src="https://img.ryanzm.cn/2025/02/18/67b474cda746b.webp" class="device-image">
                <h3 class="device-title">Apple Watch Series 10</h3>
                <p class="device-subtitle">亮黑色 GPS版 46mm</p>
                <div class="device-review">
                    <p class="device-review-text">
                      看时间、看通知、检测心脏健康、更多玩法还在探索中…
                    </p>
                    <div class="device-star-rating">
                        <span class="device-star">★★★★☆</span>
                    </div>
                </div>
                <a href="#" class="device-button">查看详情</a>
            </div>
        </div>
    </div>

注意：使用iphone查看视频将得到最佳观感

提示：本文含有神秘色彩内容，请尊重当地文化习俗

什么是“僵狮子”？

从小到大，每年元宵，武汉大地总有一处热闹非凡，锣鼓喧天，我自小就耳濡目染，基本上每年亲历。黄陂孝感地区（主要集中于武汉市黄陂区和孝感市孝南区）的元宵节民俗文化以舞龙舞狮为代表，在元宵节期间共同构成当地独特的节庆景观。根据我查阅文献，黄陂区天河街道、滠口街道、横店街道、武湖街道等地以舞龙灯、玩北派醒狮为特色，而黄陂区王家河街道、罗汉寺街道，李家集街道、祁家湾街道、蔡家榨街道、六指街道以及孝感南部杨店等地则热衷于玩僵狮子。

今年我早早联系了好友，来到好友家里看僵狮子，这也是我第二次参与这一民俗活动。根据记载，僵狮子起源于唐代，据传与唐朝玄武门事变相关，距今已有1300多年历史，是当地独有的民俗活动。僵狮子又称“将狮子”和“将军狮子”，因舞狮者（称“马脚”或“将军”）在香薰后进入半清醒状态，被视作天神下凡附体（我觉得和潮汕和福建的传统有相似之处），动作僵硬而得名，马脚上马之后可以“刀枪不入”、“力大无穷，寓意一方天兵天将、保护神下凡游境，驱邪祈福。虽说如此，我作为该文化的"outsider" 很早就思考过这个问题，因为整个黄陂区历来就有舞龙舞狮的传统，从形态上看应该归于北方醒狮，区别于南方醒狮，很多地方的并不是僵狮子，而是单纯舞狮，而部分地区流行的僵狮子这种带有“刀枪不入”、“神力通天”等显著神秘色彩的形式，我个人猜测可能与义和团和太平天国运动在该地区的活动不无关系。

当地人讲究“年小月半大，月半大似年”，外出人员可以过年不回家，但是元宵节必须人人回乡参与盛大的狂欢仪式。每年农历正月十三至十六，持续四天，其中正月十五最为热闹（当然，由于现在抖音自媒体的草根赋权，大大扩展了该民俗活动的广泛可见性，也导致越来越多的“汉口人”慕名驱车前来，人潮汹涌也在一定程度上拉长了该活动的持续时间，现在很多地方从初十就开始了活动并一直持续要正月十六）。另外，该地区的舞龙也颇具地方特色，与一般我们常见的舞龙队的龙灯不同，该地区的龙灯是具有独特地方色彩的高龙，龙头重达几十斤，极大地考验举灯人员。

各村一般很早就开始筹备并龙灯、狮灯，并在正月十二正式拉开活动序幕。主要活动有巡游祈福（我们称为“玩花户”）：龙灯和由“马脚”带领狮队挨家挨户巡游，村民每家每户摆香案、燃爆竹迎狮；上庙仪式：龙狮前往当地保护神所在的土地庙或者大庙拜庙祈福；龙狮巡境：在村境外围巡游为集体祈福；神秘仪式（称为“僵马脚”或者“上马”）：僵狮子不同于醒狮，马脚是天神下凡选中的天选之人，舞狮前需焚香熏染“马脚”，配以锣鼓鞭炮使其进入半清醒的亢奋状态，完成叼蜡烛、爬高桌等危险动作，甚至吞瓷碗、赤身缠鞭炮炸响而毫发无伤。

我的视频记录

下面是我今年到处看灯的视频记录，基本上每天不是在朋友家就是根据抖音直播寻找最热闹的村子看灯。

📍陈李湾&段家湾

👇白天舞龙舞狮（僵狮）挨家挨户祈福（玩花户）

·

👇晚上僵狮子挨家挨户祈福（玩花户）

注意：因为僵狮子带有浓厚的神秘色彩，大家在下面的视频中是在闹狮子、逗狮子、闹元宵，因为马脚将军在上马之后刀枪不入、力大无穷，所以周围的观众会大声喊“假的假的”、“挖啊”等闹气氛，让狮子发怒追逐黏人并用狮头挖人咬人。气氛在这些时候会达到顶峰，形成群体参加的狂欢仪式，就像是在野外蹦迪。

所以观看僵狮子有三禁止：大声叫喊、说假的、闪光灯。但是大家会一直用这三招逗狮子。

·

👇晚上僵狮子马脚将军上马过程

下面的视频是前文中提到的舞狮前的神秘仪式，也就是邀请天兵天将下凡附体，焚香熏染“马脚”，配以锣鼓鞭炮使其进入半清醒的亢奋状态，这一过程一般在头人（活动负责人）的家里进行，氛围非常热烈。由于人太多了，我有些地方没拍到，有一处地方需要看前面手机拍摄的内容。

·

📍网红汤何村

截止我发布视频，抖音上#黄陂僵狮子的话题有2.8万人参与，2.6亿次播放，而大部分的视频地址就是汤何村，这也吸引了很多武汉和其他地区的人慕名前来观灯。汤何村有五条高龙，非常热闹，当地流行舞这种非遗高龙，区别于我们在舞龙队看到的那种小龙。

👇白天汤何村抢香案过程，舞龙游灯冲灯。

·

👇汤何村僵狮子

·

👇汤何村正月十五抢香案

·

📍最热闹的戴夏湾

由于汤何村的人实在是太多了，为了更好的体验，我们只能更换地点，毕竟附近每个村湾都有相关的活动，四周全是烟花鞭炮的声音。开车十分钟，我们又快到了戴夏湾，看到导航上长长的红色堵车，我就知道来对了，这是一个已经升级改造过的新农村，道路宽阔，站再多的人也可以看到全貌。

👇戴夏湾有很多年轻人和武汉市内口音的人，所以气氛也更浓厚，大家都在使尽办法逗狮子。

·

·

一些思考

僵狮子这样的每年月半元宵在黄陂孝感地区部分农村中进行的集体狂欢仪式，历经漫长岁月，它至今仍是黄陂地区人民一年中最盛大的节日仪式，并具有非常独特的地域代表性研究价值。该地区沿袭原始时代的巫傩文化，用将军和狮子来驱邪；另一种说法是黄陂地区作为荆楚文化主阵地，受荆楚巫文化影响，人们尊敬神灵、敬畏鬼神，逐渐形成各种傩祭仪式，“僵狮子” 便是其中之一。僵狮子的主要表现为地方性的保护神将“降临”到经过仪式挑选的马脚身上并展现“神迹”，通过一系列复杂而神秘的仪式由马脚这一中介向村民祛魅赐福。

僵狮子仪式为华中地区村民信仰与农村社会秩序提供了案例，其作为一种文化符号，代表着力量、威严和驱邪的能力，而 “僵” 的状态象征着神灵附体，是人与神沟通的特殊状态，承载着人们对神灵的敬畏和对美好生活的祈愿。该活动中一系列复杂、神秘和完整的仪式，如祭香案祈福、趴香案请神、上庙、吃香案等，这些仪式代代相传，成为当地文化传统的重要组成部分，强化了村民对地方集体文化的认同感和归属感。另外僵狮子包含的音乐、美学、信仰价值等的独特文化实践也反映了当地人民的神灵体系和对美好生活的向往和追求

从民族学的角度来看，僵狮子是汉族文化在当地的一种独特表现形式，它在传承过程中不断吸收和融合了荆楚文化、巫傩文化等元素，丰富了汉族文化的内涵，是民族文化多样性的体现。僵狮子活动以族群为单位开展，是全村人共同参与的文化事项。在活动中，人们通过共同的信仰、仪式和参与方式，增强了族群内部的认同感和凝聚力，明确了自己所属的族群边界，强化了族群意识。

从人类学视角看，不同于醒狮的形式和内涵，僵狮子中的 “神灵附体” 现象属于宗教或巫术信仰的范畴。它是古代人们在面对自然和生活中的不确定性时，通过特定的仪式和行为来寻求神灵的庇佑和指引，以获得心理上的安慰和精神上的寄托。 从社会功能的层面来看，它促进了集体中社区成员之间的交流与合作，增强了社会凝聚力，落实到个体而言参与活动的人通过扮演 “马脚” 等角色，获得了一种特殊的社会体验和身份认同，满足了个体在文化和心理上的需求。随着社会的发展和变迁，僵狮子也在保持核心仪式和文化内涵的基础上，逐渐与现代社会相融合，如吸收了一些现代的表演元素、传播方式等，体现了文化的适应性和变迁过程。

我总是认为：文化是不需要解释的，尽管很多人认为“僵狮子”是封建迷信，总是想以科学的角度来解释一些文化现象。但是以“僵狮子”为代表的乡村仪式不仅是村民的狂欢，更是村民生活的纽带及延续，所以其具备存续的现实基础，不能忽略其对村民人格构建及乡村地域结构和谐发展积极导向，为深入理解华中地区乡村社会秩序提供了重要途径。

使用iphone查看视频将得到最佳观感

大年初五结束了万岁山武侠城的游览，初六第二站来到来到开封清明上河园，依旧人山人海。主要观赏的表演和节目有：岳飞枪挑小梁王、东京保卫战、打铁花烟花秀等。本文目录在顶部菜单栏右上角目录图标处，可以选择您想查看的部分。

首先感受一下人山人海的园区：

入园

龙狮表演

摔跤斗鸡

岳飞枪挑小梁王

提前一个半小时排队，排队等待半小时，入场等待一小时

东京保卫战

👇观看视频 金兵攻城-宋军反击-宋军获胜

夜场

👆NPC巡游

打铁花·烟花秀

👇观看视频 1分22秒舞龙，3分钟处放烟花

使用iphone查看视频将得到最佳观感

大年初四从武汉出发自驾前往河南开封，初四第一天在路上度过，从初五开始游览。初五第一站来到开封万岁山武侠城，来到城楼仿佛听见了金戈铁马的喧嚣和江湖气息。虽然我自己不是武侠迷，但是我依旧被武侠城的氛围所震撼。

万岁山是国家4A级景区，古色古香的街道，青石板铺就的路面，两旁店铺林立，酒旗招展。身着古装的商贩吆喝着，仿佛穿越回了那个刀光剑影的武侠世界。正值大年初五，园区人声鼎沸，感觉起码有几十万人流量，到处都没有地方落脚，摩肩接踵，感觉自己随时会被挤到腾空。

经典路线：城门楼-射雕英雄传主题区-天龙八部主题区-笑傲江湖主题区-水浒传主题区-武侠广场

以下是我的游览线路，我已经是同行的人中玩到最全面的了，很多人都因为人流量太大，只能游览一两个场馆，但是我从进入园区到边缘的艺术区基本上逛了很多园区。

神舟海船

仙侠奇境

👆人山人海

碰巧在下午在这里遇到巡游表演👇

细狗撵兔

📍城寨沙场

👆最终没追上，都是同事彼此留面子哈哈

三打祝家庄

开始之前可以体验骑马

📍城寨沙场

仙界广场

夜游

在神州这里偶遇放烟花👇

打铁花表演

📍城寨沙场

第一场打铁花在7点半，我们五点开始排队，在目睹三场游客打架，以及排队一个半小时之后终于来到了城寨沙场的最后一排……由于是在大年初五，景区特意在打铁话表演的前十分钟加了一场惊喜烟花，在每天1200场表演的安排表中，这场烟花秀则是隐藏节目。

看完烟花秀，就是20分钟左右的打铁花表演👇

本文为后补恢复，实际发生于2024年6月、9月

在大农村

在UQ的第一学期快结束的时候，来到Ipswich的大农场拍摄一个课程的期末作业

📍Lot 17 Tamrookum Church Rd Tamrookum QLD 4285

蓝花楹

音乐剧

美女与野兽作为迪士尼非常出名的IP，音乐舞台剧更是在布里斯班停驻了好几个月，与朋友一起在市中心的剧院，现场有不少身着礼服的姐姐盛装出席，音乐剧老少咸宜，舞美精致，节奏明快，很适合家庭观看。

校园广场营地

同步世界的是，UQ校园也早早有了支持巴勒斯坦的广场营地，大家在广场搭起帐篷，拉起横幅，发放宣传手册，在晚上露营在校园并且在校园草坪广场烧烤聚会，共同表示对巴勒斯坦的支持。但是与美国一些学校和机构不同的是，UQ校长也是第一时间向所有人发送了邮件，声称支持校园中的言论的自由和大家聚集的权力，但是将不能容忍超出范围的极端行为和歧视，于是，在校方的努力下，每天都有固定安保工作人员远远地守护在广场周围，防止意外的发生。另外，由于言论的自由被支持，一些另外的声音也出现在了这里，在学校的协调下，广场被划分为三个区域，左下角最大的营地是支持巴勒斯坦的营地，而右上角的营地略小，是支持以色列的营地，中间是学生会组织，但是由于敏感性没有悬挂学校组织的任何标识，而悬挂的是LGBTQ+的彩虹旗帜。

所以我们发现了一件有趣的事情，LGBTQ+成功调停了以色列和巴勒斯坦的支持者阵营，哈哈哈哈！最后由于以色列的营地悬挂以色列复国旗帜以及一系列潜在的冲突危机，以色列营地在随后的几周内就消失了，只留下了占地面积越来越大的巴勒斯坦营地和学生会组织营地。

本文记录使用Thyuu/星度主题之后的一些小小的修改，本文的主要内容为添加豆瓣页面的Banner并实现计数，以及添加首页分类。

👇在之前，我已经记录了又见梅林首页最新文章封面图添加以及手机端适配

👇以及为又见梅林新增小年限定主题，为什么是小年限定呢？因为从我记事起我家大部分都是在小年过年，所以我希望增加一个小年限定。

豆瓣Banner

本网站使用了困困鱼为Halo开发的，重构于WP-Douban插件的豆瓣管理插件, 支持在 Console 进行管理以及为主题端提供 /douban 页面路由。提供从豆瓣爬取到的数据并内置模板。原始的模板大概长下面这样，这里使用了Thyuu的豆瓣页面展示效果。

完全是突发奇想想做一个banner。在了解这个插件和页面的大概原理之后，我希望在顶部添加一个可以展示一些例如统计计数、图文等信息的banner，而该页面包含了电影、书籍、音乐等内容，所以我做了一个可以轮播的展示区，具体效果如下：

链接：

您可以在顶部导航菜单点击 豆瓣 进入

效果图

HTML展示：

又见梅林的电影之旅 已经见证了

超过 次荧幕

记得那年我们曾一起
• 想象着漫威和DC宇宙的神秘
• 通过《辛德勒的名单》感受战争与和平
• 从多元化题材讨论本土的女性主义与酷儿影像
• 见证中国科幻电影从《流浪地球》开始改变

又见梅林的阅读之旅 已经修炼了

超过 本典籍

记得那年我们曾一起
• 讨论本雅明对艺术的复制和惊颤体验的思索
• 从客观环境的信息化聊到信息环境的环境化
• 考虑亚文化中的疏离抵抗、仪式、狂欢与收编
• 审视全景监狱中人机关系、数字劳动与自我规训

❮ ❯

👇 统计计数功能根据API提取所在分类的Total总数并输出展示在HTML中

代码实现：

在顶部head插入 <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4814788_onluaeyyg7h.css" /> 实现图标显示；

将下方代码插入在 douban.html 中 <section class="db--container"> 之后

<div class="douban-carousel">
    <div class="douban-slide active">
        <img src="https://img.ryanzm.cn/2025/01/20/678dc63acb38e.jpg" alt="Image 1">
        <div class="douban-text">
            <p><span class="iconfont icon-maisui" style="font-size: 1.3em;"></span>又见梅林的电影之旅<span class="iconfont icon-maisui1" style="font-size: 1.3em;"></span> 已经见证了
            </p>
            <h2>超过 <span id="movie-total"></span> 次荧幕</h2>
            <p>记得那年我们曾一起<br>• 想象着漫威和DC宇宙的神秘<br>• 通过《辛德勒的名单》感受战争与和平<br>• 从多元化题材讨论本土的女性主义与酷儿影像<br>• 见证中国科幻电影从《流浪地球》开始改变</p>
        </div>
    </div>
    <div class="douban-slide">
        <img src="https://img.ryanzm.cn/2025/01/20/678dc6375ba4a.jpg" alt="Image 2">
        <div class="douban-text">
            <p><span class="iconfont icon-maisui" style="font-size: 1.3em;"></span>又见梅林的阅读之旅<span class="iconfont icon-maisui1" style="font-size: 1.3em;"></span> 已经修炼了
            </p>
            <h2>超过 <span id="book-total"></span> 本典籍</h2>
            <p>记得那年我们曾一起<br>• 讨论本雅明对艺术的复制和惊颤体验的思索<br>• 从客观环境的信息化聊到信息环境的环境化<br>• 考虑亚文化中的疏离抵抗、仪式、狂欢与收编<br>• 审视全景监狱中人机关系、数字劳动与自我规训</p>
        </div>
    </div>
    <button class="carousel-button prev" onclick="prevSlide()">&#10094;</button>
    <button class="carousel-button next" onclick="nextSlide()">&#10095;</button>
</div>

<script>
    const slides = document.querySelectorAll('.douban-slide');
    let currentSlide = 0;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.toggle('active', i === index);
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(currentSlide);
    }

    setInterval(nextSlide, 8000); // 切换幻灯片时间

    // 调用API中的total总数
    fetch('/apis/api.douban.moony.la/v1alpha1/doubanmovies?type=movie&status=done')
        .then(response => response.json())
        .then(data => {
            const total = data.total;
            document.getElementById('movie-total').textContent = `${total}`;
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });

    fetch('/apis/api.douban.moony.la/v1alpha1/doubanmovies?type=book&status=done')
        .then(response => response.json())
        .then(data => {
            const total = data.total;
            document.getElementById('book-total').textContent = `${total}`;
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
</script>

添加CSS样式

      /* douban */
      .douban-carousel {
          position: relative;
          width: 100%;
          overflow: hidden;
          margin: auto;
          background: black;
          border-radius: 18px;
          height: 580px;
          margin: 0 0 30px 0;
      }

      .douban-slide {
          width: 100%;
          height: 100%;
          display: none;
          position: absolute;
          top: 0;
          left: 0;
      }

      .douban-slide.active {
          display: block;
      }

      .douban-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .douban-slide::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(circle, transparent 10%, rgba(0, 0, 0, 0.8) 100%);
          z-index: 1;
      }

      .douban-text {
          position: absolute;
          bottom: 4em;
          left: 4em;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
          z-index: 2;
      }

      .douban-text h2 {
          color: #D4AF37;
          font-size: 2em;
          margin: 0;
          line-height: 2.5em;
      }

      .douban-text p {
          color: white;
          font-size: 1em;
          margin: 5px 0;
          line-height: 2em;
      }

      .wheat-icon {
          width: 24px;
          height: 24px;
          vertical-align: middle;
          margin: 0 0.5em;
      }

      .carousel-button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background-color: rgba(0, 0, 0, 0.5);
          border: none;
          color: white;
          font-size: 2em;
          cursor: pointer;
          z-index: 3;
          padding: 10px;
          border-radius: 10px;
      }

      .prev {
          left: 10px;
      }

      .next {
          right: 10px;
      }

      @media (max-width: 768px) {
          .carousel-button {
              font-size: 1.2em;
          }

          .douban-carousel {
              height: 380px;
          }

          .douban-text h2 {
              font-size: 1.7em;
          }

          .douban-text p {
              font-size: 0.8em;
          }

          .douban-text {
              bottom: 3em;
              left: 3em;
          }
      }

已经对手机端进行了适配，效果如下：

一些思考

当我做完这个部分之后，我猛然发现，我潜意识里填充的小字内容是我们分手前曾经一起完成过的事情，我花了半年的时间把我最喜欢的漫威和DC宇宙一部一部分享给了你，在我通宵剪片子的时候，你陪我在夜宵的时候一起看了《辛德勒的名单》，我们讨论了本雅明的机械复制下的艺术作品，也吐槽过疏离、重构、弥合、异化、嬗变、范式、延异等等一系列传播学学者酷爱的异化性的写作风格以及理论名词“创新”。

想到这里，尽管已经是分手大半年了，但我猛地发现我正在进行的是我在一次学术会议上老师曾讲过的一个名词——数字哀悼，或者说是数字怀念、数字祭奠。悲伤是一个复杂而摇摆不定的过程。随着时间的推移，我学会独自生活。而数字哀悼正在破坏这一过程，导致人无法从持续的悲伤中解脱，并陷入长期痛苦。就个体而言，个体的数字哀悼无法上升到集体怀念，无法构建大规模的共情网络，但是这种私密的个体叙事不仅深刻揭示个体与逝去回忆之间的被遗忘的关系，使个体重新发现固有的、深层次的脆弱性；而且正在编织针对回忆和遗忘实践的文化结构，以及通过互联网的数字垃圾堆实现仅少数人能够编码和解码的情感生产。在面对这种应对回忆和遗忘的数字实践时，个体能够有机会回到对脆弱的恐惧中，并持续敦促重新定位自我。所以说，数字悼念带来的情感影响是矛盾的，一方面，它让人认识到悲伤和脆弱；另一方面，它又鼓励人在认识这些情感的基础上重新获得认清和遗忘的能力。而这些正是数字悼念和数字怀念无法替代的个体情感后勤功能。

讲到这里，尽管这样的情感体验是私密的，但是，我依旧很好奇你在使用本代码的时候，小字部分会讲述什么故事。

首页分类

首页分类功能我早就想做了！Thyuu/星度给了我们一个非常美丽且实用的分类文章展示部分，但是，在移动端这一横向滑动的体验我觉得并不完美，再加上我的不玩Blog的朋友时常会通过小程序来又见梅林blog看看，但是，文章合集的入口往往隐藏在顶部的下拉菜单中，一来二去引发传播阻隔。另外，注意力有限的观众需要更直观地、带有目的性的选择性阅读。好吧我承认更多的是我的文章内容很繁杂，又有国内摄影、留学记录、有趣的思考、项目、blog修改等等，所以我急需醒目的快捷入口。

PC端效果：

移动端效果：

❗预警：因为我是十足的粉领子文科生（传播学&社会学），代码的事情我纯粹入门，代码非常非常蠢，因为我不会调用blog的分类名称、介绍和封面图片，所以只是一个纯粹的html代码，以后我学习之后再完善吧。

HTML代码

<h5 class="part-title">精选分类</h5>

<div class="index-cat-section">
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/world"><img src="https://cdn.ryanzm.cn/image/ghost/2023/09/0525-1.jpg"
                alt="Category 1" class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/world">
                <h3 class="index-cat-title">身边的见闻</h3>
            </a>
            <p class="index-cat-description">我看到的祖国和反思实践</p>
        </div>
    </div>
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/overseas"><img
                src="https://cdn.ryanzm.cn/image/ghost/2024/04/ed3bf7ba02f2a41989664910e7fb785.jpg" alt="Category 2"
                class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/overseas">
                <h3 class="index-cat-title">路过的风景</h3>
            </a>
            <p class="index-cat-description">在异国他乡的所见所想</p>
        </div>
    </div>
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/research"><img src="https://www.ryanzm.cn/upload/bg-1.jpg"
                alt="Category 3" class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/research">
                <h3 class="index-cat-title">有趣的思考</h3>
            </a>
            <p class="index-cat-description">媒介实践的发现和思索</p>
        </div>
    </div>
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/blog"><img
                src="https://www.ryanzm.cn/upload/thumbnails/2024/w800/bg-3.jpg" alt="Category 4"
                class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/blog">
                <h3 class="index-cat-title">更新与设计</h3>
            </a>
            <p class="index-cat-description">节气限定与主题更新</p>
        </div>
    </div>
</div>

CSS样式

.part-title {
    line-height: 3rem;
    color: hsl(var(--font-color) / .3);
    font-size: 1.5rem;
}

.index-cat-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;    /* 分类项之间的间隔 */
    margin-bottom: 20px;
}

.index-cat-item {
    position: relative;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;    /* 平滑过渡效果 */
}

.index-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;    /* 过渡效果让模糊变化更平滑 */
}

.index-cat-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    z-index: 10;
}

.index-cat-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0;
}

.index-cat-description {
    font-size: .8rem;
    margin-top: 10px;
    line-height: 1.4;
}


.index-cat-item:hover .index-cat-img {
    filter: blur(5px);    /* 鼠标悬停时模糊图片 */
}

/*.index-cat-item:hover {
  transform: scale(1.05);}  可以增加轻微的放大效果 */


/* 响应式设计：在屏幕宽度小于768px时，每行显示2个分类项 */
@media (max-width: 768px) {
    .index-cat-item {
        width: 48%;
        height: 130px;
        margin-bottom: 5px
    }

    .index-cat-title {
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
    }

    .index-cat-description {
        font-size: .7rem;
        margin-top: 10px;
        line-height: 1.4;
    }

    .part-title {
        line-height: 1.5rem;
        color: hsl(var(--font-color) / .3);
        font-size: 1.2rem;
    }
}

@media (min-width: 769px) {
    .index-cat-item {
        width: 23%;        /* 在电脑端，每行显示四个分类项 */
        height: 180px;
    }
}

此文章为后补恢复，实际发生于2024年9月初。

临近中秋节，我所在的UQ学生学者联合会计划在中秋节附近在学校举办一场盛大的中秋晚会，而我们传媒部门将贡献一部短片作为节目之一，也是为我们组织打一个小广告。在前期无数次的头脑风暴之后，我们最终确定了初版本的剧本，并确定Wellington Point作为外景取景地之一。本次拍摄中，我作为后期导演，参与前期剧本创作和拍摄，但是，主要任务是后期剪辑。短片最后在中秋晚会上播放效果还不错，上百G的素材到我手上，我也是尽力而为了。

Wellington Point

👆外景拍摄之余，朋友帮我拍的

👆大嘴大嘴

👆小孩哥钓了很久，但没收获

👆拍摄过程中涨潮了

👆拍摄结束，聚餐中

👆独自打工中

中秋晚会确实搞得很不错，超出我的预期，我们部门的节目短片效果也超出我的预期，工作人员能拿到月饼也是好起来了！片尾名字滚过虽然没人看到，但是咱们传媒部们的小伙伴们都在关注，也是很开心！

注意：本文属于转载，非原创内容

新年限定：BGM图来自Thyuu宇哥

标题：金蛇腾玉宇，烟花灿九天

颜色：2deg 98% 20%

版权属于 Thyuu宇哥

新的一年祝愿大家祥蛇携运入新年，瑞彩环身好梦连。又见梅林期待与朋友们在节后再见！

注意：限定主题图片具有版权性，使用请留下您的评论，梅林不胜感谢！

蛇年马上就要到了，小年也越来越近，2024年12月4日，联合国教科文组织保护非物质文化遗产政府间委员会第19届常会通过评审，决定将“春节——中国人庆祝传统新年的社会实践”列入人类非物质文化遗产代表作名录。

又见梅林将开启新春系列节庆限定首页主题，本次限定主题为：

“红梅绽放幽香正逢小春”

来源于我本人非常喜欢的一段程派老戏：《柳迎春》选段，推荐您播放收听：

主题限定入口

在又见梅林首页的原始模板中的LOGO旁上新了一片红色祥云，您可以点击祥云进入限定主题模式，您也可以点击下方“开启限定”进入。

电脑端

元素：象征节日符号的祥云、灯笼，以及在暗夜模式才会显现的白色丝带，象征辞旧迎新，川流不息，你我彼此相连。颜色：36deg

白日模式

暗夜模式

手机端

本文为后补恢复，发生于2024年8月31日

澳新军团日这一周学校放假，当天似乎布里斯班所有人都会有一个假期，布里斯班河沿岸会有澳新军团空军贴河表演，并且晚上会在沿岸举行烟花晚会。和几个好友一起约定今天在city观看表演，由于我住在Southbank，并且不在河岸边，在建筑内无法看到表演全貌，所以来到住在City河岸边的同学家里，露台上早已占满了人，布里斯班河岸两侧全都是人等待着空军表演，占好位置长枪大炮对准天空。途径河两岸的公交停运，开放了布里斯班河上的公共交通专用桥供大家在桥上观赏，可以说我从来没见过布里斯班的人这么聚集，似乎大家都停下手头工作出门参与这次活动。

当然，展示的飞机表演肯定没有珠海航展或者我们的其他飞机表演壮观，但是能在学期中获得一周的休息时间，以及和大家团聚看飞机表演和烟花晚会的机会也十分难得。

先看视频

我们所在的公寓露台能够非常完整地观看飞机表演，从右侧入场，贴近河和建筑飞行，在布里斯班桥上的人头顶停留表演，再向左侧飞行至CBD绕行，整个过程布里斯班河沿岸尖叫欢呼声响彻云霄。

几张图片

烟花表演

烟花表演非常有特色，我觉得策划和设计的非常好，烟花表演并不是固定于某一处，而是沿着布里斯班河，由远到近，并在故事桥和city附近迎来高潮，沿岸的建筑楼顶和露台也会配合音乐和节奏燃放，整体效果远近立体，交相辉映。同时，烟花时而在岸边升起，时而从远近建筑喷出，最多的是从布里斯班河面上的船上腾空，持续时间二十分钟，非常壮观。在表演结束之后，仅仅四十分钟，桥上的岸边的所有人就都有序撤离了现场，没有发生任何失序事件，随之而来的是city和南岸麦当劳的爆单。

本文内容发生于2024年8月，于2025年1月12日根据新主题和样式更新。

澳大利亚昆士兰州一年一度的EKKA节日就在8月份开展为期一周的嘉年华活动，布里斯班每年在这个时候就会将迎来一年一度的EKKA嘉年华，这是布里斯班以及整个昆士兰州的年度盛会，从初期传统农业博览会发展至今，已经成为集农牧产品展览、美食、表演、趣味比赛、娱乐项目于一身的大型活动。📍 Brisbane Showgrounds

8月中旬第一轮due刚刚过完，第二轮due还没开始，而布里斯班在这一周也将会放假让所有人都可以有机会去EKKA现场体验嘉年华，留子更是没课没due，约了几个朋友一起去EKKA玩！注意，下面的内容包含攻略和多图。

交通

首先，不得不说一下EKKA这一周的公共交通，很多平日里的普通公交在这一天都会支援EKKA活动，公交电子牌上的路线号也会变成EKKA专属，这些公交车每10-15分钟一班，从早上到夜晚，线路包括从City附近的区域和EKKA活动举办地的往返，而且全部都是免费的。但是不得不说，这几天去学校的公交车都变少了！大概抽调了很多去支援EKKA了。

活动

EKKA包含了多种多样的活动，可以让你从早玩到晚。因为EKKA还是属于继承了传统农业主题的嘉年华，所以白天会有很多动物展览，可以和动物亲切接触，这让很多本地的城市小朋友有更多的机会了解动物。另外，有很多高中、初中都会参加到动物展览中，这些学校的学生会把在学校或者自己家的农场带到EKKA现场参加选美比赛，所以你可以看到很多小小的Cowboy牵着自己的动物伙伴。同时与农业有关的比赛你也可以在EKKA的展览馆看到，比如剪羊毛比赛、伐木比赛等，这里必须提到的是，伐木比赛拥有超高的人气，感觉大家都是奔着健壮的伐木工来的哈哈哈。

然后就是一楼的很多禽类，从比赛获奖的各种小鸟、鹦鹉到大公鸡、鸭、大鹅，以及超超超大的巨无霸火鸡等等，当然，这一层也很臭，所以我们快速离开了。

伐木比赛的火热现场！只看到了锯木比赛，很可惜没有看到下面的图片右侧的攀爬伐木比赛！

游乐设施和焰火晚会

EKKA现场除了很多展览馆，还有很多中大型的游乐设施

马术表演

主题演出

最后

分享一下小吃，我强烈推荐这个草莓圣代，非常非常好吃哈哈，我吃了两个！基本上我看到入园的人手一个，排队非常长，我们三个人上午入园买的第一个到手草莓全部掉地上了，老爷爷人很好又给我们安了一个，出园的时候我又买了一个，拿到手直接塞嘴里。

江南之旅的最后一站，非常巧合地在虎丘和留园中选择了留园，深深感受到这个选择的正确性，我也推荐大家一定要去留园！晚秋漫步留园仿佛踏入了一个五彩斑斓的世界。 梧桐叶金黄，枫叶如火，园内亭台楼阁、奇石曲廊，加上满园的绿意和一汪碧水池塘，一步一景。

本文长图偏多，非常欢迎大家使用手机版或者微信小程序 · 又见梅林 访问本文！

苏州之行到这里就快结束了，秋冬时节的江南之旅到这里就快结束了。期待下次春秋时节再来江南看看！如果我的行程对你有任何启发，或者你想了解更多细节，请给我留言，我将尽全力给大家解答！

拙政园

一下高铁就先到平江路打卡，然后下午去举世闻名的拙政园和狮子林，我们去的那天天气格外好，拙政园不愧是中国四大园林之一，来到苏州拙政园肯定是必须游览。拙政园是中国园林的杰出代表，也是江南私家花园典范，漫步在拙政园感受中国古代园林的风格与瑰丽，以及悠久的人文历史、丰富的文化内涵、高度的造园成就、疏朗自然的风格、典雅秀丽的景色。拙政园被誉为中国四大名园之一且历史最为悠久。1961年被国务院列为首批全国重点文物保护单位。1997年被联合国教科文组织列为世界文化遗产。

越早入园体验感越好，我们当时去的时候没有极度人山人海，只有水彩画般的盛景。秋末初冬的拙政园与其他时节大有不同，一幅如诗如画的斑斓画卷在眼前徐徐展开，与秋日的景致相得益彰。金黄的银杏和火红的枫叶点缀在亭台楼阁之间，宛如一幅色彩斑斓的织锦，一步一景。小径曲折，从一重重门廊、镂空图案的石墙，到每个亭子、每扇窗户都不雷同，而且与树木花草搭配得恰到好处，构成一幅幅如画般的风景。

拍摄机位📸：见山楼📍、梧竹幽居附近📍、雪香云蔚亭📍、十八曼陀罗花馆📍、浮翠阁南侧📍、征观楼📍、塔影亭📍，我们当时两条推荐线路全都走了一趟，既能看到诗画美景也能观赏亭台楼阁。门票🎫：淡季70元，多景点联票有优惠。交通🚌：建议地铁，1号线拙政园苏博站直达，周边停车不太方便。我们当天的线路：平江路-拙政园-狮子林。

狮子林

狮子林也是“苏州四大名园”之一。作为元代园林代表作的狮子林虽不大，但却深得乾隆喜爱，乾隆七下江南曾六次来到狮子林还留下了非常有名的“真有趣”三个字，这时给乾隆当导游的状元黄喜在一旁见了觉得不免俗气，便说“万岁御笔千金，微臣一贫如洗，叩请皇上把中间的有字赏给奴才吧！” 乾隆立刻明白了他的用心，也觉得这样太俗，传出去有损名声，便顺水推舟的把有字赏给了黄喜，成了“真趣”二字，真趣亭就坐落在狮子林的核心。因园内石峰林立，多状似狮子🦁，故名“狮子林” ，狮子林以假山著称，园内假山众多，形态各异，被誉为“假山王国” 假山群共有九条线路，21个洞口，穿梭其间，像是走进了一座巨大的迷宫，一边走迷宫一边欣赏风景，甚是有趣 ，小侄女和我们一起在狮子林钻石头迷宫体验捉迷藏，与其他游客一起寻找出口，玩得不亦乐乎。

平江路是苏州最典型的古街区，有2500多年的历史，保留了水陆并行、河街相邻的特色。景区内有苏州状元博物馆、昆曲博物馆、评弹博物馆等，还有许多特色的小巷、桥梁、老宅、店铺和美食，是一处惬意的古镇。推荐⭐⭐⭐⭐⭐

何园，坐落于江苏省扬州市，又名”寄啸山庄“，是一处始建于清代中期的中国古典园林建筑，被誉为“晚清第一园“，面积1.4万余平方米，建筑面积7000余平方米。何园由清光绪年间何芷舠所造，片石山房系石涛大师叠山作品。

曾在何园寓居过的名人有很多。著名国画大师黄宾虹，他六次来扬州，寓居在骑马楼东一楼。著名作家朱千华先生，曾寓居何园五年多，其旧居在骑马楼东二楼。

何园我真的巨无敌推荐，可以说我们的扬州之旅因为何园而变得非常丰富多彩！何园在扬州城内的东南角，何园不如个园那么大，景区不太大但布局合理紧凑，假山池溏错落有致，楼宇设施保存完好，介绍家族历史的照片和实物完整，何园内藏有不同历史时期的风景，非常值得到此观光。何园离开皮市街不远，建议可以安排半天或者晚上在皮市街一起游玩。

⏰营业时间： 07:30-17:15；停止入场时间17:00 
📍地址： 扬州市徐凝门街66号 
🚗交通： 
火车站坐26路到石塔寺/西门换乘209路到何园 汽车西站公交停车场坐19路到达何园汽车东站坐19路到何园，自驾前往周边停车场较多，可以放心前往。
🎫门票价格： 45元（10月1日-10月31，3月1日-5月31日周一至周日） 30元（7月1日-9月30日，11月1日-次年2月28日周一至周日）

右图为给同行的侄女拍的美照哈哈

扬州早茶

到扬州必吃扬州早茶，但是我们起得太晚，没有赶到最有名的怡园、趣园等小红书特别推荐的地方吃早茶，因为派对的人特别是团队游客太多了，所以我们在当地人的指引下到了扬州怡园对面的一家天香阁饭店吃早茶，虽然比较老旧，但是游客和本地人都很多。

我们点了三丁包子、大煮干丝、阳春面和松籽烧卖，总的来说，非常不错，非常推荐三丁包子和大煮干丝。感觉和武汉的过早文化很像，早上吃饭一个月不重样哈哈

在扬州呆了两天，印象好极了！晚上我们又前往皮市街和东关街逛逛扬州的夜市和步行街。

下一站，苏州！

中国大运河博物馆

、

扬州瘦西湖

明孝陵

音乐台

梧桐大道

第一站：总统府与孙中山纪念馆

从武汉到南京高铁花费3个多小时，在中午接近十二点终于抵达南京南站。酒店就定在南京南站附近，出车站10分钟车程就到了酒店。放下行李去南京大牌档吃午饭，午饭过后第一站就来到了总统府，听说总统府大门在之后马上就要关闭不再作为景区入口开放了，有幸这一次赶巧从老大门进入景区。总统府包含办公区域、花园等，还有一系列的博物馆讲述了孙中山和南京政府时期的陈列和历史。

酒店方面，因为我们一行四人，在美团上订的复式民宿，带有多个房间很适合很多人一起住。酒店距离南京南站不远，驱车只需要10分钟就可以从车站抵达酒店。

酒店⭐⭐⭐⭐

南京大牌档⭐⭐⭐

总统府：⭐⭐⭐⭐

Day1晚：秦淮河、夫子庙

逛完总统府，时间已经来到了傍晚，于是我们吃完晚饭后来到秦淮河，步行街全部都是仿古建筑，夜晚灯火通明，人群熙熙攘攘非常热闹，由于我们出游不在周末，所以很多都是本地的大学生群体，游客特别是成群结队的团队游客不多。随后参观夫子庙为自己的学业和事业祈福。

简介

• 作者：THYUU & 困困鱼

• 一款感受星辰温度的主题

• 预览地址：kunkunyu.com

• 主题价格：请访问下方页面获取最新价格

需要购买请联系原作者

电脑版

手机版

手机版同样完美适配，部分样式正在完善中，将在最近更新新版本。

我的改动

1.首页最新文章封面

原本Thyuu主题在首页的最新文章部分是没有封面的，看得出来这样设计是为了让文章模块和首页介绍位于同一个页面，但是由于我的文章主要是生活记录类，有很多摄影图片，所以我还是希望沿用自己去年老版本的带封面的文章展示，所以我小小的改动了一下该部分。

下面是我老版本的首页，因为一些不可抗力导致我失去了这个blog，换个主题换个心情。

可以看到首页的封面文章电脑版一行多个，手机版一行两个，所以根据Thyuu/星度的样式我做了小修改。

HTML代码：

themes/thyuu-xingdu/templates/macro/index/new-post.html 修改该文件中的代码，在17行<time></time>和<h6></h6>之间插入下面的代码：

<div class="post-img" style="background-size: cover;height: 240px;">
    <a th:href="@{${post.status.permalink}}"><img th:unless="${#strings.isEmpty(post.spec.cover)}"
            th:src="${thumbnail.gen(post.spec.cover, 'm')}" alt="" loading="lazy"
            style="border-radius: var(--radius); object-fit: cover; width: 100%;   height: 100%; "
            th:data-caption="${post.spec.title}" class></a>
    <div th:if="${#strings.isEmpty(post.spec.cover)}" class="no-thumbnail"
        style="border-radius: var(--radius); object-fit: cover; width: 100%;   height: 100%; padding-bottom: 10px;">
    </div>
</div>

CSS样式修改

修改 themes/thyuu-xingdu/templates/assets/css/front.css 的代码：

有修改的CSS：

.new-post {
	position: relative;
	z-index: 2;
	padding: var(--gap-divs);
	border-top: thin solid hsl(var(--hue) var(--satura) var(--light) / .5);
	border-radius: 50vw 50vw 0 0 / 5vw 5vw 0 0;
	background: radial-gradient(farthest-side at 50% 0, var(--s-bg, rgb(255 255 255 / .5)), #0000);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -2em 3em -4em rgb(0 0 0 / 5%);
	animation: var(--animation);
	animation-delay: .5s;
	padding-top: 50px
}

@media (max-width:1152px) {
	.new-post li {
		flex: 1 1 calc(50% - 10px);
		justify-content: space-between;
		padding: .5em;
		background: var(--s-bg, rgb(255 255 255 / .5));
		border: thin solid transparent;
		border-radius: var(--radius);
	}
}

新增加的CSS：

@media (max-width:1152px) {	
	.new-post li .summary {
		font-size: .8rem;
        line-height: 1.3rem;
	}

	.flex-ul {
	   position: relative;
	   display: flex;
	   flex-wrap: wrap;
	   gap: 0rem
    }

	.new-post {
	position: relative;
	z-index: 2;
	padding: 1rem;
	border-top: thin solid hsl(var(--hue) var(--satura) var(--light) / .5);
	border-radius: 50vw 50vw 0 0 / 5vw 5vw 0 0;
	background: radial-gradient(farthest-side at 50% 0, var(--s-bg, rgb(255 255 255 / .5)), #0000);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -2em 3em -4em rgb(0 0 0 / 5%);
	animation: var(--animation);
	animation-delay: .5s
	}
}

本文章在2024年11月第一次发布，2025年1月12日根据新主题和样式更新。

组织介绍

Chicecream（钟薛高） 是一家成立于 2018 年的中国高端冰淇淋品牌，凭借独特的设计和优质的原料迅速崛起。标志性的瓷砖形冰淇淋设计融合了中国传统文化，形成了独特的视觉和文化风格。Chicecream 专注于高端市场，产品价格相对较高（Shen, 2022；Olcott & Zhou, 2022）。Chicecream 非常擅长利用社交媒体和关键意见领袖进行营销，并通过抖音、微博等平台扩大影响力（Wang, 2023）。Chicecream 成立 16 个月后营收突破 1 亿元人民币，成立 18 个月后销售额突破 1500 万元（Community Marketing Research Institute, 2021）。

危机概述

2022年6月，一名网友在中国社交媒体上发帖称，她将Chicecream的冰淇淋在室温31摄氏度下放置50分钟后，冰淇淋整体形状依旧保持完好。这一事件在2022年7月2日在中国社交媒体上引起大量讨论，并在一段时间内引发了持续的品牌危机。许多消费者质疑，“我们吃的是冰淇淋还是胶水？”此外，Chicecream被发现即使用打火机也难以融化（Sun & Xu, 2024）。Chicecream被质疑使用了过多的食品添加剂的同时，消费者将这种怀疑与其高昂的价格和质量进行比较，引发了对产品期望的进一步热烈讨论。

根据情境危机传播理论（Coombs, 2007）对组织危机的分类，Chicecream“不融化事件”被认为是一场偶然危机。它起源于消费者对其产品的偶然怀疑，并扩展为对品牌和产品的不合理预期。这种危机并非组织的本意，但组织仍负有一定的责任（Chen et al., 2023）。

危机时间线

危机爆发于微博、抖音等中国社交媒体，并持续了一段时间。Chicecream 的危机时间线（图 1）显示，有大量媒体、权威机构等参与者。Chicecream 的三大应对措施均在大规模的媒体曝光和权威机构介入之后。危机生命周期理论（Fink，1986）用于将时间线分为四个阶段。

Chicecream事件中的媒体参与和时间线

（自制，基于微博热搜）

Figure 1 Timeline of Chicecream's Crisis 

行动与应对

基于形象修复理论（Benoit, 2015），Chicecream在此次危机的不同阶段采用了不同的危机管理策略。主要行动与应对分为三类：基于降低冒犯性策略的科学声明、基于逃避责任策略的创始人声明以及基于纠正行动策略的改进措施披露。

• 在危机急性期和慢性期，Chicecream多次发布官方声明，解释“不化”现象背后的科学原因。这种降低冒犯性的危机管理策略在社交媒体中起到了促进理性情绪的积极作用。他们通过展示生产执行标准和添加剂含量，强调冰淇淋使用的添加剂符合国家标准，不会造成健康危害。此外，他们还公布了冰淇淋的主要成分，以展示其营养成分和产品质量。

• Chicecream的创始人在中国通信软件微信的朋友圈中的公开声明被大量媒体转载并引发了进一步讨论，体现了危机持续期间基于“逃避责任”的策略。他公开强调，社交媒体上的一些负面舆论可能是由竞争对手和“社交机器人”推动的。他的言论试图将应对危机的部分责任转移到外部压力上，并将社交媒体上的负面情绪归咎于竞争对手的商业操纵，而不是产品本身。虽然这种做法转移了一些焦点，但并没有完全解决公众对产品的疑虑。

• 最后，在危机的后期，Chicecream利用媒体传达了该组织已采取措施修复其品牌形象的信息，包括价格调整。报道强调，该公司听取了舆论，推出了独立冰柜，并举行了促销活动，以减少价格与价值感知之间的反差。

媒体分析：主题、演化与情绪

信息生态理论研究信息流如何与社会系统中的不同要素相互作用、影响和共同演化（Nardi & O'Day, 1999）。为了了解Chicecream在应对危机中的有效性，媒体分析从信息生态理论的角度考察了危机中主题和情绪的共同演化。本案例研究收集了危机前三个阶段抖音最受欢迎的视频评论，并通过TikTokDownloader工具获得了共57,634条评论（JoeanAmier, 2024）。经过数据清洗，共计51,520条有效数据用于分析。

• 第一阶段LDA结果

• 第一阶段话题网络（缩放查看）

• 第二阶段LDA结果

• 第二阶段话题网络（缩放查看）

• 第三阶段LDA结果

• 第三阶段话题网络（缩放查看）

利用LDA主题模型对大规模文本进行无监督学习，发现文本中的主题分布（Blei et al, 2003），主题分类结果如表1所示。本研究利用桑基图（图2）分析不同阶段主题的演变情况。第1阶段关于价格、竞争对手的主题1，在第2阶段被拆分为主题1和主题3，均为对该主题的抱怨等情绪化表达。但在第2阶段，对Chicecream添加剂的关注度明显上升。其中，主题2（S2）作为新生主题，是关于食品添加剂的严重后果，一些虚假新闻、仇恨言论被包裹在这个主题中。但主题2（S2）在第三阶段并未得到发展和继承，说明Chicecream的科学表述和应对策略是成功的。此外，第2阶段的情绪化主题在第3阶段演变为理性主题。

话题演化桑基图（动态）

Figure 2 Sankey diagram of topic evolution in the three stages of crisis

情感分析作为一种自然语言处理（NLP）技术，可以自动识别并提取文本中的情感倾向，通常分为两类：机器学习方法和字典方法（Pang & Lee, 2008）。本案例研究使用TM（Academic Drip, 2023）和CNtext库（HiDaDeng, 2024）将基于机器学习方法的情感值统计（图3）和基于字典方法的情感倾向分类（图4）应用于评论数据。随着时间的推移，从第1阶段到第3阶段，积极情绪的比例不断增加，消极情绪的比例减少，仇恨情绪的比例减少。这意味着Chicecream的应对策略在情绪管理上是成功的。然而，悲伤和恐惧情绪的增加值得Chicecream注意，因为这样的情绪很容易对品牌造成损害。

利益相关者的参与和影响

由于利益相关者是危机管理的核心群体，利益相关者沟通策略在保护声誉方面发挥着重要作用（Coombs & Holladay, 2022）。从积极和消极两个方面分析了本次危机中不同利益相关者的参与和影响（表2）。

经验教训与建议

本案例研究从 SCCT 的角度考察了 Chicecream 在一次意外危机中的关键行动。在基于危机生命周期理论的四个阶段中，发现基于形象修复理论的降低冒犯性、逃避责任和纠正行动策略是 Chicecream 在危机急性期和慢性期采取的三大主要行动。从信息生态学的角度，使用 LDA 模型和情绪分析来考察舆情中的核心话题、演变和情绪，并以 Chicecream 危机管理的有效性作为证据做出回应。最后，使用利益相关者理论分析了利益相关者的影响。

SCCT 认为，在任何声誉建​​设策略之前，应该先采取基于道德的回应（Coombs & Holladay, 2022）。当公众质疑Chicecream所生产食品的安全性时，多个基于事实和科学的解释性陈述和报道将该组织置于道德高处，引发消费者的保护和同情。

从危机时间线回顾Chicecream的应对，该组织在危机期间对媒体曝光、权威机构介入和大规模舆情爆发都做出了快速反应，并从媒体分析中发现其危机管理策略的有效性。作为一家长期致力于社交媒体营销的公司，Chicecream的危机预警系统在这次危机中发挥了重要作用。

情绪被认为是冲突情境中的一个因素（Jiang，2024），Chicecream理性的解释性陈述和其创始人情绪化的公开内容在危机不同阶段对平衡情绪发挥了重要作用。通过理性解释与情感管理相结合的策略，Chicecream逐渐与受害者站在一起，化解了公众的不合理期待和责任归因（Coombs & Holladay, 2022）。

食品行业极易受到危机影响，在全球化和外部机构监督的过程中，危机往往会蔓延至其他地区和品牌（Assiouras et al., 2013）。历史声誉和CSR绩效对责任归因和危机感知有重要影响（Coombs, 2004；Assiouras et al., 2013）。食品企业需要以食品安全作为自己的道德底线，这样历史声誉和CSR绩效才能在危机发生时发挥积极作用。此外，作为一家依赖社交媒体的公司，Chicecream利用预警系统和透明有效的应对决策，通过有影响力的人迅速传递给受众。最后，Chicecream与行业内其他公司的紧张关系损害了其市场地位和声誉。因此，加强与行业协会、媒体等利益相关者的合作，不仅可以促进技术交流，还可以凝聚行业力量，提升公司的声誉。

Reference

• Academic Drip. (2023). Text Mining (TM) - a software for text mining (Version 6.0) [Computer software]. Github. https://github.com/2088904822

• Assiouras, I., Ozgen, O., & Skourtis, G. (2013). The impact of corporate social responsibility in food industry in product-harm crises. British Food Journal (1966), 115(1), 108–123. https://doi.org/10.1108/00070701311289902

• Benoit, W.L. (2015). Image Restoration Theory. In W. Donsbach (Ed.), The International Encyclopedia of Communication. https://doi.org/10.1002/9781405186407.wbieci009.pub2

• Blei, D. M., Ng, A. Y., & Jordan, M. I. (2003). Latent Dirichlet Allocation. Journal of Machine Learning Research, 3, 993-1022.

• Chen, S., Chi, Y., & Li, A. (2023). Study on the image restoration strategy and effect of corporates in crisis situations based on text mining. Procedia Computer Science, 221, 1250–1257. https://doi.org/10.1016/j.procs.2023.08.113

• Community Marketing Research institue. (2021). After selling 100 million ice creams, Zhong Xue Gao has gone from "emerging" to "evergreen". Digitaling. https://www.digitaling.com/articles/454922.html

• Coombs, T., & Holladay, S. J. (2022). The Handbook of Crisis Communication. John Wiley & Sons Ltd. https://doi.org/10.1002/9781119678953

• Coombs, W. T. (2004). Impact of Past Crises on Current Crisis Communication: Insights From Situational Crisis Communication Theory. The Journal of Business Communication (1973), 41(3), 265-289. https://doi.org/10.1177/0021943604265607

• Coombs, W. T. (2007). Ongoing Crisis Communication: Planning, Managing, and Responding (2nd ed.). Sage Publications.

• Fink, S. (1986). Crisis Management: Planning for the Inevitable. AMACOM.

• HiDaDeng. (2024). CNtext. Github. https://github.com/hiDaDeng/cntext/

• Jiang, Z. (2024). Mining themes, emotions, and stance in the news coverage of the Russia-Ukraine War from Reuters and Xinhua. Digital Scholarship in the Humanities, 39(2), 609–624. https://doi.org/10.1093/llc/fqae015

• JoeanAmier. (2024). TikTokDownloader. Github. https://github.com/JoeanAmier/TikTokDownloader

• Nardi, B. A., & O'Day, V. L. (1999). Information Ecologies: Using Technology with Heart. MIT Press.

• Olcott, E., & Zhou, E. (2022). China’s ice cream brands outpace inflation with soaring prices. FT.Com, https://www.proquest.com/trade-journals/china-s-ice-cream-brands-outpace-inflation-with/docview/2699361119/se-2

• Pang, B., & Lee, L. (2008). Opinion mining and sentiment analysis. Now Foundations and Trends, 2(1-2), 1-135. https://doi.org/10.1561/1500000011

• Shen, J. (2022). Analyzing the Trend of Modern Ice Cream Industry: The Case of Chicecream. In A. Appolloni et al. (Eds.), Advances in Economics, Business and Management Research (pp. 256-266). Atlantis Press. https://doi.org/10.2991/978-94-6463-052-7_30

• Sun, H., & Xu, N. (2024). Theme Evolution Analysis of Network Public Opinion——Taking Popular Events on Weibo as an Example. Media Observer,7(15), 37-39. https://doi.org/10.3969/j.issn.2096-5079.2024.15.009

• Wang, X. (2023). Analyzing the Strategy of Chicecream’s Brand Image Based on Marketing Mix Theory. Advances in Economics, Management and Political Sciences, 45(1), 1-8. https://doi.org/10.54254/2754-1169/45/20230254

结束Miami海滩的观景台，我们开车20分钟从冲浪者天堂海滩前往保护公园看袋鼠和考拉，在这里有面积超大的保护区，一望无际的草原和茂密的桉树林，穿梭于林间小道你可以抬头寻觅，幸运的话可以看到在桉树上呼呼大睡的考拉。

而草地上袋鼠家族就在你身旁一蹦一跳地经过，你也可以蹲下身子和正在吃草地袋鼠们近距离接触和拍照，不过它们是野生袋鼠，不可以触摸，但是没人管哈哈哈哈哈。

📍 Coombabah Lake Conversation Park

结束Skypoint观景台的俯瞰视角，我们跟随小红书的指引来到Miami海滩，这里有一处欣赏黄金海岸冲浪者天堂海滩的神秘观测点，也是众多旅行者的打卡点。

📍 Mick Schamburg Park Lookout

我们因为驾车前往，所以省去了不少路途颠簸，所以如果去黄金海岸如果要去这个打卡点的话最好安排好路线，因为这里比较小众且举例冲浪者天堂海滩比较远。

Skypoint观景台需要起很早排队，因为我们想在观景台预约上10刀的自助早餐，登上观景台我们花了半个小时吃自助早餐，非常丰盛，坐在窗边黄金海岸海滩和城市尽收眼底。

首先我们在skypoint塔下排队等待取票，早上八点钟已经排起了长长的队伍，复活节也有很多本地的家庭和外地游客一起到黄金海岸过节。

4月29日后补，实际记录为4月1日

此条记录为后补，因为期中一个多月全部忙于赶due，实在是分身乏术。

在和朋友一行7人北岛的特种兵一日游结束后，紧接着又和朋友一起驾车前往黄金海岸。从布里斯班市中心开车到黄金海岸我们花费了58分钟的时间，走一路的高速公路时间过得很快，也很开心。

小红书推荐的餐厅很好吃

住宿

我们三个人订了一个民宿式的酒店，离海滩不远处，三床两室一厨两卫两厅，带阳台。价格比其他酒店低很多，最主要是我们不想拼床，而三床的酒店非常少且贵。我们都还挺满意的。

第二天我们要去Skypoint观景台俯瞰黄金海岸，去Miami海滩网红机位捕捉海滩，去野生袋鼠园看袋鼠考拉……

后补，实际记录为3月30日

此条记录为后补，因为期中一个多月全部忙于赶due，实在是分身乏术。

复活节假期也意味着第一波due已经结束了，可以有一个多星期的假期用来休整和旅行。我们一行七人，特种兵式完成北岛（贝斯特拉德布罗克岛, North Stradbroke Island）一日游。天气非常好，蓝天白云还有阵阵海风，我们在登岛前在Woolworths买好吃的喝的准备在岛上野餐。

首先坐火车从Park Central出发，到达Cleveland，然后公交/步行到达Minjerribah Vehicle Ferry坐半个小时的船登岛，上岛之后坐固定路线的岛上公交抵达海滩和观景台等景点。

先看视频

北岛掠影

这条记录于2024年4月25日后补，因为期中一个多月全部忙于赶due，实在是分身乏术。

正是开始第一波due后，非常难得能于周末在布里斯班city和学校附近转转。

1.坐船上下学

第一次坐轮渡从学校到city，刚好遇到落日和晚霞，感觉很棒！让我想起在武汉坐轮渡的记忆，一趟轮渡和公交的价格差不多，虽然时间慢一些，但是可以吹吹风看看景色，非常适合不赶时间的时候。

视频

Street Beach

这个人造海滩每天有超多人游泳和晒日光浴，非常chill。基本上懂得了澳大利亚人的松弛感。

Weekend Market

好天气

第一周在学校、city等周边熟悉环境，虽然是30多度的高温，但是只要处于阴凉处就会凉爽很多。

下周就要开始上课了，趁着周末，去Queen Street Mall逛一逛，顺便去周围的超市和药妆店买点生活用品。

去药妆店需要经过布里斯班河岸，之前拍过夜景，今天天气还不错，来看看白天啥样。

这个意大利文艺复兴时期的老建筑是原财政部大楼，从地图软件上显示来看，现在开放有不间断的du场和酒店，财政部大楼，前身为新公共办公室，是一座列入遗产名录的前政府公共行政大楼，位于澳大利亚昆士兰州布里斯班市布里斯班市皇后街 21 号。它建于 1886 年至 1928 年，为昆士兰州政府建造。

在Wiki中查看

充实的周末

前两天的收获

有幸在飞机上遇到一位阿姨，她带我来到这个Market，香蕉居然＄1.99/kg！我记得家附近的Woolworths香蕉的价格是＄4+/kg，果断买了几根青的几根熟的。

2月16日吃完晚饭，外面下了一天的雨，就想尝试去超市顺便能够等雨停走回来。

晚8点多雨终于停了，就来到Queen Mall和Brisbane Park散散步。

视频片段

第一次离开爸妈一年多

第一次离开中国

第一次来广州（虽然只是转机）

第一次一个人乘坐国际航班

第一次坐Brisbane出租车

……

没错，在家里等待半年多，13日大年初四终于启程飞往澳大利亚布里斯班。

武汉→广州

在和众多亲属告别之后踏上前往广州的飞机，六点多抵达广州，等待两三小时就要乘坐国际航班到布里斯班了，这里不得不提一嘴，广州白云机场转国际要走一二十分钟，不过过了海关就不用安检，可以在转国际候机的地方买一些吃的喝的带上飞机。

广州→布里斯班

晚上九点多的飞机要飞八个多小时，到达就是当地时间8:30，北京时间6:30，这个航班安排还是非常人性化的。

就是这里，接近澳大利亚大陆的时候连续的几次爬升和气流，虽然路上颠簸不断，但是还是顺利安全地抵达布里斯班机场！整个路程只睡了2个多小时，不断被颠簸醒来，不过也没什么困意，整个人既兴奋又紧张。

第三站：到住处！

出了海关就看到大厅里的UQ志愿者，收获了UQ新生包，并得知现在取消了Shuttle bus，鼓励我们使用学校发的优惠卡打出租车或网约车，这里得重点说一下！学校发的Cabcharge有效期居然一直到3.12，每次限制100刀（也很多了，根本用不了），似乎是无限次使用，最后学校付钱！！！对我们第一次来到异国他乡的人实在是太友好了。

UQ新生周活动

安顿一下之后就要赶往UQ St Lucia campus参加O'week 迎新活动，现场气氛很热烈，第一次见这么多外国人哈哈哈哈哈，很多社团，整个Great Court全是沉浸在活动中的同学。

美丽的UQ Lake

活动2pm就结束了，和朋友分别之后，我需要去UQ Lake Station坐公交车回去，所以路过UQ Lake，一整个被校园中的风景吸引住，所有的图片也不需要加滤镜和调色，很和谐。

Coles购物

虽然中午的时候已经在Woolworths买了一些，但是物价太贵，而且metro的东西不多，所以步行1.2km到大一些的Coles买，这个1.2km实在和国内太不一样！大大小小的坡子小山丘走的非常累，加之21-32℃的天气，又热又累，买了一些就到晚上了，东西比较多，纸袋实在靠不住，所以就用13Cab约Taxi回去，等了很久没有司机接单，最后来了一个超大的依维柯哈哈哈哈，真心感谢司机大叔不挑剔麻雀小单。

布里斯班当地时间12：30

晚安，爸妈

晚安，武汉

晚安，布里斯班

晚安……

楚平王斩伍员（字子胥）之父伍奢，又追捕其兄伍尚。伍子胥逃出樊城，投奔吴国。楚平王在各处悬挂图像，缉拿伍子胥。伍子胥被阻于昭关，幸遇隐士东皋公，将其藏在家中，一连数日。伍子胥辗转反侧，不能成眠，一夜之间，须发皆白。东皋公有友人皇甫讷，其容貌与伍子胥相像，乃邀其过府，嘱其与伍子胥互易衣服。皇甫讷先至关，果被关吏拿住，大声辩白，关吏不信。正扰攘间，伍子胥已混出昭关。

选段视频

舞台掠影

白素贞自金山寺战败后，行至西湖断桥，腹疼难行。恰遇许仙踵至，小青恨许仙负心，欲杀之，白力为其解脱，亲责许之薄幸，许仙赔罪明心，白、许言归于好，相偕同行。

影片合集：

武汉京剧院黄派青衣演员刘璐饰演代战公主的舞台呈现

时间：2023/11/13

位置：武汉京剧院·天一戏院

演出：《红鬃烈马》

演员：

薛平贵：王　墨　饰

王宝钏（前）：李仪苹　饰

王宝钏（后）：赵晶晶　饰

代战公主：刘　璐　饰

……

王宝钏独居破瓦寒窑18年，在困顿中写下血书，托鸿雁寄往西凉。薛平贵得信，告别代战公主，急返长安，在武家坡前遇见王宝钏。夫妻分离，容颜难辨，不敢贸然相认。薛平贵借问路试探宝钏，王宝钏清贫艰苦，坚守贞节，逃回寒窑。薛平贵赶至窑前，细说缘由，赔诉前情，夫妻才得相认。唐帝死后，王允篡位，要杀平贵。平贵逃走，放出西凉代战公主赠他的金翎鸽子，请她引兵来救。王允差大将高嗣继追杀平贵，平贵不敌；高嗣继与代战公主大战，代战公主说服他降了薛平贵，一同反攻长安拿获王允、魏虎，自立为帝。薛平贵在金殿封王宝钏、代战公主分掌后宫、兵权；迎送王夫人去养老宫颐养天年；分封苏龙，问斩魏虎；王允死罪不免，经王宝钏再三求情，得赦，封养老太师，有职无权。

——武汉市京剧院

↑ 推荐播放《武家坡(程砚秋、谭富英)》

影片合集：

武汉京剧院演出《红鬃烈马》部分舞台呈现

时间：2023/11/13

位置：武汉京剧院·天一戏院

演出：《红鬃烈马》

演员：

薛平贵：王　墨　饰

王宝钏（前）：李仪苹　饰

王宝钏（后）：赵晶晶　饰

代战公主：刘　璐　饰

……

王宝钏独居破瓦寒窑18年，在困顿中写下血书，托鸿雁寄往西凉。薛平贵得信，告别代战公主，急返长安，在武家坡前遇见王宝钏。夫妻分离，容颜难辨，不敢贸然相认。薛平贵借问路试探宝钏，王宝钏清贫艰苦，坚守贞节，逃回寒窑。薛平贵赶至窑前，细说缘由，赔诉前情，夫妻才得相认。唐帝死后，王允篡位，要杀平贵。平贵逃走，放出西凉代战公主赠他的金翎鸽子，请她引兵来救。王允差大将高嗣继追杀平贵，平贵不敌；高嗣继与代战公主大战，代战公主说服他降了薛平贵，一同反攻长安拿获王允、魏虎，自立为帝。薛平贵在金殿封王宝钏、代战公主分掌后宫、兵权；迎送王夫人去养老宫颐养天年；分封苏龙，问斩魏虎；王允死罪不免，经王宝钏再三求情，得赦，封养老太师，有职无权。

——武汉是京剧院

舞台掠影

空中剧院live

您可以使用抖音APP扫描抖音码，或者点击图片下方链接进入抖音PC版观看

• 红鬃烈马·武家坡选段

• 《武家坡》·一马离了西凉界选段

• 《武家坡》·大嫂说话太迟慢选段

• 《武家坡》·二月二日龙发显选段

💡总的来说，这是一个失败的申请经历，供大家避雷。

💡以下经验适用于传媒、经管、文学等其他人文社科专业

申请篇

1.慎重选择中介/DIY

我可以讲讲我的中介，中介非常重要，但是也很难挑选，我选择了我的语培机构套餐一并申请，我发现他们有一个很显著的特点，在准备你的申请材料的时候，会拼命告诉你并让你认同：

💡你的背景学校很一般，如果想申到好学校，要在交申请材料的时候考出一个满意的语言成绩一起递交上去，我们这边有语言培训集训营，还有一对一课程……

乍一看我觉得很有道理，既然是背景学校一般，那同时递交一个漂亮的语言成绩肯定会让招生官眼前一亮，让他们觉得，虽然背景学校一般，但是学习能力强……

但是，这个逻辑本身存在问题，语言成绩高=学习能力强吗？语言成绩高=学术能力强吗？语言成绩作为一种招生门槛，招生官更看重你的学术素养和学术能力，简而言之，你能否大概率被录取，取决于你的学术背景（背景院校+学术成绩）> CV PS文书 > 你的语言成绩（准入门槛而已），所以你会发现，英区澳区等地方可以先提交你的学术材料，拿到conditional offer，再在他给出的ddl之前后补你的语言材料，换取unconditional offer这种操作模式，所以语言成绩并不是拒绝你的首要因素。

回到我，在大量灌输这些思想的情况下，我花费了大量的时间和精力加强语言，让我忽视了一些学术成绩的提高的重视，也直接导致了2022年下半年我以“非必要不多选”原则选了两门选修课，错过了提高GPA的关键机会。

所以，通过我的案例，请在决定润的开始重点关注你该选择 中介全流程？半DIY？ 全DIY？

• 中介全流程就是通过你的需求，将申请文书、提交材料等等的全套流程都交给中介机构帮你完成，这种模式请一定要擦亮双眼选择合适你的中介，大机构有大机构的弊端，小而美的机构也有特有的好处，适合自己的才是最好的，但是请注意！由于提交申请都是在学校的官网系统，不能告诉你系统用户名密码、申请邮箱及密码的「不透明申请​」，请谨慎选择！很多机构老师会告诉你为了避免你自己误操作等原因不提供这些信息，那么，请你在选择这种机构的时候考虑一下，尽量选择能够「透明申请」的机构，一般来说，费用全包应该在1w-2w左右。

• 半DIY申请指的是在准备材料的过程中，特别是英区，需要你提交CV（个人简历）、PS（personal statement 个人陈述），有的甚至需要你提交Writing sample（但是这个建议自己写），像CV、PS等材料，当你无从下手的时候，可以寻求专业文书机构帮你安排布局你的文书材料，辅助你更好地申请，除了文书的起草和完稿，申请流程中的其他所有流程比如递交材料、与校方沟通等都需要你自己完成，费用一般在1w内。

• 全DIY就是所有流程你自己完成，包括定校、材料准备、递交、沟通、签证等等，这种方法适合信息搜索能力较强或者有经验的情况下选择。

2.你的核心任务是GPA

以我为例：

2022年第一次申请：GPA 87.3%，申请卷上天的传媒专业，文书体现了我获得的各种奖项、比赛、科研、论文。从下面的一些我的案例，我是中介文书、递交全流程，结合我的背景材料，你可以综合判断2023fall的「卷度​」

2023fall（2022.10-2023.2）

• KCL QS37：交了writing sample 拒信

• 华威大学 QS64：一周拒信

• 谢菲尔德大学 QS96：两周拒信

• 南安普顿大学 QS78：第二天来offer……

• 利兹大学 QS86：半年拒信

• 格拉斯哥大学 QS81：半年拒信

（最后这俩最亏，不得不提到我的中介，递交材料半年后我的成绩已经从87.7升级到88，上升了一个门槛，我已经提出了是否可以更新我的成绩，中介说没必要……利兹大学在第三轮2024年给了我拒信）

最终，我的加权平均成绩（主要看这个）定格在90+，于是毕业后我又紧急DIY加申了几个学校，保险起见，排到了24fall，有的2月，有的9月，比较之下轻松来了不少offer。

你还需要考虑list，下面是几个案例：

• 布里斯托大学 QS61：江汉大学不在list（之前有一个18级学长成功申请了布里斯托大学，后面江大等一众双非院校就从list上消失了）

• 利兹大学 QS86 的传媒学院：江汉大学不在list（大部分双非都×）

• 墨尔本大学 QS33 的传媒专业：不招双非

• ……

江汉大学可能不在有的学校或学院list内，也就是基本上不在这些学校或下属学院的考虑范围中，背景学校改变不了的话，就要考虑在list内的学校了，以下是英区GPA的情况：

• 23fall申请的时候中介告诉我，当年UK大概的情况是好一点的学校：加权平均成绩 985：80，211：85，双非：88-90+

• 仅供参考，不排除冲刺成功的可能

从上面的经历，可以初步总结：GPA是你的命根子，请尽量力所能及地提高你的GPA。

3.做申请的“海王”

从上面我的经历可以看出，在offer这件事上，过度信赖和忠诚是没有安全可言的，你需要力所能及的提高自己的录取概率，包括像我一样，在中途寻求更新你的更高的学术成绩，你可以拿到多个con offer 和uncon offer，至于最终选择哪一个学校换取CAS（学校出具的办理学签的必要材料），就可以综合考虑进行选择了，请以我为反面教材，鸡蛋不要放在一个篮子里。

4.择校QS100？还是？

以上海落户政策为例：

• QS排名前100学校毕业硕士回国后在上海交满6个月社保可申请落户上海

• QS排名前50学校毕业硕士回国之后可以直接申请落户上海

就业方面：

• 回国就业大部分企事业单位会关注QS世界大学排名，大部分要求top100，顶尖会要求top50

• 同时也会关注其他榜单，例如上海软科世界大学排名（影响力逐年攀升中）、U.S.News 世界大学排名

你可以按照你自己的情况进行选择和冲刺。下面是榜单链接：

• QS世界大学排名（英国）

• 软科世界大学学术排名（中国）

• U.S. News 世界大学排名（美国）

费用篇

首先我们先来看一下学制：

一般情况下：美国1-2年为主；英国1年为主；新加坡1年为主；中国香港1年为主；加拿大1-2年为主；澳大利亚2年为主……以上列举了热门地区常见专业学制，更多请自行了解

费用情况：

💡注意！以下列举了一年费用

住房篇

一般有以下几种租房方式：

• 国内学生公寓中介

• 当地租房中介

• 房源直租

• 承接转租等

一般有以下几种房屋类型：

• 学生公寓

• 社会公寓（包含flat、house等）

一般有以下几种房间类型：

• single room（独立卧室、公共浴室、公共厨房）

• en-suite（多人间，独立卧室、独立卫浴、公共厨房）

• studio（单人单间，独立卫浴、独立厨房）

• 1b1b（一般是单人套间，1卧室1浴室，带客厅的那种大的升级版studio）

• nbnb（第一个b是bedroom，第二个b是bathroom，n是数字，例如2b2b是2间卧室和2间浴室）

学生公寓

一般类似酒店式公寓，有门禁前台、公共区域（健身、娱乐、学习）、洗衣房（一般带烘干，外部费用）等公共设施，一般房费会包含bill水电网账单，这类房源一般从学生公寓官网（需要该学生公寓有官网租房服务）或者国内学生公寓中介app（例如异乡、学旅家等）可以寻找到。

学生公寓退订政策较为灵活，部分可以直接退款，另外一部分需要挂平台转租，由于平台用户数量多，转租也比较容易。学生公寓非常抢手，往往是提前很久就预定好，价格越早越便宜越划算，一般开学前三四个月就很少有性价比较高的房源了。

社会公寓

社会公寓就比较复杂，需要你拥有强大的信息搜索能力，一般在当地的租房网站上寻找，类似于国内的租房软件，以英国为例，英国租房网站有Rightmove、Zoopla等，该方法适合当地学生公寓很少了，或你相中了地段/价格/装修等很合适的社会公寓，需要你自行检索，自行邮件沟通。

如果可以的话，可以在小红书搜索当地的代看房服务，在和房东/中介预约看房时间之后，委托你事先联系的代看房中介帮你实地查看房屋真实性，通过在线连线的方式判断对房屋、地段、设施是否满意，社会公寓一般不包含bill，性价比比较高，同时，由于你在UK没有担保人，所以一般来说社会公寓 房东/中介 需要你 分期/一次性 在入住之前全款缴纳一年房费，所以请谨慎操作全部流程，避免财产损失。

写在结尾

免责声明

以上经验没有任何商业营销推广内容，也不作任何平台/中介推荐，并且明确声明不对这些材料和内容作出任何明示或默示的保证，请您结合社会背景、自身条件自行判断和选择，作者和网站不对用户在阅读完本经验后可能出现的经济以及其他潜在风险承担责任。

内容补充

如果您认为还有其他方面的问题需要补充解答说明的，请直接在下方评论或者点击下方按钮联系我，评论或联系内容中请说明您需要本文解答的困扰或问题。

也非常欢迎您对本经验进行补充，经验补充内容也请点击下方按钮联系我，经过审核将会将您的内容和您的名称、头像等（经过您的允许）公开在Contributors列表。

“汉末乱世，西凉守将马超操演军阵，忽闻马岱来报，其父马腾遭曹操暗害。身心历尽重创之后，马超终得投奔明主。”5月21日晚，第三十一届中国戏剧梅花奖获奖名单揭晓，湖北省京剧院优秀武生演员唐恺凭借在整理改编传统京剧《马超》中过硬的专业水平和精湛的表演喜获梅花奖，为湖北再添一朵“梅花”。

——中华人民共和国旅游部官网

参评梅花奖的新编传统戏《马超》演员阵容可谓豪华，唐凯也因该剧获得第31届京剧梅花奖，剧中“刘备”一角饰演者为国家一级演员、梅花奖得主、湖北京剧院奚派老生王小蝉，“曹操”饰演者为国家一级演员、湖北省京剧院裘派花脸江峰，“马夫人”由青年张派青衣杜玥饰演，以及众多湖北省京剧院优秀青年演员联袂出演。

僵尸摔*3

在接连丧妻丧子之后，唐凯饰演的马超极度悲痛，多次晕厥，演员以三次不同的僵尸摔艺术化表现出该情境下的人物情感。

谢幕

竞赛介绍

全国大学生广告艺术大赛。“大广赛”是中国最大的高校广告艺术传播平台，是由教育部高等教育司指导、教育部高等学校新闻传播学类专业教学指导委员会、中国高等教育学会广告教育专业委员会共同主办，中国传媒大学、全国大学生广告艺术大赛组委会承办的全国高校文科大赛。

大广赛是迄今为止全国规模最大、覆盖高等院校较广、参与师生人数多、国家级大学生赛事。2005年第一届大广赛开赛，成功举办了九届十次赛事，全国一千三百多所高校参与其中，数十万学生提交作品，形成了稳定的、成熟的、具有相当规模的大学生教学实践平台。

竞赛命题与解析笔记

品牌方

Canva 可画

品牌使命

赋予世界设计的力量 (Empowering the world to design) ①

目标人群

18-30岁的大学生和年轻职场人 ②

广告目的

塑造Canva可画是“ 可以创作一切的视觉传播平台 ”的品牌形象，使Canva可画成为目标群体首选的设计平台。 ③

结合目标人群的实际工作学习场景，挖掘Canva可画的独特卖点，创作能转化的营销广告内容，吸引大学生和职场人使用Canva可画。

建立长期有效的产品推广机制(裂变分享, 口碑营销，社交媒体挑战赛等)，大幅提升Canva可画在大学生和年轻职场人中的产品渗透率和使用频率。

① 赋予一词是自上而下，即从👤广告主到📍消费者，创意方向可以构建自下而上或互相交融关系；
② 消费核心群体为🏨大学生及🏬职场青年，注意行为特征和消费心理；
③ “创作一切视觉传播平台”凸显出功用多样性和自身独特性，从🎥影视广告作品角度出发，体现出📢多场景、多用途、高效率的产品核心。

品牌简介

Canva可画是全球领先的视觉传播平台，2013年诞生于悉尼，2018年进入中国市场。Canva可画为用户提供 零门槛 ④ 的设计编辑工具， 海量免费设计模板 和 千万级版权素材内容 ⑤ ，使不具备任何专业设计技能的“设计小白”，只需简单的拖拽和编辑，也能轻松做出想要的好设计 ⑥ 。每月全球7500万的用户通过Canva可画，实现市场营销、内容制作、工作汇报中的各类视觉传播目标。至今他们已经在Canva可画上创作了超过80亿个设计，现在平均每秒就有150个设计被创建。无数关于设计的美好故事正在发生，被科技创新驱动的设计，也在更多人的生活中折射出巨大能量。

核心卖点

1、10万款免费原创设计模板，覆盖校园职场所有使用场景

Canva可画内含10万款免费原创设计模板，覆盖200多种设计场景，包括海报、社交媒体配图、演示文稿PPT、简历、视频、动图......满足校园职场用户各类设计需求 ⑦

2、海量高质版权内容，一站式解决设计素材需求

产品拥有超过6000万版权图片素材，3000种中英文版权字体，70万视频素材，2.5万音频素材，风格丰富多样，一个平台就能彻底解决各种素材需求 ⑧

3、“零门槛”设计工具，支持多人同时在线编辑

无需设计和软件基础，设计小白使用Canva可画，也能轻松做出大师级设计作品。网页端和移动端账号内容同步，随时随地开启设计。支持多人同时在线编辑，再不用离线文件传来传去，协作更高效。 ⑨

主题解析

我们每个人的学习、工作、生活都离不开视觉表达：小到朋友圈修图、美化简历，大到制作可视化报告，宣传海报等。信息的表达形式，影响信息的传达效果，就像版面精致的课堂展示会被老师和同学一眼记住，吸睛的海报会让消费者驻足。 ⑩

但在传统观念里，设计是个太有门槛的事情，很多人不了解设计知识，或不会使用专业设计软件，再或是缺少设计灵感和素材——总之太多阻碍。而Canva可画，致力用科技赋能全民设计，消除一切设计门槛，帮助大家摆脱人力、创意、技能和空间限制，完成一切视觉内容。 ⑪

我们希望，Canva可画可以成为每个人的“设计师”。愿大家都能用最美的视觉，表达心中所想；用最好的视觉，加速目标达成。大学生和年轻职场人可以通过Canva可画：

• 提高PPT制作能力，在团队合作中一鸣惊人：多人同时在线编辑PPT功能，助力大学生与职场新人轻松解决传统小组作业、团队合作制作PPT带来的诸多困扰，轻松高效完成一切PPT制作需求，提升学习成绩和工作成果。

• 口袋里的设计师，设计从此不求人：面对社团活动、工作中突如其来的设计需求，不再需要求助他人、或临时上网搜索专业软件教程，随时随地打开Canva可画，就能做出专业设计。

• 增加生活仪式感，享受设计带来的惊喜：用设计为生活和身边的人带来惊喜，无论是生日贺卡还是情侣拼图，日程安排表，婚礼邀请函等，Canva可画能让你的生活更有仪式感，享受DIY设计的乐趣。

④ 🚲操作简单，易于上手；
⑤ 🚀海量模板：联想创意并可视化；
⑥ ✂简单拖拽和编辑：试图可视化。

⑦ 🌿10万！多且丰富；
⑧ 🌻素材使用，放心方便；
⑨ 🍓零门槛+团队协作！

⑩ 🎁放心，你离不开我；
⑪ 📝打破传统观念，DIY！；

创意总结

十万个模板 >>> 🔔十万个应用场景

多种用途>>> 📆多种场景

模板？>>> 🌱木板？💡画板？🎉调色板？

简易拖拽>>> 🔓用手操作就行！……

✅将canvas平台中的模板联想具象为画板，将在电脑、手机、ipad的DIY操作联想抽象为手的直接操作，体现出了简单易操作性。广告作品中不断将“画板”放置在桌面，通过不断转场切换不同的桌面和不同的画板内容来象征不同场景的设计需求，随后用手来操作完成设计，体现出了canvas赋予了不同消费者设计的力量的同时，消费者通过canvas创造性地设计多样化的作品，这种有别于单纯自上而下或是自下而上的双向互动关系。同时辅以文案对产品特性进行解释和突出。最后回归到canvas10万+原创模板满足你的10万+场景需求。

作品视频

《满足设计的十万个场景》

赛道：影视广告30s（横屏）

获奖情况

🏅第十三届大学生广告艺术大赛全国优秀奖

🏅第十三届大学生广告艺术大赛省二等奖

🏅江汉大学学习竞赛广告艺术大赛二等奖

创作团队

策划、导演：梅振宇、吴璇

摄像：吴璇、张雨轩、陈天音、康非凡

后期制作：梅振宇、张雨轩

竞赛介绍

全国大学生广告艺术大赛。“大广赛”是中国最大的高校广告艺术传播平台，是由教育部高等教育司指导、教育部高等学校新闻传播学类专业教学指导委员会、中国高等教育学会广告教育专业委员会共同主办，中国传媒大学、全国大学生广告艺术大赛组委会承办的全国高校文科大赛。

大广赛是迄今为止全国规模最大、覆盖高等院校较广、参与师生人数多、国家级大学生赛事。2005年第一届大广赛开赛，成功举办了九届十次赛事，全国一千三百多所高校参与其中，数十万学生提交作品，形成了稳定的、成熟的、具有相当规模的大学生教学实践平台。

竞赛命题与解析笔记

H5作品

H5互动作品二维码

请用手机微信等软件扫描体验H5互动页面

H5互动作品预览视频

您也可以播放下面的视频观看预览视频代替您扫码体验，不过请注意，该视频是我有点击等互动操作的屏幕录制，并非单纯动画。（请您播放视频的时候开启声音）

获奖情况

🏆大学生广告艺术大赛省三等奖

🏆江汉大学学习竞赛广告艺术大赛三等奖

创作团队

梅振宇¹、蓝宇航²、袁博聪³

1.江汉大学人文学院新闻传播系广告学专业

2.江汉大学设计学院视觉传达专业

3.江汉大学人文学院汉语言文学专业

项目介绍视频

品牌故事

我是西湖龙井43号茶树，如今我叫黄陂龙井.在这样一片拥有四千多年历史沉淀和无数红色革命先烈的厚重土壤，我编织着茶香生态和红色资源的文化内核。

1973年，“上山下乡”运动如火如荼。我被捧在了黄陂县蔡家榨人民公社插队知青和农学专家的手中，我被播撒在黄陂这个拥有4000多年历史沉淀的厚重土地，知青和农学专家跨越千里带我来到这里，几十年来，我扎根在大别山麓,聆听着黄麻起义的故事，领悟着红安将军文化和姚家山抗战精神，传承革命精神，我向世人传递着这片土地和人民古朴纯澈的爱。

项目背景

在如今乡村振兴和党史学习的利好政策以及毗邻景区与红色资源的优越条件下，面对当地红色资源集中，但尚未建立整合机制；传统茶产业产销模式单一互联网思维欠缺，以及疫情深刻影响着实体与旅游经济；我肩负改变一流茶叶，二流品牌，三流价格的重大责任，以花香茶谷景区为基础，结合乡村振兴与业态兴旺的时代机遇与大家见面。

难点机遇与项目基础

项目已经完成了大量的前期工作，建立了十分良好的前提基础，作为2020年国家级大学生创业实践训练项目：“走出大山，武汉黄陂区农产品线上推广项目”以及2022年国家级大学生创新创业训练项目等科研创新与实践项目，为黄陂龙井一步步建立起登高远眺的台阶。

项目计划

整体规划

• 第一阶段是销售引流阶段，以线上为主要销售渠道，运用抖音虚拟直播的创新方式进行线上销售与引流，启动校园合作，民宿茶园改造规划；

• 第二阶段是体验拓展阶段，在完善旅游线路的同时，建立体验式茶园和茶文化客栈，举行线下茶文化体验周等交流活动，促进周边游、亲子游的发展；

• 第三阶段是研学康养阶段，引入文化内核，整合升级改造，完善研学基地，红绿融合发展，建立大学生实践基地，促进大学生振兴乡村。

阶段规划

• 在第一阶段中，项目核心产品是茶叶等农产品的直播销售，我们创新地采用了独特的IP形象，拥抱Z时代的审美以及虚拟直播解放生产力，吸引用户，我们项目的成员给各位老师发的就是本项目的独特IP，我们这样持续运用茶仙子这一IP形象作为虚拟直播的表现载体以及其他一系列文创产品、周边礼盒等，建立品牌形象和产品记忆；

• 在第二阶段，我们主要依托景区建立及品鉴采摘，制作，销售为一体的体验式茶园，线上认领茶树服务，结合线上线下整合营销，创新点是通过养成类小游戏增加用户粘性，线上线下的创新模式，同时依托景区开展茶文化，共创民宿以大学设计公司扶持农民提供，为共创模式，以提供标准，提供平台，营收分成为销售模式，在校企合作的征集是共创与改造和标准化作业平台流量供给的创新模式下，我相信经营不善的茶文化景区，与红色资源一到连点成面红绿融合一定会焕发新的生机，

• 最后第三阶段我们以红色文化研学，推进红加绿的深度融合，挖掘串联品牌，宏大叙事，编织品牌故事的文化内核。

团队优势与合作实践

项目团队具备丰富的助农经验，曾在疫情期间帮助村民销售土特产几万斤，形成了完善的电商，直播等多元销售路径，帮助农民打通销路，公司和项目被多家主流媒体宣传报道全网30多次，并且已经在黄陂区部分村镇开展试点复制合作。

前期项目组前往黄陂区祁家湾街道蔡家榨街道开展助农线上推广活动，并且依托三下乡社会实践团体项目形成调研报告，航拍调研。团队前往当地有关领导部门进行商业洽谈接。截至目前有学习强国、光明网、中国青年报等三十多家媒体对公司农产品销售和乡村振兴服务进行报道和宣传，并且收到多家单位发来的感谢信、推荐信和证明材料。

项目展望

项目坚持创造就业岗位，促进产业扶贫，已经创造了直接岗位七个，其中五名建档立卡贫困户，结合本公司业务及上下游产业促进间接就业岗位4000人。项目致力于推广区域红色文化，推动红加绿融合发展，整合多渠道销售，建立品牌集群。

项目成果

1.项目展示册&路演PPT

项目团队成员并肩作战，在“东乡龙井 时代故事”创新茶香生态红色文旅项目中完成了前期走访、市场调查、品牌策划、产品策划与设计、计划书撰写、路演策划、视频拍摄与制作等全流程各项工作。帮助地区茶叶产业品牌化运作和产品推广，帮助乡村建设“红绿融合”的文旅模式，通过线上直播、线下文化游的多元销售路径，为疫情背景下的茶叶等农产品滞销和旅游景区经营困局出主意。项目完成了一本《“黄陂东乡 时代故事”创新茶香生态红色文化旅游项目》展示手册以及路演方案策划与PPT设计。

2.项目计划书与学术性报告

• 一部共计163页的项目商业计划书题为《“黄陂东乡 时代故事”创新茶香生态红色文化旅游项目计划书》

• 一篇调查报告题为《乡村振兴背景下黄陂区茶香生态红色融合旅游的调查报告》

• 一篇学术论文题为《“红绿”融合旅游模式评价体系与发展策略——基于黄陂区和红安县的考察和实证研究》

3.设计成果受理外观专利

4.专业赛事奖项

• 第八届中国国际“互联网+”大学生创新创业大赛（A+类）中获得湖北省赛银奖（湖北省教育厅、湖北省委统战部等10部门主办）

• 该项目是人文学院历史上第一个进入省赛复赛并获得奖项的项目，也是江汉大学在“青年红色筑梦之旅”赛道创业类这一类别所获得的最高奖项，实现了历史性的突破。

• 湖北省第十二届“挑战杯·中国银行”大学生创业计划竞赛（A类）铜奖（共青团湖北省委等5部门主办）

• 2022年中国大学生广告艺术节学院奖（B类）优秀奖（中国广告协会举办）

5.获得科研立项并结题

立足于“东乡龙井 时代故事”商业计划项目的学术研究和调查项目“基于熵权TOPSIS法的融合旅游模式评价体系研究”获得江汉大学重点科研立项、国家级大学生创新创业训练项目立项，作为核心成员进行学术调查和研究。该项目旨在在新时期乡村振兴和党史学习的背景下，对融合旅游模式进行政策、资源、市场方面分析，通过构建融合旅游综合评价体系，对黄陂地区融合旅游的现状和可行性进行评估，总结梳理红色旅游和生态旅游的融合发展路径，研究可对黄陂地区旅游业发展和乡村振兴提供定量数据评价和政策决策参考，尝试对相关领域研究的理论与案例进行完善与丰富。为“东乡龙井 时代故事”项目的策划、设计乃至形成商业计划书、路演策划等提供可行性分析和理论基础。

6.实践证明与媒体报道

• 项目共收到多个部门的感谢信、推荐信、实践证明材料

• 项目成果和活动被学习强国、光明网、湖北日报等主流媒体报道30多次

团队成员

梅振宇¹、田亚飞²、陈天音¹、张雨轩¹、袁博聪²、李思雨³、雷洛维奇⁴、马明海¹、周凯旋⁵、徐诗皓⁶

1. 江汉大学人文学院新闻传播系广告学专业

2. 江汉大学人文学院汉语言文学专业

3. 江汉大学商学院会计学专业

4. 武汉理工大学信息工程学院通信工程专业

5. 江汉大学人工智能学院大数据应用专业

6. 江汉大学设计学院视觉传达专业

背景引入

从996到内卷，我们的生活从来不容易，但那又如何？就算凌晨飞奔赶火车也要擦干汗水，优雅奔赴人生下一站；就算工作生活处处碰壁也要擦掉眼泪，昂首向前找寻光明；就算熬夜工作996也要擦去疲惫，充满阳光面对每一天；就算出行在外放心不下家人，也要带着奥美生活洗脸巾，那是家人的挂念。我们生活中从来不缺阳光，我们正在渴求阳光，探索光明。

推广引入

在洞悉消费者的生活轨迹和需求后，我们推出商旅新产品，提出“把阳光装进背包”的核心主题。独立小包装，随身携带，无负担。“阳光”的概念是一种生活理念。即使工作很忙，出差在外，也需要品质生活和不断探索的阳光理念，本整合营销推广方案通过播种阳光、收获阳光、沐浴阳光三个阶段打通目标消费者圈层，根植品牌理念，引发群体精神共鸣，一步一步突破心理防线。

新产品设计

营销策划提案

通过建设线下快闪店、投放售卖机等公关活动，辅以小红书、微信、抖音等SNS社交媒体展开“把阳光装进背包”主题新品营销活动，分阶段将奥美生活新品“商旅装”洗脸巾进行推广曝光，以达到提升品牌认识度、根植新品理念、促进新品销售的目的。

推广活动提案

项目视频

相关30s影视广告《和阳光一起开启生活每一天》

获得全国大学生广告艺术大赛省级三等奖

项目获奖

·

项目团队

梅振宇¹、陈天音¹、吴璇¹、徐博文²、徐诗皓³

1.江汉大学人文学院新闻传播系广告学专业

2.江汉大学设计学院产品设计专业

3.江汉大学设计学院视觉传达设计专业

时间：2023/5/25

位置：武汉市龟山风景区

评分：★★★★★☆

记录一次龟山风景区的徒步🚶‍

三个小时左右就能走完全程

一路走一路看

山林之间即可将美丽武汉尽收眼底

登上山顶偶遇禹王宫、月树亭、龙祥寺山

经过关王庙、藏马洞、三国鲁肃墓

瞻仰向警予烈士陵园和红色战士公墓

耳边阵阵鸟鸣，感受凉风习习

透过树林间隙换个角度窥见武汉的车水马龙

时间：2023/5/31

位置：武汉市江夏区八分山

体验评分：★★★★★☆

在武昌看完沈红的演出后，驱车到海底捞（江夏区九全嘉广场店）边吃边等

等到临晨两点半，海底捞聚集了很多想要去夜爬的「特种兵们」

最后骑车出发去八分山停车点，再与好友爬到山顶，时间就到了三点半

凌晨的山路上，没有路灯，没有车辆

但是，全是夜爬的大学生，全是闪烁的灯光

“橘岳”套餐

五一假期来一次说走就走的旅行

橘子洲头+岳麓山

肯定是每一个去长沙的游客

必打卡的自然文化景观

经过不到两个小时的高铁

我们一下高铁就往橘子洲头去了

橘子洲头人超多

拍张游客照打卡不容易，交通也不是很方便。

火宫殿及步行街

2022年5月1日

永远也忘不掉步行街的人潮如织

可以说

这个地球上很难再遇到这样密度的人群

再加上五步一茶颜

排队的人，走路的人

拍照的人，吃小吃的人

每个人都是在释放压力

疫情却也挡不住大家渴望自由、向往美好的心

步行街

火宫殿

长沙文和友

建在海信广场中的80年代复刻版沉浸式体验馆

集合长沙网红店的“文化＋餐饮”巨无霸景点

超级文和友总计7层楼，2万平方米

早上十点钟开始开放预约

我们十一点钟预约成功的时候排在1.5w+号……

到了晚上十一点半才入内

原来，十一点半长沙的夜生活还没开始……

还有一些

方法介绍

PCA主成分分析法是利用降维的思想，把多指标转化为几个综合指标的多元统计分析方法[1,2,3]。

PCA（principal components analysis）即主成分分析技术，又称主分量分析，旨在利用降维的思想，把多指标转化为少数几个综合指标。

在统计学中，主成分分析PCA是一种简化数据集的技术。它是一个线性变换。这个变换把数据变换到一个新的坐标系统中，使得任何数据投影的第一大方差在第一个坐标(称为第一主成分)上，第二大方差在第二个坐标(第二主成分)上，依次类推。主成分分析经常用于减少数据集的维数，同时保持数据集的对方差贡献最大的特征。这是通过保留低阶主成分，忽略高阶主成分做到的。这样低阶成分往往能够保留住数据的最重要方面。但是，这也不是一定的，要视具体应用而定。

💡简而言之，就是当数据维度过高，就很难用肉眼直接观察彼此差异，为了能够从整体综合地观察彼此差异，就需要将高维度数据降维至二维或三维便于观察和比较分析。

教程及代码

准备

• 软件：R语言

• 库：factoextra

• 其他准备：数据文件

视频教程

视频教程引用up主小明的数据笔记本的视频教程，点击查看原视频 。

R语言代码

将以下代码复制到R语言中运行：

# PCA （中文：主成分分析）小明的数据笔记本：https://www.bilibili.com/video/BV1Dp4y1e7yd/
install.packages("factoextra")
library(factoextra)

iris   #内置鸢尾花数据集
View(iris)  #查看 
getwd()  # 查看工作目录
head(iris) # 查看前六行数据
iris.pca=prcomp(iris[,1:4],center=F) # 重点1

# 查看PCA后的结果
summary(iris.pca) 

fviz_eig(iris.pca, addlabels = T)  # 以图表形式来展现选择PC1/PC1,2/PC1,2,3，..N （选择标准：>80%即可） 

names(iris.pca) # 表头
iris.pca$x  # 查看表头x里存的数据  
iris.pca$rotation
head(iris.pca$rotation)
head(iris)
sum(iris.pca$rotation[,1]*iris[1,1:4])
head(iris.pca$x)

# Dessiner
fviz_pca_ind(iris.pca, col.ind= iris$Species, addEllipses = T,geom = ("point"))

分步解析

1.安装并加载factoextra

install.packages("factoextra")
library(factoextra)

2.查看工作目录

此步骤需要将准备好的数据表格放入工作目录中，

数据表格模板：https://kdocs.cn/l/cdiAq1R7nD2k

getwd()  # 查看工作目录

3.将数据模板导入到R中并查看

df<-read.csv("文件名.csv",header=T, row.names = 1,fileEncoding = 'GBK') # 查看前六行数据
head(df)

4.主成分分析

自定义.pca<-prcomp(df[选取行-全部数据为空,选取列-1:n],center=T) # 重点1

示例：假如数据文件中有六个维度，需要选取全部数据，那么代码为：

自定义.pca<-prcomp(df[,1:6],center=T) # 重点1

5.查看结果并生成碎石图

查看Cumulative Proportion中PC2是否大于80%，大于则代表降维包含了大部分信息

# 查看PCA后的结果
summary(test0330.pca) 
fviz_eig(test0330.pca, addlabels = T)  # 以图表形式来展现选择PC1/PC1,2/PC1,2,3，..N （选择标准：>80%即可）

注意：如果fviz_eig没有反应，需要运行重启代码：

dev.off()
dev.new() 

6.查看主成分分析的结果数据集

names(自定义.pca) # 表头
自定义.pca$x  # 查看表头x里存的数据

7.绘图

注意：Group=分组

# Dessiner
fviz_pca_ind(自定义.pca, col.ind= df$Group, addEllipses = T,geom = ("point"))

参考文献

1. 宋丽,刘颖,马艳军.用计量风格学方法考察《水浒传》的作者争议问题——以罗贯中《平妖传》为参照[J].中文信息学报，2022，36(08):163-174.

2. 孙萌,刘晓芳.语料库文体学视阈下日本近现代文学的异质性特征研究——以太宰治《人间失格》为例[J].解放军外国语学院学报，2022，45(04):152-159.

3. 虞晓芬,傅玳.多指标综合评价方法综述[J].统计与决策,2004,(11):119-121.

趁着清明节前，前往东湖樱园
骑着单车上磨山，时隔两年再次赏樱
偶遇民宿庭院中举办婚礼
樱园之中，白色败了，红色便粉墨登场
跟着人群漫步在景区之中置身花的海洋
一个一个温馨的故事就在我身旁点滴发生

/* audio */
    .audio-player {
      width: 340px;
      background-color: #94ec69;
      border-radius: 6px;
      padding: 15px 14px;
      display: flex;
      align-items: center;
      position: relative;
      margin: 20px auto;
      cursor: pointer;
    }

    .audio-player::before {
      content: '';
      position: absolute;
      left: -10px;
      top: 40%;
      transform: rotateY(180deg);
      width: 0;
      height: 0;
      border-left: 10px solid #94ec69;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .audio-icon img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .audio-time {
      color: #121212;
      font-size: 15px;
      margin-right: 15px;
      letter-spacing: 1.5px;
    }

    .audio-text-btn {
      font-size: 20px;
      color: white;
      cursor: pointer;
      margin-left: auto;
    }

    .audio-text-btn:hover {
      opacity: 0.7;
    }
/* audio */

 <!-- Audio -->
  <div id="audioPlayer" class="audio-player">
    <div class="audio-icon">
      <img id="audioIcon" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0yNi4wMTYgMTUuODA4YzAgNS40NzItMi4yNCAxMC40LTUuODg4IDE0LjAxNmwtMS43Ni0xLjc2YzMuMTA0LTMuMTY4IDUuMDI0LTcuNDg4IDUuMDI0LTEyLjI1NnMtMS45Mi05LjA4OC01LjAyNC0xMi4yNTZsMS43Ni0xLjc2YzMuNjQ4IDMuNTg0IDUuODg4IDguNTQ0IDUuODg4IDE0LjAxNnpNMTkuMDA4IDE1LjgwOGMwIDMuNTUyLTEuNDcyIDYuNzg0LTMuODA4IDkuMDg4bC0xLjc5Mi0xLjc2YzEuODU2LTEuODg4IDMuMDA4LTQuNDggMy4wMDgtNy4zMjhzLTEuMTUyLTUuNDQtMy4wMDgtNy4zMjhsMS43OTItMS43NmMyLjMzNiAyLjMwNCAzLjgwOCA1LjUzNiAzLjgwOCA5LjA4OHpNMTAuMjQgMTEuNjE2YzEuMDg4IDEuMDU2IDEuNzYgMi41NiAxLjc2IDQuMTkycy0wLjY3MiAzLjEzNi0xLjc2IDQuMTkybC00LjIyNC00LjE5MnoiPjwvcGF0aD48L3N2Zz4="
        alt="播放图标" />
    </div>
    <div id="audioTime" class="audio-time">2'20"</div>
  </div>
  <!--<div class="audio-text-btn">&#127910;</div>
  </div>-->

  <script>
    // 音频
    const audio = new Audio('https://ws.stream.qqmusic.qq.com/C400002FoKdh2I9Tcl.m4a?guid=949217398&vkey=6D8ECFFEE73E2907C1F32699F05AED68F1E850419696AEEFC38F0A802C41E70E27125CC701CAFC6914B46813C59769471ED037483EDF9951__v2b94c1bd&uin=&fromtag=120032'); 
    const audioPlayer = document.getElementById('audioPlayer');
    const audioIcon = document.getElementById('audioIcon');

    let isPlaying = false;

    audioPlayer.addEventListener('click', () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        audioIcon.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0yNi4wMTYgMTUuODA4YzAgNS40NzItMi4yNCAxMC40LTUuODg4IDE0LjAxNmwtMS43Ni0xLjc2YzMuMTA0LTMuMTY4IDUuMDI0LTcuNDg4IDUuMDI0LTEyLjI1NnMtMS45Mi05LjA4OC01LjAyNC0xMi4yNTZsMS43Ni0xLjc2YzMuNjQ4IDMuNTg0IDUuODg4IDguNTQ0IDUuODg4IDE0LjAxNnpNMTkuMDA4IDE1LjgwOGMwIDMuNTUyLTEuNDcyIDYuNzg0LTMuODA4IDkuMDg4bC0xLjc5Mi0xLjc2YzEuODU2LTEuODg4IDMuMDA4LTQuNDggMy4wMDgtNy4zMjhzLTEuMTUyLTUuNDQtMy4wMDgtNy4zMjhsMS43OTItMS43NmMyLjMzNiAyLjMwNCAzLjgwOCA1LjUzNiAzLjgwOCA5LjA4OHpNMTAuMjQgMTEuNjE2YzEuMDg4IDEuMDU2IDEuNzYgMi41NiAxLjc2IDQuMTkycy0wLjY3MiAzLjEzNi0xLjc2IDQuMTkybC00LjIyNC00LjE5MnoiPjwvcGF0aD48L3N2Zz4=";
      } else {
        audio.play();
        isPlaying = true;
        audioIcon.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xMC4yNCAxMS42MTZsLTQuMjI0IDQuMTkyIDQuMjI0IDQuMTkyYzEuMDg4LTEuMDU2IDEuNzYtMi41NiAxLjc2LTQuMTkycy0wLjY3Mi0zLjEzNi0xLjc2LTQuMTkyeiI+PC9wYXRoPjxwYXRoIGQ9Ik0xNS4xOTkgNi43MjFsLTEuNzkxIDEuNzZjMS44NTYgMS44ODggMy4wMDggNC40OCAzLjAwOCA3LjMyOHMtMS4xNTIgNS40NC0zLjAwOCA3LjMyOGwxLjc5MSAxLjc2YzIuMzM2LTIuMzA0IDMuODA5LTUuNTM2IDMuODA5LTkuMDg4cy0xLjQ3My02Ljc4NC0zLjgwOS05LjA4OHoiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMDswOzE7MSIgYmVnaW49IjAiIGR1cj0iMSIga2V5VGltZXM9IjA7LjMzMzsuMzM0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjxwYXRoIGQ9Ik0yMC4xMjkgMS43OTNsLTEuNzYyIDEuNzZjMy4xMDQgMy4xNjggNS4wMjUgNy40ODggNS4wMjUgMTIuMjU2cy0xLjkyMSA5LjA4OC01LjAyNSAxMi4yNTZsMS43NjIgMS43NmMzLjY0OC0zLjYxNiA1Ljg4Ny04LjU0NCA1Ljg4Ny0xNC4wMTZzLTIuMjM5LTEwLjQzMi01Ljg4Ny0xNC4wMTZ6Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjA7MDsxOzEiIGJlZ2luPSIwIiBkdXI9IjEiIGtleVRpbWVzPSIwOy42NjY7LjY2NzsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvcGF0aD48L3N2Zz4=";
      }
    });

    audio.addEventListener("ended", () => {
      isPlaying = false;
      audioIcon.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0yNi4wMTYgMTUuODA4YzAgNS40NzItMi4yNCAxMC40LTUuODg4IDE0LjAxNmwtMS43Ni0xLjc2YzMuMTA0LTMuMTY4IDUuMDI0LTcuNDg4IDUuMDI0LTEyLjI1NnMtMS45Mi05LjA4OC01LjAyNC0xMi4yNTZsMS43Ni0xLjc2YzMuNjQ4IDMuNTg0IDUuODg4IDguNTQ0IDUuODg4IDE0LjAxNnpNMTkuMDA4IDE1LjgwOGMwIDMuNTUyLTEuNDcyIDYuNzg0LTMuODA4IDkuMDg4bC0xLjc5Mi0xLjc2YzEuODU2LTEuODg4IDMuMDA4LTQuNDggMy4wMDgtNy4zMjhzLTEuMTUyLTUuNDQtMy4wMDgtNy4zMjhsMS43OTItMS43NmMyLjMzNiAyLjMwNCAzLjgwOCA1LjUzNiAzLjgwOCA5LjA4OHpNMTAuMjQgMTEuNjE2YzEuMDg4IDEuMDU2IDEuNzYgMi41NiAxLjc2IDQuMTkycy0wLjY3MiAzLjEzNi0xLjc2IDQuMTkybC00LjIyNC00LjE5MnoiPjwvcGF0aD48L3N2Zz4=";
    });

    document.querySelector('.audio-text-btn').addEventListener('click', () => {
      alert('测试');
    });
  </script>

示例：

2'20"

你好，这是一个从左上角到右下角的弹窗效果！点击图标后弹出。你好，这是一个从左上角到右下角的弹窗效果！点击图标后弹出。你好，这是一个从左上角到右下角的弹窗效果！点击图标后弹出。

1

2

3

4

4

5

5

5

56

6

1233333

12134