wechat-md-publisher 0.3.5 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
# Sport 主题 - !important 使用指南
|
|
2
|
+
|
|
3
|
+
## 当前状态
|
|
4
|
+
|
|
5
|
+
✅ **sport.css 已被正确加载到主题系统**
|
|
6
|
+
|
|
7
|
+
测试确认：
|
|
8
|
+
```bash
|
|
9
|
+
cd /Users/siping/Documents/AI/2026/wechat/wechat-md-publisher
|
|
10
|
+
node test-theme-load.js
|
|
11
|
+
# 输出: [sport] 运动风: 活力 · 动感 · 渐变色，适合体育和科技内容
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## !important 使用分析
|
|
15
|
+
|
|
16
|
+
### 1. 当前状况
|
|
17
|
+
- ❌ sport.css **没有使用** !important
|
|
18
|
+
- ✅ 所有其他主题也**不使用** !important
|
|
19
|
+
- ⚠️ 唯一例外：默认主题中 `table { display: inline-block !important; }`
|
|
20
|
+
|
|
21
|
+
### 2. 什么时候需要 !important？
|
|
22
|
+
|
|
23
|
+
#### 场景 A：微信编辑器有强制样式（需要）
|
|
24
|
+
```css
|
|
25
|
+
/* 如果微信编辑器强制设置了段落边距 */
|
|
26
|
+
#wenyan p {
|
|
27
|
+
margin: 0.8em 0 !important; /* 确保覆盖微信默认样式 */
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
#### 场景 B：继承样式被覆盖（需要）
|
|
32
|
+
```css
|
|
33
|
+
/* 表格默认 display 容易被重置 */
|
|
34
|
+
#wenyan table {
|
|
35
|
+
display: table !important;
|
|
36
|
+
border-collapse: collapse !important;
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
#### 场景 C：颜色主题不生效（可能需要）
|
|
41
|
+
```css
|
|
42
|
+
/* 如果加粗颜色不显示 */
|
|
43
|
+
#wenyan strong {
|
|
44
|
+
color: #00A968 !important;
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
#### 场景 D：布局属性（推荐使用）
|
|
49
|
+
```css
|
|
50
|
+
#wenyan {
|
|
51
|
+
max-width: 680px !important;
|
|
52
|
+
margin: 0 auto !important;
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 3. 哪些属性通常不需要 !important？
|
|
57
|
+
|
|
58
|
+
- `font-size` - 内联样式优先级已经很高
|
|
59
|
+
- `background-color` - 单色背景通常能正常应用
|
|
60
|
+
- `padding` - 内边距较少被覆盖
|
|
61
|
+
- `border` - 边框样式稳定
|
|
62
|
+
|
|
63
|
+
### 4. 建议的 !important 策略
|
|
64
|
+
|
|
65
|
+
#### 方案 A：最小化使用（推荐）
|
|
66
|
+
只在实测不生效时添加：
|
|
67
|
+
```css
|
|
68
|
+
/* 只给真正有问题的属性加 */
|
|
69
|
+
#wenyan p {
|
|
70
|
+
margin: 0.8em 0 !important; /* 微信经常重置 margin */
|
|
71
|
+
}
|
|
72
|
+
#wenyan table {
|
|
73
|
+
display: table !important; /* display 容易被覆盖 */
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
#### 方案 B：保守使用
|
|
78
|
+
给容易被覆盖的属性加：
|
|
79
|
+
```css
|
|
80
|
+
/* margin、padding、display、color 等 */
|
|
81
|
+
#wenyan h1 {
|
|
82
|
+
color: #ffffff !important;
|
|
83
|
+
background-color: #00A968 !important;
|
|
84
|
+
margin: 2.2em 0 1.2em !important;
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
#### 方案 C：全面使用（不推荐）
|
|
89
|
+
所有关键样式都加 !important：
|
|
90
|
+
- ❌ CSS 文件会变得臃肿
|
|
91
|
+
- ❌ 难以调试和覆盖
|
|
92
|
+
- ❌ 违反 CSS 最佳实践
|
|
93
|
+
|
|
94
|
+
## 测试流程
|
|
95
|
+
|
|
96
|
+
### Step 1: 使用当前版本测试
|
|
97
|
+
```bash
|
|
98
|
+
cd /Users/siping/Documents/AI/2026/wechat/wechat-md-publisher
|
|
99
|
+
pnpm build
|
|
100
|
+
|
|
101
|
+
# 创建测试文章
|
|
102
|
+
wmp draft create test-sport-theme.md --theme sport
|
|
103
|
+
|
|
104
|
+
# 在微信编辑器中检查效果
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Step 2: 记录不生效的样式
|
|
108
|
+
在微信公众号编辑器中：
|
|
109
|
+
1. 粘贴生成的 HTML
|
|
110
|
+
2. 用浏览器开发者工具检查元素
|
|
111
|
+
3. 查看哪些样式被覆盖了
|
|
112
|
+
|
|
113
|
+
示例：
|
|
114
|
+
```
|
|
115
|
+
元素: h1
|
|
116
|
+
预期: background-color: #00A968
|
|
117
|
+
实际: background-color: transparent ← 被微信默认样式覆盖
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Step 3: 针对性添加 !important
|
|
121
|
+
只给不生效的样式添加：
|
|
122
|
+
```css
|
|
123
|
+
#wenyan h1 {
|
|
124
|
+
background-color: #00A968 !important; /* 添加这个 */
|
|
125
|
+
color: #ffffff !important; /* 添加这个 */
|
|
126
|
+
/* 其他样式保持不变 */
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Step 4: 重新测试
|
|
131
|
+
```bash
|
|
132
|
+
pnpm build
|
|
133
|
+
wmp draft create test-sport-theme.md --theme sport
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## 常见问题排查
|
|
137
|
+
|
|
138
|
+
### Q1: 主题列表中看不到 sport？
|
|
139
|
+
**原因**: 未重新构建
|
|
140
|
+
**解决**:
|
|
141
|
+
```bash
|
|
142
|
+
pnpm build
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Q2: 样式完全不生效？
|
|
146
|
+
**原因**: 可能是微信编辑器清除了内联样式
|
|
147
|
+
**解决**:
|
|
148
|
+
1. 检查生成的 HTML 是否包含 `style` 属性
|
|
149
|
+
2. 尝试使用 `--no-clean` 选项（如果有）
|
|
150
|
+
3. 确认使用的是 `isWechat: true` 模式
|
|
151
|
+
|
|
152
|
+
### Q3: 颜色不显示？
|
|
153
|
+
**原因**: 微信可能限制某些颜色格式
|
|
154
|
+
**解决**:
|
|
155
|
+
```css
|
|
156
|
+
/* 使用 RGB 而不是 HEX */
|
|
157
|
+
color: rgb(0, 169, 104) !important;
|
|
158
|
+
/* 而不是 */
|
|
159
|
+
color: #00A968 !important;
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Q4: 部分样式生效，部分不生效？
|
|
163
|
+
**原因**: 样式优先级问题
|
|
164
|
+
**解决**:
|
|
165
|
+
1. 检查是否有更具体的选择器覆盖
|
|
166
|
+
2. 给不生效的属性加 !important
|
|
167
|
+
3. 确认样式是否真的转换成了内联样式
|
|
168
|
+
|
|
169
|
+
## 推荐的增强方案
|
|
170
|
+
|
|
171
|
+
基于微信公众号的实际情况，建议给以下属性添加 !important：
|
|
172
|
+
|
|
173
|
+
```css
|
|
174
|
+
/* 1. 布局相关（必加） */
|
|
175
|
+
#wenyan {
|
|
176
|
+
max-width: 680px !important;
|
|
177
|
+
margin: 0 auto !important;
|
|
178
|
+
line-height: 1.8 !important;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* 2. 间距相关（推荐） */
|
|
182
|
+
#wenyan h1,
|
|
183
|
+
#wenyan h2,
|
|
184
|
+
#wenyan h3 {
|
|
185
|
+
margin: 1.5em 0 1em !important;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* 3. 表格 display（必加） */
|
|
189
|
+
#wenyan table {
|
|
190
|
+
display: table !important;
|
|
191
|
+
border-collapse: collapse !important;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* 4. 主题色（按需） */
|
|
195
|
+
#wenyan h1 {
|
|
196
|
+
background-color: #00A968 !important;
|
|
197
|
+
color: #ffffff !important;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* 5. 其他样式保持不变 */
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## 总结
|
|
204
|
+
|
|
205
|
+
1. **sport 主题已正确加载** ✅
|
|
206
|
+
2. **默认不使用 !important** - 符合最佳实践
|
|
207
|
+
3. **建议先测试** - 看哪些样式不生效
|
|
208
|
+
4. **按需添加** - 只给有问题的属性加 !important
|
|
209
|
+
5. **重新构建** - 每次修改 CSS 后必须 `pnpm build`
|
|
210
|
+
|
|
211
|
+
如果需要创建一个带 !important 的增强版本，请告诉我哪些样式在实际测试中不生效，我会帮你针对性地添加。
|
package/themes/builtin/sport.css
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
/* Sports Theme -
|
|
2
|
-
*
|
|
1
|
+
/* Sports Theme - WeChat Compatible Version
|
|
2
|
+
* 运动风主题 - 微信公众号兼容版
|
|
3
|
+
* 特点：活力 · 动感 · 简洁
|
|
3
4
|
* 主色调：#00A968 (翠绿色)
|
|
5
|
+
*
|
|
6
|
+
* 说明：
|
|
7
|
+
* 1. 移除了所有渐变效果，改用纯色
|
|
8
|
+
* 2. 移除了阴影效果
|
|
9
|
+
* 3. 简化了圆角效果
|
|
10
|
+
* 4. 移除了伪元素，列表样式需在 HTML 层面处理
|
|
11
|
+
* 5. 移除了交互效果（hover、transition）
|
|
12
|
+
* 6. 所有样式需转换为内联样式（inline style）才能在微信中生效
|
|
4
13
|
*/
|
|
5
14
|
|
|
6
15
|
#wenyan {
|
|
@@ -14,7 +23,7 @@
|
|
|
14
23
|
letter-spacing: 0.02em;
|
|
15
24
|
}
|
|
16
25
|
|
|
17
|
-
/* 一级标题 -
|
|
26
|
+
/* 一级标题 - 纯色背景替代渐变 */
|
|
18
27
|
#wenyan h1 {
|
|
19
28
|
padding: 0.6em 1.5em;
|
|
20
29
|
margin: 2.2em 0 1.2em;
|
|
@@ -24,13 +33,11 @@
|
|
|
24
33
|
text-align: center;
|
|
25
34
|
letter-spacing: 0.12em;
|
|
26
35
|
line-height: 1.4;
|
|
27
|
-
background:
|
|
28
|
-
border-radius:
|
|
29
|
-
box-shadow: 0 8px 20px rgba(0, 169, 104, 0.3);
|
|
30
|
-
text-transform: uppercase;
|
|
36
|
+
background-color: #00A968;
|
|
37
|
+
border-radius: 8px;
|
|
31
38
|
}
|
|
32
39
|
|
|
33
|
-
/* 二级标题 -
|
|
40
|
+
/* 二级标题 - 左边框样式 */
|
|
34
41
|
#wenyan h2 {
|
|
35
42
|
padding: 0.4em 1em 0.5em 1em;
|
|
36
43
|
margin: 1.6em 0 0.8em;
|
|
@@ -40,11 +47,9 @@
|
|
|
40
47
|
letter-spacing: 0.06em;
|
|
41
48
|
line-height: 1.4;
|
|
42
49
|
color: #00A968;
|
|
43
|
-
background:
|
|
50
|
+
background-color: #f0faf5;
|
|
44
51
|
border-left: 4px solid #00A968;
|
|
45
|
-
border-radius: 0
|
|
46
|
-
box-shadow: 0 3px 8px rgba(0, 169, 104, 0.12);
|
|
47
|
-
text-transform: uppercase;
|
|
52
|
+
border-radius: 0 8px 8px 0;
|
|
48
53
|
}
|
|
49
54
|
|
|
50
55
|
/* 三级标题 - 简化版二级标题 */
|
|
@@ -57,24 +62,21 @@
|
|
|
57
62
|
text-align: left;
|
|
58
63
|
letter-spacing: 0.08em;
|
|
59
64
|
border-left: 4px solid #00A968;
|
|
60
|
-
background:
|
|
61
|
-
border-radius: 0
|
|
65
|
+
background-color: #f8f8f8;
|
|
66
|
+
border-radius: 0 8px 8px 0;
|
|
62
67
|
}
|
|
63
68
|
|
|
64
69
|
/* 段落 */
|
|
65
70
|
#wenyan p {
|
|
66
|
-
margin: 0 !important;
|
|
71
|
+
margin: 0.8em 0 !important;
|
|
67
72
|
text-align: left !important;
|
|
68
73
|
line-height: 1.8 !important;
|
|
69
74
|
}
|
|
70
75
|
|
|
71
|
-
/* 加粗 -
|
|
76
|
+
/* 加粗 - 使用纯色替代渐变 */
|
|
72
77
|
#wenyan strong {
|
|
73
78
|
font-weight: 700;
|
|
74
|
-
|
|
75
|
-
-webkit-background-clip: text;
|
|
76
|
-
-webkit-text-fill-color: transparent;
|
|
77
|
-
background-clip: text;
|
|
79
|
+
color: #00A968;
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
/* 斜体 */
|
|
@@ -88,10 +90,10 @@
|
|
|
88
90
|
#wenyan code {
|
|
89
91
|
font-size: 90%;
|
|
90
92
|
color: #00A968;
|
|
91
|
-
background:
|
|
93
|
+
background-color: #f0faf5;
|
|
92
94
|
padding: 3px 6px;
|
|
93
95
|
border-radius: 4px;
|
|
94
|
-
font-family:
|
|
96
|
+
font-family: Menlo, Consolas, monospace;
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
/* 代码块 */
|
|
@@ -102,14 +104,17 @@
|
|
|
102
104
|
padding: 1.2em;
|
|
103
105
|
line-height: 1.6;
|
|
104
106
|
margin: 1.5em 0;
|
|
105
|
-
background:
|
|
106
|
-
|
|
107
|
+
background-color: #f8f8f8;
|
|
108
|
+
border-top: 3px solid #00A968;
|
|
109
|
+
border-left: 1px solid #e0e0e0;
|
|
110
|
+
border-right: 1px solid #e0e0e0;
|
|
111
|
+
border-bottom: 1px solid #e0e0e0;
|
|
107
112
|
}
|
|
108
113
|
|
|
109
114
|
#wenyan pre code {
|
|
110
|
-
background:
|
|
115
|
+
background-color: transparent;
|
|
111
116
|
padding: 0;
|
|
112
|
-
font-family:
|
|
117
|
+
font-family: Menlo, Consolas, monospace;
|
|
113
118
|
font-size: 14px;
|
|
114
119
|
color: #2c2c2c;
|
|
115
120
|
line-height: 1.6;
|
|
@@ -121,7 +126,7 @@
|
|
|
121
126
|
padding: 1.2em 1.5em;
|
|
122
127
|
border-left: 5px solid #00A968;
|
|
123
128
|
color: #3c3c3e;
|
|
124
|
-
background: #f8f8f8;
|
|
129
|
+
background-color: #f8f8f8;
|
|
125
130
|
border-radius: 0 8px 8px 0;
|
|
126
131
|
margin: 1.8em 0;
|
|
127
132
|
}
|
|
@@ -132,59 +137,44 @@
|
|
|
132
137
|
line-height: 1.8;
|
|
133
138
|
}
|
|
134
139
|
|
|
135
|
-
/* 无序列表
|
|
140
|
+
/* 无序列表
|
|
141
|
+
* 注意：微信不支持 ::before 伪元素
|
|
142
|
+
* 建议在 HTML 生成时直接添加 "• " 符号
|
|
143
|
+
*/
|
|
136
144
|
#wenyan ul {
|
|
137
|
-
list-style: none;
|
|
138
|
-
padding: 0;
|
|
145
|
+
list-style-type: none;
|
|
146
|
+
padding-left: 0;
|
|
139
147
|
margin: 1.5em 0;
|
|
140
148
|
}
|
|
141
149
|
|
|
142
150
|
#wenyan ul li {
|
|
143
151
|
margin: 0.6em 0;
|
|
144
|
-
padding:
|
|
152
|
+
padding-left: 1.5em;
|
|
145
153
|
line-height: 1.8;
|
|
146
154
|
}
|
|
147
155
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
margin-right: 0.5em;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
/* 有序列表 */
|
|
156
|
+
/* 有序列表
|
|
157
|
+
* 注意：微信不支持 counter-reset 和 ::before
|
|
158
|
+
* 建议使用默认列表样式或在 HTML 生成时添加序号
|
|
159
|
+
*/
|
|
156
160
|
#wenyan ol {
|
|
157
|
-
list-style:
|
|
158
|
-
|
|
161
|
+
list-style-type: decimal;
|
|
162
|
+
list-style-position: outside;
|
|
163
|
+
padding-left: 2em;
|
|
159
164
|
margin: 1.5em 0;
|
|
160
|
-
counter-reset: list-counter;
|
|
161
165
|
}
|
|
162
166
|
|
|
163
167
|
#wenyan ol li {
|
|
164
168
|
margin: 0.6em 0;
|
|
165
|
-
padding: 0;
|
|
169
|
+
padding-left: 0.5em;
|
|
166
170
|
line-height: 1.8;
|
|
167
|
-
counter-increment: list-counter;
|
|
168
171
|
}
|
|
169
172
|
|
|
170
|
-
|
|
171
|
-
content: counter(list-counter) ". ";
|
|
172
|
-
color: #00A968;
|
|
173
|
-
font-weight: bold;
|
|
174
|
-
margin-right: 0.5em;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
/* 链接 */
|
|
173
|
+
/* 链接 - 移除 hover 效果 */
|
|
178
174
|
#wenyan a {
|
|
179
175
|
color: #00A968;
|
|
180
176
|
text-decoration: none;
|
|
181
177
|
border-bottom: 1px solid #00A968;
|
|
182
|
-
transition: all 0.3s ease;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
#wenyan a:hover {
|
|
186
|
-
color: #008A56;
|
|
187
|
-
border-bottom-color: #008A56;
|
|
188
178
|
}
|
|
189
179
|
|
|
190
180
|
/* 图片 */
|
|
@@ -193,7 +183,7 @@
|
|
|
193
183
|
height: auto;
|
|
194
184
|
border-radius: 8px;
|
|
195
185
|
margin: 1.5em 0;
|
|
196
|
-
|
|
186
|
+
border: 1px solid #e0e0e0;
|
|
197
187
|
}
|
|
198
188
|
|
|
199
189
|
/* 表格 */
|
|
@@ -201,26 +191,22 @@
|
|
|
201
191
|
width: 100%;
|
|
202
192
|
border-collapse: collapse;
|
|
203
193
|
margin: 1.8em 0;
|
|
204
|
-
border
|
|
205
|
-
overflow: hidden;
|
|
206
|
-
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
207
|
-
border: 2px solid transparent;
|
|
194
|
+
border: 1px solid #e0e0e0;
|
|
208
195
|
}
|
|
209
196
|
|
|
210
197
|
#wenyan table th {
|
|
211
198
|
padding: 12px 16px;
|
|
212
199
|
text-align: left;
|
|
213
200
|
font-weight: 700;
|
|
214
|
-
background:
|
|
201
|
+
background-color: #f0faf5;
|
|
215
202
|
color: #00A968;
|
|
216
|
-
border-bottom: 2px solid
|
|
217
|
-
text-transform: uppercase;
|
|
203
|
+
border-bottom: 2px solid #00A968;
|
|
218
204
|
letter-spacing: 0.04em;
|
|
219
205
|
}
|
|
220
206
|
|
|
221
207
|
#wenyan table td {
|
|
222
208
|
padding: 10px 16px;
|
|
223
|
-
border-bottom: 1px solid
|
|
209
|
+
border-bottom: 1px solid #e0e0e0;
|
|
224
210
|
color: #2c2c2c;
|
|
225
211
|
}
|
|
226
212
|
|
|
@@ -228,10 +214,10 @@
|
|
|
228
214
|
border-bottom: none;
|
|
229
215
|
}
|
|
230
216
|
|
|
231
|
-
/* 分割线 */
|
|
217
|
+
/* 分割线 - 使用纯色替代渐变 */
|
|
232
218
|
#wenyan hr {
|
|
233
219
|
height: 3px;
|
|
234
220
|
border: none;
|
|
235
221
|
margin: 3em 0;
|
|
236
|
-
background-
|
|
222
|
+
background-color: #00A968;
|
|
237
223
|
}
|