Skip to content

Commit d1346f9

Browse files
newbe36524hagicode-ai
newbe36524
and
hagicode-ai
committed
feat(blog): add Aliyun promotional links to blog ads
Co-Authored-By: Hagicode <noreply@hagicode.com>
1 parent 8c33c48 commit d1346f9

3 files changed

Lines changed: 166 additions & 30 deletions

File tree

‎shared/src/links.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,21 @@ export const GLM_PROMO_LINKS = {
150150
},
151151
} as const;
152152

153+
/**
154+
* 阿里云（Aliyun）推广链接配置
155+
* 用于博客广告区域和其他推广位置
156+
*/
157+
export const ALIYUN_PROMO_LINKS = {
158+
/** 阿里云千问 Coding Plan 订阅链接（带推广码） */
159+
aistar: {
160+
url: 'https://www.aliyun.com/benefit/ai/aistar?userCode=vmx5szbq&clubBiz=subTask..12384055..10263',
161+
label: '立即订阅',
162+
title: '阿里云千问 Coding Plan 上线',
163+
description: '阿里云千问 Coding Plan 已上线，满足开发日常需求。推荐 + Hagicode，完美实现开发过程中的各项需求。',
164+
external: true,
165+
},
166+
} as const;
167+
153168
/**
154169
* 获取 GLM Coding 推广链接
155170
* @returns GLM Coding 推广链接 URL
@@ -158,6 +173,14 @@ export function getGlmCodingUrl(): string {
158173
return GLM_PROMO_LINKS.glmCoding.url;
159174
}
160175

176+
/**
177+
* 获取阿里云千问 Coding Plan 推广链接
178+
* @returns 阿里云千问 Coding Plan 推广链接 URL
179+
*/
180+
export function getAliyunPromoUrl(): string {
181+
return ALIYUN_PROMO_LINKS.aistar.url;
182+
}
183+
161184
/**
162185
* 获取 Docker Compose 指南链接（带 base 路径）
163186
* @returns Docker Compose 指南完整 URL

‎src/components/BlogFooterAd.astro‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* 博客文章结尾广告组件
44
* 在博客文章正文之后显示扩展的链接列表区域
55
*/
6-
import { GLM_PROMO_LINKS, getLink } from '@shared/links';
6+
import { GLM_PROMO_LINKS, ALIYUN_PROMO_LINKS, getLink } from '@shared/links';
77
88
interface Props {
99
/** 是否隐藏广告 */
@@ -18,6 +18,7 @@ if (hideAd) {
1818
}
1919
2020
const { glmCoding, dockerComposeGuide } = GLM_PROMO_LINKS;
21+
const { aistar } = ALIYUN_PROMO_LINKS;
2122
---
2223

2324
<div class="blog-footer-ad">
@@ -30,6 +31,28 @@ const { glmCoding, dockerComposeGuide } = GLM_PROMO_LINKS;
3031
</div>
3132

3233
<div class="ad-links">
34+
<!-- 阿里云千问 Coding Plan 推广链接 -->
35+
<div class="ad-link-item ali-cloud-promo">
36+
<div class="link-info">
37+
<div class="link-title">{aistar.title}</div>
38+
<div class="link-desc">{aistar.description}</div>
39+
</div>
40+
<a
41+
href={aistar.url}
42+
target="_blank"
43+
rel="noopener noreferrer"
44+
class="link-button"
45+
aria-label={`访问${aistar.title}页面`}
46+
>
47+
{aistar.label}
48+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
49+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
50+
<polyline points="15 3 21 3 21 9"/>
51+
<line x1="10" y1="14" x2="21" y2="3"/>
52+
</svg>
53+
</a>
54+
</div>
55+
3356
<!-- GLM Coding 推广链接 -->
3457
<div class="ad-link-item">
3558
<div class="link-info">
@@ -42,6 +65,7 @@ const { glmCoding, dockerComposeGuide } = GLM_PROMO_LINKS;
4265
target="_blank"
4366
rel="noopener noreferrer"
4467
class="link-button"
68+
aria-label={`访问智谱 GLM Coding 页面`}
4569
>
4670
{glmCoding.label}
4771
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -62,6 +86,7 @@ const { glmCoding, dockerComposeGuide } = GLM_PROMO_LINKS;
6286
<a
6387
href={dockerComposeGuide.url}
6488
class="link-button link-button--secondary"
89+
aria-label={`访问${dockerComposeGuide.title}页面`}
6590
>
6691
{dockerComposeGuide.label}
6792
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -115,10 +140,19 @@ const { glmCoding, dockerComposeGuide } = GLM_PROMO_LINKS;
115140
transition: border-color 0.2s ease;
116141
}
117142

