lidf
a777665775
- SKILL.md: 完整设计规范（色彩体系、微信公众号兼容规则、图片排版方案） - scripts/extract_wechat.py: 微信公众号文章抓取脚本 - scripts/build_hundun_html.py: 混沌风格 HTML 生成脚本（组件化） - examples/hundun-lead-article.html: 领教营二期排版示例 - resources/color-palette.md: 混沌品牌色彩参考
222 lines
9.3 KiB
Markdown
222 lines
9.3 KiB
Markdown
---
|
||
name: hundun-wechat-layout
|
||
description: |
|
||
混沌学园风格微信公众号文章 HTML 排版技能。适用于将微信公众号原文章内容（文字+图片）提取后，
|
||
以混沌品牌视觉体系（混沌黄 #F5B700 + 石墨黑 #181818 + 原生白底）重新排版生成可直接粘贴到
|
||
微信公众号编辑器的纯内联 HTML 代码。支持 Hero 大图 + 瀑布流图墙、时间线卡片、模块卡片等组件。
|
||
---
|
||
|
||
# 混沌学园微信公众号 HTML 排版技能
|
||
|
||
## 一、适用场景
|
||
|
||
当用户要求以下操作时，应激活此技能：
|
||
|
||
- 将微信公众号文章重新排版为混沌学园品牌风格
|
||
- 抓取微信公众号文章并生成新的 HTML 排版
|
||
- 制作混沌风格的微信推文 HTML 片段
|
||
- 生成适用于微信公众号编辑器的纯内联样式 HTML
|
||
|
||
## 二、核心设计规范
|
||
|
||
### 2.1 色彩体系
|
||
|
||
| 角色 | 色值 | 用途 |
|
||
|:-----|:-----|:-----|
|
||
| **混沌黄 (Primary)** | `#F5B700` | 标题强调、侧边 Accent 条、标签徽章、CTA 按钮、边框点缀 |
|
||
| **深金 (Secondary)** | `#D99B00` | 正文中的关键词强调（`<strong>` 标签） |
|
||
| **石墨黑 (Dark)** | `#181818` | Hero 顶部看板背景、年份徽章、核心理念卡片、底部 CTA 按钮 |
|
||
| **辅助深色** | `#242424` | 深色卡片内部的子容器背景 |
|
||
| **原生白底** | `#FFFFFF` | 最外层容器，顺应微信公众号默认白底阅读环境 |
|
||
| **极浅灰** | `#F8F9FA` | 常规内容卡片背景（历史年份、报名须知等） |
|
||
| **微黄底** | `#FFFDF5` | 模块卡片背景（亮剑/试锋/决衡等课程模块） |
|
||
| **正文色** | `#2B2B2B` | 主正文颜色 |
|
||
| **辅助正文** | `#333333` | 非卡片区域的段落文字 |
|
||
| **二级正文** | `#4E5969` | 卡片内部说明文字 |
|
||
| **边框灰** | `#E5E6EB` | 浅色卡片边框 |
|
||
| **分割线** | `#D9D9D9` | 虚线分割（报名区域二维码上方） |
|
||
|
||
### 2.2 排版约束（微信公众号铁律）
|
||
|
||
> [!CAUTION]
|
||
> 以下规则**不可违反**，否则将在微信公众号中渲染异常或被过滤。
|
||
|
||
1. **最大宽度**：`max-width: 667px`（微信公众号最大内容宽度）
|
||
2. **移动端内边距**：两侧至少 `4px ~ 8px`，防止内容贴边
|
||
3. **100% 内联样式**：所有 CSS 必须写在 `style="..."` 属性内，**严禁** `<style>` 标签、`<link>` 外链、`class` 选择器
|
||
4. **禁止标签**：`<script>`、`<link>`、`<style>`、`<iframe>`、`<form>`、`<input>`
|
||
5. **允许标签**：`<section>`、`<p>`、`<span>`、`<strong>`、`<em>`、`<h1>`~`<h6>`、`<img>`、`<div>`、`<ul>`/`<ol>`/`<li>`、`<br>`、`<hr>`
|
||
6. **图片防盗链**：所有 `<img>` 标签必须加 `referrerpolicy="no-referrer"`
|
||
7. **字体栈**：`font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;`
|
||
8. **不使用** CSS Grid（兼容性不足），使用 `display: flex` 替代
|
||
|
||
### 2.3 图片排版方案：Hero 大图 + 瀑布流（推荐方案 B）
|
||
|
||
每组图片采用以下结构：
|
||
|
||
1. **首图 Hero Shot**（100% 全宽大图）：
|
||
- 从该组中选取最具视觉冲击力的第一张
|
||
- 圆角 `10px`，轻灰边框 `1px solid #E5E6EB`，微阴影 `box-shadow: 0 4px 12px rgba(0,0,0,0.08)`
|
||
|
||
2. **瀑布流副图（Column-Based Masonry）**：
|
||
- 将剩余图片**交替分配到左右两列独立容器**（奇数索引 → 左列，偶数索引 → 右列）
|
||
- 左右列各自 `width: 48.5%`，顶部对齐 `align-items: flex-start`
|
||
- 列内图片垂直堆叠，仅用 `margin-bottom: 8px` 分隔
|
||
- **关键**：不使用 `flex-wrap` 行内双列（会导致空白），而使用两个独立列容器
|
||
|
||
```html
|
||
<!-- Hero Shot -->
|
||
<section style="margin: 12px 0 10px 0;">
|
||
<img src="..." referrerpolicy="no-referrer"
|
||
style="width: 100%; height: auto; display: block; border-radius: 10px;
|
||
border: 1px solid #E5E6EB; box-shadow: 0 4px 12px rgba(0,0,0,0.08);" />
|
||
</section>
|
||
|
||
<!-- Masonry Sub-grid -->
|
||
<section style="display: flex; justify-content: space-between; align-items: flex-start;
|
||
width: 100%; box-sizing: border-box; margin-bottom: 10px;">
|
||
<!-- 左列 -->
|
||
<section style="width: 48.5%; box-sizing: border-box;">
|
||
<img src="..." referrerpolicy="no-referrer"
|
||
style="width: 100%; height: auto; display: block; border-radius: 6px;
|
||
border: 1px solid #E5E6EB; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||
margin-bottom: 8px;" />
|
||
<!-- 更多左列图片... -->
|
||
</section>
|
||
<!-- 右列 -->
|
||
<section style="width: 48.5%; box-sizing: border-box;">
|
||
<img src="..." referrerpolicy="no-referrer"
|
||
style="width: 100%; height: auto; display: block; border-radius: 6px;
|
||
border: 1px solid #E5E6EB; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||
margin-bottom: 8px;" />
|
||
<!-- 更多右列图片... -->
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
> [!WARNING]
|
||
> 不要使用横向滚动模式（`overflow-x: auto; display: flex;`）来展示多张图片。
|
||
> 在微信公众号中横向滑动体验很差，用户更习惯纵向浏览。
|
||
|
||
## 三、页面结构模板
|
||
|
||
一个完整的混沌风格微信推文 HTML 由以下模块**按顺序**组成：
|
||
|
||
### 3.1 外层容器
|
||
|
||
```html
|
||
<section style="max-width: 667px; margin: 0 auto; box-sizing: border-box;
|
||
background-color: #FFFFFF; color: #2B2B2B;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
|
||
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
padding: 12px 4px;">
|
||
<!-- 所有内容模块放在这里 -->
|
||
</section>
|
||
```
|
||
|
||
### 3.2 Hero 顶部看板（深色反转区域）
|
||
|
||
- 背景 `#181818`，顶部 `4px` 混沌黄边框线
|
||
- 包含：品牌标签（黄底黑字小标签）、标题（白字+黄色关键字）、副标题、Banner 大图
|
||
|
||
### 3.3 引言区块
|
||
|
||
- 浅灰背景 `#F8F9FA`，左侧 `4px` 混沌黄 Accent 条
|
||
- 排版为左侧高亮线 + 正文段落
|
||
|
||
### 3.4 核心理念卡片（深色反转）
|
||
|
||
- 石墨黑背景 `#181818`，内部小卡片 `#242424`
|
||
- 左侧 `3px` 混沌黄 Accent 线
|
||
- 适用于"既要…又要…"式的对仗金句
|
||
|
||
### 3.5 时间线年份卡片
|
||
|
||
- 浅灰背景 `#F8F9FA`，`1px solid #E5E6EB` 边框
|
||
- 年份徽章：黑底黄字 `#181818` 背景 + `#F5B700` 文字
|
||
- 标题 + 正文描述 + Hero 大图 + 瀑布流副图
|
||
|
||
### 3.6 招募要求卡片
|
||
|
||
- 浅灰背景，左侧 `4px` 石墨黑 Accent 线
|
||
- 带 emoji 图标的子标题 + 无序列表
|
||
|
||
### 3.7 课程模块卡片
|
||
|
||
- 微黄背景 `#FFFDF5`，`1px solid #F5B700` 混沌黄边框
|
||
- 日期标签用黄底黑字 `background: #F5B700; color: #181818`
|
||
- 适用于"亮剑/试锋/决衡"等模块名称
|
||
|
||
### 3.8 报名须知卡片
|
||
|
||
- 浅灰背景，信息列表格式
|
||
- 底部虚线分割线 + 居中报名二维码
|
||
- 二维码只出现一次，`border: 2px solid #F5B700`
|
||
|
||
### 3.9 底部 CTA 横幅
|
||
|
||
- 黄色渐变背景 `linear-gradient(135deg, #F5B700 0%, #FFA000 100%)`
|
||
- 深色胶囊按钮（客服微信号），**不重复放二维码**
|
||
|
||
## 四、微信图片抓取与处理工作流
|
||
|
||
### 4.1 抓取流程
|
||
|
||
1. **使用 Python `urllib.request` 抓取原文 HTML**（`read_url_content` 会被微信 anti-bot 拦截）
|
||
2. 设置 User-Agent 为桌面微信：`Mozilla/5.0 ... MicroMessenger/8.0`
|
||
3. 将原始 HTML 保存到本地文件
|
||
4. 使用正则或 BeautifulSoup 提取 `<img>` 标签的 `data-src` 或 `src` 属性
|
||
5. 整理图片索引列表 `[序号] URL`
|
||
|
||
```python
|
||
import urllib.request
|
||
|
||
url = "https://mp.weixin.qq.com/s/..."
|
||
req = urllib.request.Request(url, headers={
|
||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '
|
||
'AppleWebKit/537.36 (KHTML, like Gecko) '
|
||
'Chrome/120.0.0.0 Safari/537.36 '
|
||
'MicroMessenger/8.0.0'
|
||
})
|
||
with urllib.request.urlopen(req) as resp:
|
||
html_content = resp.read().decode('utf-8')
|
||
```
|
||
|
||
### 4.2 图片引用
|
||
|
||
- 微信 CDN 图片域名：`mmbiz.qpic.cn`
|
||
- 所有 `<img>` 标签必须加 `referrerpolicy="no-referrer"` 绕过 Referer 校验
|
||
- 原文图片 URL 可直接在新 HTML 中引用，无需下载到本地
|
||
|
||
### 4.3 图片分组建议
|
||
|
||
按文章内容段落/年份/主题将图片分组，每组：
|
||
- 控制在 3~7 张为宜
|
||
- 第一张选取最具代表性的作为 Hero Shot
|
||
- 每组不超过 6 张副图（`max_sub=6`）
|
||
|
||
## 五、常见错误与排查
|
||
|
||
| 现象 | 原因 | 解决方案 |
|
||
|:-----|:-----|:---------|
|
||
| 图片显示为裂图 ❌ | 缺少 `referrerpolicy="no-referrer"` | 给所有 `<img>` 添加该属性 |
|
||
| 双列图片上下空白大 | 使用了 `flex-wrap` 行内双列 | 改为两个独立列容器 |
|
||
| 样式被微信过滤 | 使用了 `<style>` 标签或 `class` | 全部改为内联 `style="..."` |
|
||
| 排版溢出/横向滚动 | 图片未设 `max-width: 100%` | 图片加 `width: 100%; height: auto;` |
|
||
| 微信抓取返回验证页 | 直接 HTTP 请求被拦截 | 添加 MicroMessenger User-Agent |
|
||
| 二维码重复出现 | 在报名区和底部 CTA 都放了 | 二维码只在报名须知区放一次 |
|
||
|
||
## 六、文件组织
|
||
|
||
```
|
||
skills/hundun-wechat-layout/
|
||
├── SKILL.md # 本文件：技能说明与规范
|
||
├── scripts/
|
||
│ ├── extract_wechat.py # 微信公众号原文抓取脚本
|
||
│ └── build_hundun_html.py # 混沌风格 HTML 生成脚本
|
||
├── examples/
|
||
│ └── hundun-lead-article.html # 示例输出（领教营二期招募文）
|
||
└── resources/
|
||
└── color-palette.md # 混沌色彩体系参考
|
||
```
|