人因小管家 — Habilidad de redacción de artículos de blog
Convierte borradores de blog originales y desordenados (exportaciones de Markdown, estilos incrustados de Blogger antiguo, etc.) en HTML limpio con el estilo del tema V8.
Especificaciones de salida
- Usa las variables CSS y la paleta de colores del lenguaje de diseño V8
- Incrusta Schema JSON-LD Article para SEO con IA
- Usa exclusivamente chino tradicional, prohibido cualquier carácter de chino simplificado (por ejemplo, «头» → «頭», «专» → «專», «发» → «發»). Después de la salida, escanea todo el texto para confirmar que no hay caracteres simplificados.
- Inserta el componente de personaje Noah en los momentos adecuados
- Elimina todos los atributos basura de editores externos (
cid,mdtype,white-space, etc.) - Conserva las imágenes originales y asegura
loading="lazy"yaltdescriptivos - Las imágenes usan
border-radius: 8px, ancho completo y centrado
Referencia de colores V8
--ergopt-text: #242826;
--ergopt-muted: #6b736f;
--ergopt-border: #dde5df;
--ergopt-accent: #147d75;
--ergopt-accent-soft: #e7f3ef;
--ergopt-warm: #f3eadb;
Estructura SEO
Cada artículo debe incrustar JSON-LD Article Schema:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Título del artículo (incluye la marca 人因小管家/Noah)",
"description": "Descripción que se muestra en los resultados de búsqueda, 50-80 caracteres, con palabras clave",
"author": { "@type": "Person", "name": "人因小管家 Noah" },
"image": "URL de la imagen principal",
"keywords": ["人因工程", "palabra clave 1", "palabra clave 2", "Noah人因小管家"]
}
</script>
Componentes de diseño del artículo
Todos los componentes comparten un contenedor envolvente:
<div class="article-wrap">
<!-- El contenido va aquí -->
</div>
CSS de los componentes (importación completa)
.article-wrap {
max-width: 760px; margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
color: #242826; line-height: 1.85; font-size: 1.08rem; letter-spacing: .02em;
}
.article-wrap * { box-sizing: border-box; }
.article-wrap .featured-img { width: 100%; border-radius: 8px; margin: 0 0 24px; display: block; }
.article-wrap p { margin: 0 0 1.18em; color: #242826; }
.article-wrap h2 { font-size: 1.55rem; font-weight: 700; color: #242826; margin: 1.85em 0 .7em; line-height: 1.35; padding-bottom: 6px; border-bottom: 2px solid #e7f3ef; }
.article-wrap h3 { font-size: 1.28rem; font-weight: 700; color: #242826; margin: 1.5em 0 .6em; line-height: 1.35; }
.article-wrap strong { color: #147d75; }
.article-wrap ul, .article-wrap ol { margin: 0 0 1.35em 1.4em; padding: 0; }
.article-wrap li { margin: .35em 0; }
.noah-callout {
background: #e7f3ef; border-left: 4px solid #147d75;
border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 1.5em 0;
}
.noah-callout .label { font-size: .82rem; font-weight: 700; color: #147d75; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.noah-callout p { margin: 0; color: #242826; }
.ng-box {
background: #fbfaf7; border: 1px solid #dde5df; border-left: 4px solid #e8a838;
border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 1em 0;
}
.ng-box .label { font-size: .82rem; font-weight: 700; color: #b8860b; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.ng-box p { margin: 0; color: #4a524e; }
.tip-card {
background: #f7f8f6; border: 1px solid #dde5df;
border-radius: 8px; padding: 18px 20px; margin: 1em 0;
}
.tip-card .num {
display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; background: #147d75;
border-radius: 999px; padding: 0 10px; line-height: 1.7; margin-bottom: 4px;
}
.tip-card h3 { font-size: 1.1rem; font-weight: 700; color: #242826; margin: 4px 0 6px; }
.tip-card p { margin: 0; color: #4a524e; font-size: 1rem; }
.check-card {
background: #f7f8f6; border: 1px solid #dde5df;
border-radius: 8px; padding: 18px 20px; margin: 1em 0;
}
.check-card .num {
display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; background: #147d75;
border-radius: 999px; padding: 0 10px; line-height: 1.7; margin-bottom: 4px;
}
.check-card h3 { font-size: 1.1rem; font-weight: 700; color: #242826; margin: 4px 0 6px; }
.check-card p { margin: 0 0 6px; color: #4a524e; font-size: 1rem; }
.check-card .note { font-size: .88rem; color: #6b736f; margin: 0; padding-left: 12px; border-left: 2px solid #dde5df; }
.article-divider {
border: none; height: 1px;
background: linear-gradient(90deg, transparent, #dde5df, transparent);
margin: 2.2em 0;
}
@media (max-width: 700px) {
.article-wrap { font-size: 1.04rem; }
}
Cuándo usar cada componente
| Componente | Uso | Momento |
|---|---|---|
noah-callout | Recordatorio / Consejo de Noah | Introducción inicial, resumen final |
ng-box | Postura NG / conceptos erróneos / errores | Al enumerar errores comunes |
tip-card | Pasos correctos / enseñanza / consejos | Al listar pasos numerados |
check-card | Elementos de autoevaluación | Elementos que el lector puede comprobar por sí mismo (por ejemplo, postura al dormir) |
pillow-hint | Indicadores de selección / consejos rápidos | Información de referencia rápida (como el indicador de puño) |
article-divider | Separador de párrafos | Entre cada sección grande |
Plantilla de estructura de artículo
<!-- Título del artículo (V8 + Noah) -->
<script type="application/ld+json">{/* Article Schema */}</script>
<style>{/* Importar CSS anterior */}</style>
<div class="article-wrap">
<img class="featured-img" src="..." alt="..." loading="lazy">
<!-- 1-2 párrafos introductorios -->
<p>...</p>
<!-- Cuadro de recordatorio de Noah (opcional) -->
<div class="noah-callout">
<div class="label">Recordatorio cálido de Noah</div>
<p>...</p>
</div>
<hr class="article-divider">
<h2>Tema 1: Análisis de ergonomía</h2>
<p>...</p>
<hr class="article-divider">
<h2>Tema 2: Posturas incorrectas / errores</h2>
<div class="ng-box">...</div>
<div class="ng-box">...</div>
<hr class="article-divider">
<h2>Tema 3: Práctica correcta</h2>
<div class="tip-card"><div class="num">1</div><h3>...</h3><p>...</p></div>
<div class="tip-card"><div class="num">2</div><h3>...</h3><p>...</p></div>
<div class="tip-card"><div class="num">3</div><h3>...</h3><p>...</p></div>
<hr class="article-divider">
<h2>Consejo cariñoso de Noah</h2>
<p>...</p>
<div class="noah-callout">
<div class="label">Pequeño mayordomo Noah</div>
<p>...</p>
</div>
</div>
Reglas de nomenclatura
Nombre del archivo del artículo: EjemploArtículo_<Tema>.html
Schema headline: El final debe incluir la marca «人因小管家/Noah»
Arreglo keywords: El último elemento es fijo: "Noah人因小管家"
alt de la imagen: Texto descriptivo en chino, no más de 15 caracteres