Retipografía

Guía del Tema

6 min

Retypeset es un tema de blog estático basado en el framework Astro. Esta guía presenta la configuración del tema y cómo crear nuevos artículos, ayudándote a configurar rápidamente tu blog personal.

Configuración del Tema

Personaliza tu blog mediante la modificación del archivo de configuración src/config.ts.

Información del Sitio

site: {
  // título del sitio
  title: 'Retypeset'
  // subtítulo del sitio
  subtitle: 'Revive the beauty of typography'
  // descripción del sitio
  description: 'Retypeset is a static blog theme...'
  // usar título/subtítulo/descripción en varios idiomas desde src/i18n/ui.ts en lugar de los estáticos anteriores
  i18nTitle: true // true, false
  // nombre del autor
  author: 'radishzz'
  // url del sitio
  url: 'https://retypeset.radishzz.cc'
  // url del favicon
  // formatos recomendados: svg, png o ico
  favicon: '/icon/favicon.svg' // o https://example.com/favicon.svg
}

Color del Tema

color: {
  // modo de tema predeterminado
  mode: 'light' // light, dark, auto
  // modo claro
  light: {
    // color primario
    // usado para títulos, hover, etc
    primary: 'oklch(25% 0.005 298)'
    // color secundario
    // usado para texto de publicaciones
    secondary: 'oklch(40% 0.005 298)'
    // color de fondo
    background: 'oklch(96% 0.005 298)'
  }
  // modo oscuro
  dark: {
    // color primario
    primary: 'oklch(92% 0.005 298)'
    // color secundario
    secondary: 'oklch(77% 0.005 298)'
    // color de fondo
    background: 'oklch(22% 0.005 298)'
  }
}

Configuración Global

global: {
  // idioma predeterminado
  // idioma de la ruta raíz del sitio '/'
  locale: 'zh' // zh, zh-tw, ja, en, es, ru
  // más idiomas
  // Genera rutas multilingües como '/es/' '/ru/'
  // no incluir el idioma predeterminado nuevamente, puede ser un array vacío []
  moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
  // estilo de fuente
  fontStyle: 'sans' // sans, serif
  // formato de fecha para publicaciones
  dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
  // espacio entre título y subtítulo
  titleGap: 2 // 1, 2, 3
  // habilitar KaTeX para renderizar fórmulas matemáticas
  katex: true // true, false
}

Sistema de Comentarios

comment: {
  // habilitar sistema de comentarios
  enabled: true // true, false
  // sistema de comentarios waline
  waline: {
    // URL del servidor
    serverURL: 'https://retypeset-comment.radishzz.cc'
    // URL de emojis
    emoji: [
      'https://unpkg.com/@waline/[email protected]/tw-emoji'
      // 'https://unpkg.com/@waline/[email protected]/bmoji'
      // más emojis: https://waline.js.org/en/guide/features/emoji.html
    ]
    // búsqueda de gif
    search: false // true, false
    // cargador de imágenes
    imageUploader: false // true, false
  }
}

SEO

seo: {
  // ID de Twitter
  twitterID: '@radishzz_'
  // verificación del sitio
  verification: {
    // google search console
    google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
    // herramientas para webmasters de bing
    bing: '64708CD514011A7965C84DDE1D169F87'
    // webmaster de yandex
    yandex: ''
    // búsqueda baidu
    baidu: ''
  }
  // google analytics
  googleAnalyticsID: ''
  // umami analytics
  umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
  // verificación de seguimiento
  follow: {
    // ID de feed
    feedID: ''
    // ID de usuario
    userID: ''
  }
  // clave de acceso apiflash
  // genera automáticamente capturas de pantalla del sitio web para imágenes de open graph
  // obtén tu clave de acceso en: https://apiflash.com/
  apiflashKey: ''
}

Configuración del Pie de Página

footer: {
  // enlaces sociales
  links: [
    {
      name: 'RSS',
      url: '/rss.xml', // rss.xml, atom.xml
    },
    {
      name: 'GitHub',
      url: 'https://github.com/radishzzz/astro-theme-retypeset',
    },
    {
      name: 'X',
      url: 'https://x.com/radishzz_',
    },
    // {
    //   name: 'Email',
    //   url: 'https://[email protected]',
    // }
  ]
  // año de inicio del sitio web
  startYear: 2024
}

Precargar Recursos

preload: {
  // estrategias de precarga de enlaces
  linkPrefetch: 'viewport' // hover, tap, viewport, load
  // URL del servidor de comentarios
  commentURL: 'https://retypeset-comment.radishzz.cc'
  // URL de alojamiento de imágenes
  imageHostURL: 'https://image.radishzz.cc'
  // js personalizado de google analytics
  // para usuarios que redirigen javascript de analytics a un dominio personalizado
  customGoogleAnalyticsJS: ''
  // js personalizado de umami analytics
  // para usuarios que implementan umami por su cuenta, o redirigen javascript de analytics a un dominio personalizado
  customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
}

