Back to Details

astro-cta-injector

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Astro CTA Injector Skill

Astro CTA 注入器 Skill

Purpose

用途

This skill injects Call-to-Action (CTA) blocks into Astro site content. It supports:
  • Multiple CTA types (newsletter, product, custom)
  • Intelligent placement strategies
  • Content-based relevance scoring
  • Batch processing with preview
本Skill可在Astro站点内容中插入行动召唤（CTA）模块。支持：
  • 多种CTA类型（新闻通讯、产品推广、自定义）
  • 智能布局策略
  • 基于内容的相关性评分
  • 批量处理及预览功能

When to Use This Skill

何时使用本Skill

  • User asks to "add CTAs to blog posts"
  • User wants to "inject newsletter signup" into content
  • User mentions "add product promotion" to posts
  • User needs to batch-add any type of content block to posts
  • User wants to "add calls to action" to their Astro site
  • 用户要求“在博客文章中添加CTA”
  • 用户希望在内容中“插入新闻通讯订阅模块”
  • 用户提及“在文章中添加产品推广内容”
  • 用户需要批量为文章添加任意类型的内容模块
  • 用户希望为其Astro站点“添加行动召唤模块”

Prerequisites

前置条件

  • Astro site with content in 
    .astro
    or 
    .md
    files
  • Python 3.10+
  • BeautifulSoup4 for HTML parsing
  • 内容存储在
    .astro
    或
    .md
    文件中的Astro站点
  • Python 3.10+
  • 用于HTML解析的BeautifulSoup4

Configuration

配置

Create a 
config.json
in the skill directory:
json
{
  "content_path": "./src/content/blog",
  "file_patterns": ["*.astro", "*.md"],
  "cta_types": {
    "newsletter": {
      "template": "newsletter.html",
      "default_placement": "after-paragraph-50%",
      "keywords": ["tip", "guide", "learn", "strategy"]
    },
    "product": {
      "template": "product.html",
      "default_placement": "end",
      "keywords": ["productivity", "task", "habit", "goal"]
    }
  },
  "output": {
    "state_file": "./state/cta_injection_progress.json",
    "backup_dir": "./backups",
    "report_file": "./reports/cta_injection_report.md"
  },
  "dry_run": true
}
在Skill目录下创建
config.json
文件：
json
{
  "content_path": "./src/content/blog",
  "file_patterns": ["*.astro", "*.md"],
  "cta_types": {
    "newsletter": {
      "template": "newsletter.html",
      "default_placement": "after-paragraph-50%",
      "keywords": ["tip", "guide", "learn", "strategy"]
    },
    "product": {
      "template": "product.html",
      "default_placement": "end",
      "keywords": ["productivity", "task", "habit", "goal"]
    }
  },
  "output": {
    "state_file": "./state/cta_injection_progress.json",
    "backup_dir": "./backups",
    "report_file": "./reports/cta_injection_report.md"
  },
  "dry_run": true
}

Placement Strategies

布局策略

StrategyDescriptionBest For
end
After all contentNon-intrusive CTAs
after-paragraph-50%
After 50% of paragraphsMid-content engagement
after-paragraph-60%
After 60% of paragraphsLater engagement
after-heading
After first H2Early engagement
before-conclusion
Before last paragraphStrong finish
策略描述适用场景
end
在所有内容之后非侵入式CTA
after-paragraph-50%
在50%段落之后内容中段互动
after-paragraph-60%
在60%段落之后内容后段互动
after-heading
在第一个H2标题之后内容前段互动
before-conclusion
在最后一段之前收尾强互动

CTA Templates

CTA模板

Templates are HTML files in the 
templates/
directory:
html
<!-- templates/newsletter.html -->
<aside class="cta-newsletter" data-cta-type="newsletter">
  <h3>{{title}}</h3>
  <p>{{description}}</p>
  <form action="{{form_url}}" method="post">
    <input type="email" placeholder="Your email" required />
    <button type="submit">Subscribe</button>
  </form>
</aside>
Variables:
  • {{title}}
    - CTA headline
  • {{description}}
    - CTA body text
  • {{form_url}}
    - Form submission URL
  • {{product_url}}
    - Product link
  • {{image_url}}
    - Image source
