Crear contenido, obtener un sitio web altamente optimizado
css y la etiqueta de plantilla cssInstalarlo usando npm o hilo con un comando simple
yarn add contentz
# npm install contentz Después de haber instalado ContentZ, puede usarlo con un comando simple.
contentz buildEso leerá sus archivos y generará su sitio web para usted.
Crear un archivo de configuración llamado config.yml
---
title : Sergio Xalambrí
description : Senior Software Engineer and Technical Writer
domain : https://sergiodxa.com
language : en
repository : https://github.com/sergiodxa/personal-site/
email : [email protected]
patreon : sergiodxa
analytics : UA-XXXXXXXXX-2
social :
twitter : sergiodxa
github : sergiodxa
npm : sergiodxa
linkedin : sergiodxa
dev : sergiodxa
meetup : 182915204
navigation :
- name : About
path : /about
- name : Services
path : /services| Opción | Descripción | Requerido |
|---|---|---|
| título | El título del sitio web, utilizado en el <title> y en la página de inicio | No (predeterminado: Just another Contentz site ) |
| descripción | La descripción del sitio web, utilizada en el <meta> y en la página de inicio | No (predeterminado: descripción vacía) |
| dominio | El dominio que utilizará para alojar el sitio web, utilizado en el feed RSS | Sí |
| idioma | El idioma principal del sitio web, utilizado como retroceso para artículos y páginas | No (predeterminado: EN) |
| repositorio | El repositorio de GitHub que aloja el sitio web, utilizado en el pie de página de artículos y páginas | No (predeterminado: ocultar el enlace a editar) |
| correo electrónico | Su dirección de correo electrónico, utilizada en el icono de correo electrónico en la página de inicio | No (predeterminado: ocultar icono) |
| patreón | Su nombre de usuario Patreon, utilizado en la página de inicio y el pie de página | No (predeterminado: mensaje Hiden Patreon) |
| analítica | Tu análisis UA | No (predeterminado: ocultar análisis) |
| social | Una lista de sus redes sociales, utilizadas para vincularlas en la página de inicio | No (predeterminado: ocultar íconos sociales) |
| navegación | Una lista de páginas para vincular en el encabezado | No (predeterminado: no agregue enlaces adicionales) |
| sudoeste | Establecerlo como false si desea deshabilitar la generación SW | No (predeterminado: verdadero) |
| incremental | Establecerlo como false si desea deshabilitar la construcción incremental | No (predeterminado: verdadero) |
| icono | Establezca el camino del favicón del sitio web | No (predeterminado: /static/favicon.png ) |
Para otras redes sociales, envíe un PR con un nuevo ícono y agregue una forma de formatear la URL para ese icono.
Cree una carpeta /articles y coloque sus archivos .mdx allí, aquí hay una publicación de ejemplo.
---
title : My super cool article
description : This is the description of the article
date : 2018-01-01T00:00:00.000Z
published : true
---
This is my content, here I could use markdown or import a component and render it. Ahora ejecute contentz y creará un directorio /public con su página de inicio, página de archivo y artículo. Puede acceder a su archivo en /articles/ y cada artículo como /articles/:article/ , en el ejemplo, puede verlo en /articles/my-super-cool-article .
Para páginas personalizadas, cree una carpeta A /pages y coloque sus archivos .mdx allí, aquí hay una página de ejemplo.
---
title : About me
---
Hi! I'm an example page. Ahora ejecute contentz y creará un directorio /public con su página de inicio y páginas. Cada página se colocará en el nivel base del public , que significa que su /pages/about.mdx podría acceder a /about/ en su navegador y no /pages/about .
En caso de que desee tener una página para compartir enlaces interesantes, puede crear un archivo link.yml en la raíz de su proyecto. Luego ejecute contentz y generará automáticamente un /link/ página para usted con una lista de todos sus enlaces. Cada enlace debe tener url , title , comment y clave date . Archivo de ejemplo:
---
- url : https://sergiodxa.com/
title : Sergio Xalambrí
comment : The website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z
- url : https://sergiodxa.dev/
title : sergiodxa.dev
comment : The alias of the website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z ContentZ generará automáticamente una página de error en /404.html , al implementarlo puede redirigir las páginas no encontradas a /404.html .
Si implementa en NetLify, recogerá ese archivo automáticamente.
ContentZ genera un SW automáticamente para usted, este SW almacenará en caché cada solicitud a su propio sitio web (usando location.origin ). No almacenará en caché de la solicitud a otro dominio.
Este comportamiento podría desactivarse agregando sw: false a su archivo config.yml . Agregar esto también eliminará DE sw.js y load-sw.js para evitar el acceso en caché al y crear el archivo unload-sw.js .
ContentZ generará una alimentación RSS Atom válida automáticamente con su lista de artículos, se colocará en /atom.xml y una etiqueta <meta> se agregará automáticamente para usted en cada página para que sea descubierto.
Si desea vincular a archivos estáticos como imágenes, videos, etc. Cree una carpeta /static y coloque todos sus archivos allí. Al ejecutar content se copiarán automáticamente a /public/static
En caso de que desee agregar una etiqueta HTML con estilos personalizados directamente en su contenido MDX, puede usar el accesorio css y la etiqueta de emoción de la plantilla css .
Ejemplo:
< div css = { { color : "red" } } > This is red </ div >
< div css = { css `color: blue` } > This is blue < / div> ContentZ detectará qué archivos cambiaron y solo actualizará los archivos relacionados. Esto significa que si agrega un nuevo enlace /link/ se regenerará, pero si cambia un artículo las páginas del artículo, se regenerará la lista de artículos y la alimentación RSS.
En el caso de que actualice la configuración o actualice la versión ContentZ, todas las páginas se regenerarán.
Si desea optar por no participar en este conjunto de características incremental: false en su config.yml . Esto invalidará automáticamente los cachés anteriores y siempre generará todas las páginas.
ContentZ también podría generar automáticamente imágenes sociales (también conocido como gráfico abierto) para que lo use en sus artículos y páginas. Para usarlo, ejecute el comando:
contentz social [path] Donde [path] es el archivo que se utilizará para generar la imagen social. También podría ser más de un archivo que agregue un espacio entre ellos.
contentz social [path1] [path2]Una ruta podría ser una ruta para un artículo, una publicación o una de las páginas generadas automáticamente.
Si quieres generarlos inicialmente, ejecute
contentz social home articles links error Después de generar las imágenes sociales, verá una carpeta /static/_social con sus imágenes, las páginas se colocarán en /static/_social/pages y artículos en /static/_social/article , las páginas especiales estarán en la raíz de _social .
Contentz Support i18n fuera del cuadro para los textos fijos del sitio web, texto como el soporte de Patreon o la edición en GitHub. Para cambiar el idioma principal de su sitio web, establezca el language clave o la clave lang (se prefiere el idioma) al código de idioma.
Los idiomas compatibles es para español y en para inglés (predeterminado al inglés en caso de código de idioma no válido).
Si no es compatible con su idioma, agregue un JSON con los mensajes y cargue en el I18N lib. Luego envíe un PR para agregarlo.