Configuración Adicional

Además del archivo de configuración src/config.ts, algunas opciones de configuración se encuentran en otros archivos.

Resaltado de Sintaxis

Temas de resaltado de sintaxis para bloques de código.

// astro.config.ts

shikiConfig: {
  // temas disponibles: https://shiki.style/themes
  // el color de fondo sigue el tema del blog por defecto, no el tema de resaltado de sintaxis
  themes: {
    light: 'github-light' // tema claro
    dark: 'github-dark' // tema oscuro
  }
}

Extracto de Artículo

Cantidad de caracteres para extractos automáticos de artículos.

// src/utils/description.ts

const EXCERPT_LENGTHS: Record<ExcerptScene, {
  cjk: number // Chino, Japonés, Coreano
  other: number // Otros idiomas
}> = {
  list: { // Lista de artículos en página principal
    cjk: 120, // Extrae automáticamente los primeros 120 caracteres
    other: 240, // Extrae automáticamente los primeros 240 caracteres
  },
}

Open Graph

Estilos de imágenes sociales Open Graph.

// src/pages/og/[...image].ts

getImageOptions: (_path, page) => ({
  logo: {
    path: './public/icon/og-logo.png', // ruta local requerida y formato PNG
    size: [250], // ancho del logo
  },
  font: {
    title: { // título
      families: ['Noto Sans SC'], // fuente
      weight: 'Bold', // peso
      color: [34, 33, 36], // color
      lineHeight: 1.5, // altura de línea
    },
  },
  fonts: [ // rutas de fuentes (locales o remotas)
    'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
    'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
  ],
  bgGradient: [[242, 241, 245]], // color de fondo
  // más configuraciones: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
})

Canal RSS

Estilos de página del feed RSS.

<!-- public/rss/rss-style.xsl -->

<style type="text/css">
body{color:oklch(25% 0.005 298)} /* color de fuente */
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* color de fondo */
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* color de fuente secundario */
</style>

Creación de un Nuevo Artículo

Crea un nuevo archivo con extensión .md o .mdx en el directorio src/content/posts/, y añade los metadatos Front Matter en la parte superior del archivo.

Front Matter

---
# Obligatorio
title: Guía del Tema
published: 2025-01-26

# Opcional
description: Los primeros 240 caracteres del artículo se seleccionarán automáticamente como extracto.
updated: 2025-03-26
tags:
  - Tema de Blog
  - Guía

# Avanzado, Opcional
draft: true/false
pin: 1-99
toc: true/false
lang: en/es/ru/zh/zh-tw/ja
abbrlink: theme-guide
---

Configuración Avanzada

draft

Marca el artículo como borrador. Cuando se establece como true, el artículo no se puede publicar y solo está disponible para vista previa en desarrollo local. El valor predeterminado es false.

pin

Fija el artículo en la parte superior. Cuanto mayor sea el número, mayor será la prioridad del artículo fijado. El valor predeterminado es 0, lo que significa que no está fijado.

toc

Genera tabla de contenidos. Muestra encabezados h2 a h4. El valor predeterminado es true.

lang

Especifica el idioma del artículo. Solo se puede especificar un idioma. Si no se especifica, el artículo se mostrará en todas las rutas de idioma por defecto.

# src/config.ts
# locale: 'en'
# moreLocales: ['es', 'ru']

# lang: ''
src/content/posts/apple.md   -> example.com/posts/apple/
                             -> example.com/es/posts/apple/
                             -> example.com/ru/posts/apple/
# lang: en
src/content/posts/apple.md   -> example.com/posts/apple/
# lang: es
src/content/posts/apple.md   -> example.com/es/posts/apple/
# lang: ru
src/content/posts/apple.md   -> example.com/ru/posts/apple/

Personaliza la URL del artículo. Solo puede contener letras minúsculas, números y guiones -.

# src/config.ts
# locale: 'en'
# moreLocales: ['es', 'ru']
# lang: 'es'

# abbrlink: ''
src/content/posts/apple.md           ->  example.com/es/posts/apple/
src/content/posts/guide/apple.md     ->  example.com/es/posts/guide/apple/
src/content/posts/2025/03/apple.md   ->  example.com/es/posts/2025/03/apple/

# abbrlink: 'banana'
src/content/posts/apple.md           ->  example.com/es/posts/banana/
src/content/posts/guide/apple.md     ->  example.com/es/posts/banana/
src/content/posts/2025/03/apple.md   ->  example.com/es/posts/banana/
Tema de Blog Guía