Conversation
Agent-Logs-Url: https://github.com/zigcc/zigcc.github.io/sessions/f2181d86-6e5b-4636-a0d4-efeb5d6deed8 Co-authored-by: jiacai2050 <3848910+jiacai2050@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR adds a standardized way to disclose AI-assisted content on the site: it documents the frontmatter flag for authors and renders a visible notice banner on posts when that flag is enabled.
Changes:
- Documented an
ai_generatedfrontmatter flag in the contributing guide, including usage guidelines. - Rendered an AI-assistance notice banner at the end of posts when
custom.ai_generated = true. - Added CSS styling for the new notice banner with light/dark mode support.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
content/contributing.smd |
Adds contributor guidance and examples for marking AI-assisted articles via frontmatter. |
layouts/post.shtml |
Conditionally renders an AI-assistance notice banner based on custom.ai_generated. |
assets/style.css |
Introduces .ai-notice styles for the banner in light/dark mode. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div :html="$page.toc()"></div> | ||
| </div> | ||
| <div :html="$page.content()"></div> | ||
| <div class="ai-notice" :if="$page.custom.getOr('ai_generated', false)"> |
There was a problem hiding this comment.
This notice banner will be included in the Pagefind indexed body (it sits inside data-pagefind-body and does not have data-pagefind-ignore), which can pollute search excerpts with the same boilerplate warning on every AI-marked post. Consider adding data-pagefind-ignore to the .ai-notice container (similar to #prev-next, #meta, and TOC blocks) so search indexing focuses on the article content.
| <div class="ai-notice" :if="$page.custom.getOr('ai_generated', false)"> | |
| <div class="ai-notice" :if="$page.custom.getOr('ai_generated', false)" data-pagefind-ignore> |
| .ai-notice { | ||
| margin: 1.5rem 0; | ||
| padding: 0.875rem 1.25rem; | ||
| background: #fffbeb; | ||
| border: 1px solid #f59e0b; | ||
| border-left: 4px solid #f59e0b; | ||
| border-radius: 6px; | ||
| color: #92400e; | ||
| font-size: 0.95rem; | ||
| line-height: 1.6; | ||
| } |
There was a problem hiding this comment.
The new .ai-notice styling introduces a separate yellow/orange palette via hard-coded hex values, even though the stylesheet already defines shared design tokens (e.g. --brand-accent, --bg-*, --text-*) for light/dark theming. To keep the theme consistent and avoid duplicating color decisions, consider reusing existing tokens (or adding dedicated --ai-notice-* tokens in :root + dark override) instead of embedding raw hex colors in the component rules.
AI 生成内容需要明确告知读者。在贡献指南中增加 AI 辅助创作的使用规范,并提供对应的前端展示组件。
Changes
content/contributing.smd: 新增"AI 辅助创作说明"章节,说明使用规范及注意事项;在 frontmatter 示例中添加ai_generated字段示例layouts/post.shtml: 当custom.ai_generated = true时,在文章末尾渲染提示横幅assets/style.css: 新增.ai-notice样式,支持亮色/暗色模式Usage
在需要标注 AI 辅助内容的文章 frontmatter 中添加:
文章末尾将自动显示: