freeCodeCamp/docs/i18n/espanol/how-to-work-on-the-news-theme.md

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

Las noticias del desarrollador también conocidas como el sitio [`/news`](https://www.freecodecamp.org/news) funciona con [Ghost](https://ghost.org/). 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](http://handlebarsjs.com/) para sus temas. El tema usado en `/news` se basa en el tema predeterminado [casper](https://github.com/TryGhost/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](https://themes.ghost.org) 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

1. Obtén Ghost instalado localmente.

   ```sh
   npm install -g ghost-cli@latest
   mkdir ghost-local-site
   cd ghost-local-site
   ```

   ```sh
   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](https://docs.ghost.org) si no estás familiarizado con su interfaz.

2. Fork and clone the repository in your theme directory (replacing `YOUR_USERNAME` with your GitHub username):

   ```sh
   cd content/themes/
   git clone https://github.com/YOUR_USERNAME/news-theme.git
   ```

3. 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](https://nodejs.org/). Asegúrese de que su versión de Node.js es compatible con `ghost`.

4. Instalar dependencias y desarrollar el tema

   ```sh
   npm ci
   npm run develop
   ```

5. Ahora puedes editar los archivos `/assets/css/`, los cuales serán compilados a `/assets/built/` automáticamente.

6. 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.

   ```sh
   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`.

7. 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.

   ```sh
   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](https://github.com/postcss/postcss-color-function)

### 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.