模板为
templates/
目录下的HTML文件：
html
<!-- templates/newsletter.html -->
<aside class="cta-newsletter" data-cta-type="newsletter">
  <h3>{{title}}</h3>
  <p>{{description}}</p>
  <form action="{{form_url}}" method="post">
    <input type="email" placeholder="Your email" required />
    <button type="submit">Subscribe</button>
  </form>
</aside>
变量说明：
  • {{title}}
    - CTA标题
  • {{description}}
    - CTA正文文本
  • {{form_url}}
    - 表单提交URL
  • {{product_url}}
    - 产品链接
  • {{image_url}}
    - 图片源地址

Workflow

工作流程

Step 1: Score Posts for Relevance

步骤1：为文章进行相关性评分

bash
python scripts/score_posts.py --content-path ./src/content/blog --cta-type newsletter
bash
python scripts/score_posts.py --content-path ./src/content/blog --cta-type newsletter

Step 2: Preview Injections

步骤2：预览注入效果

bash
python scripts/preview_injection.py --input scored_posts.json --cta-type newsletter
bash
python scripts/preview_injection.py --input scored_posts.json --cta-type newsletter

Step 3: Apply Injections

步骤3：执行注入操作

bash
python scripts/inject_ctas.py --input scored_posts.json --cta-type newsletter
bash
python scripts/inject_ctas.py --input scored_posts.json --cta-type newsletter

Input Format

输入格式

Scored posts JSON:
json
{
  "posts": [
    {
      "file_path": "./src/content/blog/my-post.astro",
      "title": "My Blog Post",
      "relevance_score": 8.5,
      "cta_type": "newsletter",
      "placement": "after-paragraph-50%",
      "cta_data": {
        "title": "Get More Tips Like This",
        "description": "Subscribe to my weekly newsletter"
      }
    }
  ]
}
评分后的文章JSON：
json
{
  "posts": [
    {
      "file_path": "./src/content/blog/my-post.astro",
      "title": "My Blog Post",
      "relevance_score": 8.5,
      "cta_type": "newsletter",
      "placement": "after-paragraph-50%",
      "cta_data": {
        "title": "Get More Tips Like This",
        "description": "Subscribe to my weekly newsletter"
      }
    }
  ]
}

Scoring Algorithm

评分算法

Posts are scored for CTA relevance based on:
  1. Keyword density - How many relevant keywords appear
  2. Content length - Longer posts = better candidates
  3. Topic match - Title and content topic alignment
  4. Existing CTAs - Skip posts that already have CTAs
Scores range from 0-10. Default threshold: 5.0
文章的CTA相关性评分基于以下因素：
  1. 关键词密度 - 相关关键词出现的频次
  2. 内容长度 - 文章越长，越适合作为候选
  3. 主题匹配度 - 标题与内容的主题契合度
  4. 已有CTA检测 - 跳过已包含CTA的文章
评分范围为0-10，默认阈值为5.0

Safety Features

安全特性

  • Dry-run mode by default
  • Backup creation before any modifications
  • Duplicate detection - Won't inject if CTA already exists
  • Rollback capability - Restore from backups
  • Preview diffs - See exactly what will change
  • 默认启用试运行模式
  • 在进行任何修改前创建备份
  • 重复检测 - 若已存在CTA则不会重复注入
  • 回滚功能 - 可从备份恢复
  • 预览差异 - 清晰查看即将发生的变更

Example Usage

使用示例

User: "Add a newsletter signup CTA to all my productivity-related blog posts"
Claude will:
  1. Scan content directory for posts
  2. Score posts for "newsletter" relevance using productivity keywords
  3. Generate CTA HTML from template
  4. Show preview of changes
  5. Ask for confirmation
  6. Inject CTAs into matching posts
  7. Report results
用户：“为所有与生产力相关的博客文章添加新闻通讯订阅CTA”
Claude将执行以下操作：
  1. 扫描内容目录中的文章
  2. 使用生产力相关关键词为文章进行“新闻通讯”相关性评分
  3. 从模板生成CTA HTML代码
  4. 展示变更预览
  5. 请求用户确认
  6. 为匹配的文章注入CTA
  7. 生成结果报告