4.6 KiB

Raw Blame History

Cómo trabajar en las noticias para desarrolladores de freeCodeCamp.org

Las noticias del desarrollador también conocidas como el sitio /news funciona con Ghost. Utilizamos un tema personalizado para el aspecto del sitio. El código fuente del tema está disponible aquí: https://github.com/freeCodeCamp/news-theme.

El Tema

Ghost utiliza un lenguaje de plantillas sencillo llamado Handlebars para sus temas. El tema usado en /news se basa en el tema predeterminado casper.

The default theme is commented pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Una vez que te sientas cómodo con cómo funciona todo, Ghost también tiene una completa documentación API de temas que explica todos los posibles ayudantes de Handlebars y plantillas.

Los archivos principales son:

default.hbs - El archivo de plantilla principal
index.hbs - Utilizado para la página de inicio
post.hbs - Utilizado para publicaciones individuales
page.hbs - Utilizado para páginas individuales
tag.hbs - Utilizado para archivos de etiquetas
author.hbs - Utilizado para archivos de autor

Un truco realmente bueno es que también puede crear plantillas personalizadas sólo añadiendo un trozo pequeño de una página a un archivo de plantilla. Por ejemplo:

page-about.hbs - plantilla personalizada para la página /about/
tag-news.hbs - plantilla personalizada para /tag/news/ archivo
author-ali.hbs - plantilla personalizada para /author/ali/ archivo

Desarrollo

Obtén Ghost instalado localmente.
```
npm install -g ghost-cli@latest
mkdir ghost-local-site
cd ghost-local-site
```
```
ghost install local
ghost start
```
Nota: actualmente freeCodeCamp usa la versión Ghost 2.9.0, así que asegúrate de que estás usando una versión superior a eso.

Asegúrate de ejecutar los comandos de ghost desde el directorio ghost-local-site. Siga las instrucciones adicionales de la documentación oficial de Ghost si no estás familiarizado con su interfaz.
Fork and clone the repository in your theme directory (replacing YOUR_USERNAME with your GitHub username):
```
cd content/themes/
git clone https://github.com/YOUR_USERNAME/news-theme.git
```
Asegúrese de tener todos los requisitos previos.

Los estilos de los temas se compilan usando Gulp/PostCSS para polyfill las futuras especificaciones CSS. Necesitará Node.js. Asegúrese de que su versión de Node.js es compatible con ghost.
Instalar dependencias y desarrollar el tema
```
npm ci
npm run develop
```
Ahora puedes editar los archivos /assets/css/, los cuales serán compilados a /assets/built/ automáticamente.
Acceder al sitio de desarrollo.

a. Introduzca http://localhost:2368/ghost/ en su barra de direcciones. Continúe con la configuración solicitada en la página (si se ejecuta Ghost por primera vez).

b. (Solo una vez, durante la configuración) Reinicie Ghost, en una terminal por separado una vez para asegurarse de que el tema está disponible.
```
cd ghost-local-site
ghost restart
```
c. (Solo una vez, durante la configuración) Una vez que hayas hecho esto, ve a http://localhost:2368/ghost/#/settings/design y desplázate hacia abajo. Asegúrate de hacer clic en activar en el freecodecamp-news-theme.
Comprime el código final y crea un pull-request

El zip que Gulp empaqueta son los archivos del tema en dist/<theme-name>.zip, los cuales podemos subir al sitio de producción.

Cuando haga un PR, por favor asegúrese de haber ejecutado el script de abajo antes de confirmar el código y enviar un PR.
```
npm run zip
```

Otros recursos y referencias

Funcionalidades utilizadas de PostCSS

Autoprefixer - No te preocupes por escribir prefijos del navegador de ningún tipo, todo se hace automáticamente con soporte para las 2 versiones más recientes de cada navegador.
Variables - Variables CSS simples
Función de color

Iconos SVG

El tema utiliza iconos SVG en línea, incluidos a través de parciales de Handlebars. Puedes encontrar todos los iconos dentro de /partials/icons. Para usar un icono simplemente incluya el nombre del archivo relevante, por ejemplo. Para incluir el icono SVG en /partials/icons/rss.hbs - usa {{> "icons/rss"}}.

Puedes añadir tus propios iconos SVG de la misma manera.

4.6 KiB Raw Blame History