143+
.ali-cloud-promo {
144+
border-left: 3px solid #FF6B00;
145+
background: linear-gradient(to right, color-mix(in srgb, #FF6B00 5%, transparent), transparent);
146+
}
147+
118148
.ad-link-item:hover {
119149
border-color: color-mix(in srgb, var(--color-primary) 30%, var(--sl-color-gray-5));
120150
}
121151

152+
.ali-cloud-promo:hover {
153+
border-color: color-mix(in srgb, #FF6B00 50%, var(--sl-color-gray-5));
154+
}
155+
122156
.link-info {
123157
flex: 1;
124158
min-width: 0;
@@ -165,6 +199,10 @@ const { glmCoding, dockerComposeGuide } = GLM_PROMO_LINKS;
165199
transition: transform 0.2s ease, box-shadow 0.2s ease;
166200
}
167201

202+
.ali-cloud-promo .link-button {
203+
background: linear-gradient(135deg, #FF6B00, #FF8C42);
204+
}
205+
168206
.link-button--secondary {
169207
background: var(--sl-color-gray-4);
170208
color: var(--sl-color-text-high);
@@ -175,6 +213,10 @@ const { glmCoding, dockerComposeGuide } = GLM_PROMO_LINKS;
175213
box-shadow: 0 2px 8px rgba(0, 128, 255, 0.2);
176214
}
177215

216+
.ali-cloud-promo .link-button:hover {
217+
box-shadow: 0 2px 8px rgba(255, 107, 0, 0.2);
218+
}
219+
178220
.link-button--secondary:hover {
179221
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
180222
}

‎src/components/BlogHeaderAd.astro‎

Lines changed: 100 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
/**
33
* 博客文章开头广告组件
4-
* 在博客文章标题之后、正文之前显示 GLM 推广卡片
4+
* 在博客文章标题之后、正文之前显示 GLM 和阿里云推广卡片
55
*/
6-
import { GLM_PROMO_LINKS } from '@shared/links';
6+
import { GLM_PROMO_LINKS, ALIYUN_PROMO_LINKS } from '@shared/links';
77
88
interface Props {
99
/** 是否隐藏广告 */
@@ -18,47 +18,90 @@ if (hideAd) {
1818
}
1919
2020
const { glmCoding } = GLM_PROMO_LINKS;
21+
const { aistar } = ALIYUN_PROMO_LINKS;
2122
---
2223

23-
<div class="blog-header-ad">
24-
<div class="ad-icon">
25-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
26-
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
27-
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
28-
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
29-
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
30-
</svg>
24+
<div class="blog-header-ad-container">
25+
<!-- GLM 推广卡片 -->
26+
<div class="blog-header-ad">
27+
<div class="ad-icon">
28+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
29+
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
30+
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
31+
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
32+
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
33+
</svg>
34+
</div>
35+
<div class="ad-content">
36+
<div class="ad-title">
37+
速来拼好模，智谱 GLM Coding 超值订阅
38+
<span class="ad-emphasis">（本项目同样使用智谱 AI 开发）</span>
39+
</div>
40+
<div class="ad-description">
41+
{glmCoding.description}立即开拼，享限时惊喜价！
42+
</div>
43+
</div>
44+
<a
45+
href={glmCoding.url}
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
class="ad-button"
49+
>
50+
{glmCoding.label}
51+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
52+
<path d="M5 12h14"/>
53+
<path d="m12 5 7 7-7 7"/>
54+
</svg>
55+
</a>
3156
</div>
32-
<div class="ad-content">
33-
<div class="ad-title">
34-
速来拼好模，智谱 GLM Coding 超值订阅
35-
<span class="ad-emphasis">（本项目同样使用智谱 AI 开发）</span>
57+
58+
<!-- 阿里云推广卡片 -->
59+
<div class="blog-header-ad ali-cloud-ad">
60+
<div class="ad-icon ali-cloud-icon">
61+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
62+
<path d="M12 2v20"/>
63+
<path d="M2 12h20"/>
64+
<path d="m8 8 8 8"/>
65+
<path d="m16 8-8 8"/>
66+
</svg>
3667
</div>
37-
<div class="ad-description">
38-
{glmCoding.description}立即开拼，享限时惊喜价！
68+
<div class="ad-content">
69+
<div class="ad-title">
70+
🚀 阿里云千问 Coding Plan 上线
71+
<span class="ad-emphasis">推荐 + Hagicode，完美实现开发过程中的各项需求</span>
72+
</div>
73+
<div class="ad-description">
74+
{aistar.description}
75+
</div>
3976
</div>
77+
<a
78+
href={aistar.url}
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
class="ad-button ali-cloud-button"
82+
>
83+
{aistar.label}
84+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
85+
<path d="M5 12h14"/>
86+
<path d="m12 5 7 7-7 7"/>
87+
</svg>
88+
</a>
4089
</div>
41-
<a
42-
href={glmCoding.url}
43-
target="_blank"
44-
rel="noopener noreferrer"
45-
class="ad-button"
46-
>
47-
{glmCoding.label}
48-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
49-
<path d="M5 12h14"/>
50-
<path d="m12 5 7 7-7 7"/>
51-
</svg>
52-
</a>
5390
</div>
5491

5592
<style>
93+
.blog-header-ad-container {
94+
display: flex;
95+
flex-direction: column;
96+
gap: 1rem;
97+
margin-block-end: 1.5rem;
98+
}
99+
56100
.blog-header-ad {
57101
display: flex;
58102
align-items: flex-start;
59103
gap: 1rem;
60104
padding: 1rem;
61-
margin-block-end: 1.5rem;
62105
border-radius: var(--sl-radius-md);
63106
background: linear-gradient(135deg,
64107
color-mix(in srgb, var(--color-primary) 8%, transparent),
@@ -67,6 +110,14 @@ const { glmCoding } = GLM_PROMO_LINKS;
67110
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--sl-color-gray-5));
68111
}
69112

113+
.ali-cloud-ad {
114+
background: linear-gradient(135deg,
115+
color-mix(in srgb, #FF6B00 8%, transparent),
116+
color-mix(in srgb, #FF8C42 5%, transparent)
117+
);
118+
border: 1px solid color-mix(in srgb, #FF6B00 20%, var(--sl-color-gray-5));
119+
}
120+
70121
.ad-icon {
71122
flex-shrink: 0;
72123
display: flex;
@@ -79,6 +130,10 @@ const { glmCoding } = GLM_PROMO_LINKS;
79130
color: white;
80131
}
81132

133+
.ali-cloud-icon {
134+
background: linear-gradient(135deg, #FF6B00, #FF8C42);
135+
}
136+
82137
.ad-content {
83138
flex: 1;
84139
min-width: 0;
@@ -101,6 +156,10 @@ const { glmCoding } = GLM_PROMO_LINKS;
101156
font-weight: 500;
102157
}
103158

159+
.ali-cloud-ad .ad-emphasis {
160+
color: #FF6B00;
161+
}
162+
104163
.ad-button {
105164
flex-shrink: 0;
106165
display: inline-flex;
@@ -116,11 +175,19 @@ const { glmCoding } = GLM_PROMO_LINKS;
116175
transition: transform 0.2s ease, box-shadow 0.2s ease;
117176
}
118177

178+
.ali-cloud-button {
179+
background: linear-gradient(135deg, #FF6B00, #FF8C42);
180+
}
181+
119182
.ad-button:hover {
120183
transform: translateY(-1px);
121184
box-shadow: 0 4px 12px rgba(0, 128, 255, 0.25);
122185
}
123186

187+
.ali-cloud-button:hover {
188+
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
189+
}
190+
124191
.ad-button svg {
125192
transition: transform 0.2s ease;
126193
}
@@ -131,6 +198,10 @@ const { glmCoding } = GLM_PROMO_LINKS;
131198

132199
/* 响应式优化 */
133200
@media (max-width: 640px) {
201+
.blog-header-ad-container {
202+
flex-direction: column;
203+
}
204+
134205
.blog-header-ad {
135206
flex-direction: column;
136207
}

0 commit comments

Comments
 (0)