#nctutorial: estructura

Primero que nada, por supuesto, regístrate en Github. Una vez estés dentro, verás a la izquierda un botón verde que dice "Create repository". Haz click en él.

Ahora verás un formulario; lo único que tienes que editar es el "Repository name". Puedes ponerle el que quieras; este saldrá en la url del enlace. En mi caso, he creado una cuenta nueva para mi foro privado, y voy a llamar al repository "skin". Ahora, clickamos abajo en "Create repository" otra vez.

Ahora verás un panel grandito con un montón de info. Busca un link de texto que pone "creating a new file" y haz click. En "Name your file…" ponle "readme.md" y en el "Enter file contents here", pon lo que quieras, como si pones un punto. Yo uso esta sección para poner los créditos de un skin. Después, haz click en "Commit changes" (y de nuevo en el popup).

A continuación, en la barra de tabs, le vas a dar a "Settings" (al lado de "Insights", y ahí, le vas a dar a "Pages", dentro de "Code and automation". En "Branch", dale al dropdown que pone "None" y selecciona "main". Entonces, dale a "Save".

Volvemos a la pestaña de "Code". Ahora, en "Add file", puedes poner manualmente tus archivos (igual que hemos hecho con el readme.md) o puedes subirlos.

-> Si quieres hacer carpetas, crea un file como hemos creado el de readme, y cuando estés escribiendo el nombre, pon el nombre de la carpeta, un slash (/), y el nombre de tu archivo. Si quieres subir un archivo a la carpeta, puedes crear un archivo readme.md (que luego una vez subas tu archivo, puedes borrar).

[!!] Un pequeño addendum de cómo subir fuentes. Primero que nada, sube tus archivos de fuente (woff, woff2, ttf, svg…) a tu carpeta preferida dentro del repositorio. Tienen que estar en la misma carpeta donde vayas a subir el .css de tu fuente. Ahora, a la hora de crear una fuente, normalmente tiene esta pinta (sin el / después del arroba):

@/font-face { font-family: 'FUENTE'; src: url('/FUENTE.woff2') format('woff2'), url('/FUENTE.woff') format('woff'); font-weight: regular; font-style: normal; font-display: swap; }

Pues bien, lo único que tienes que hacer es asegurarte de que tus src están puestos así, con un puntito delante (y, lógicamente, poner los nombres de archivo correctamente, igual que se llamen en tu repositorio):

@/font-face { font-family: 'FUENTE'; src: url('./FUENTE.woff2') format('woff2'), url('./FUENTE.woff') format('woff'); font-weight: regular; font-style: normal; font-display: swap; }

Ahora, para vincular un .css, o una imagen, o whatever, ¿cómo lo hacemos? Sencillo. Tus links tienen que tener esta pinta:

https://USERNAME.github.io/REPOSITORY/…/FILE.ext

-> USERNAME: Tu nombre en github. -> REPOSITORY: El nombre del repositorio. -> …: Si tu archivo está dentro de carpetas, deberán salir aquí (mira el ejemplo si tienes dudas). -> FILE: El nombre de tu archivo. -> .ext: Extensión de tu archivo.

Un ejemplo de link podría ser, usando mi ejemplo de repositorio inicial: https://USERNAME.github.io/skin/fonts/Roboto/roboto.css

Así de sencillo. Además, para archivos de texto (como .css o .js), puedes editarlos directamente en github y (tras un pequeño periodo en el que se actualice el archivo), el link se actualizará solo, sin necesidad de volver a linkearlo.

Y eso es todo. Si me he dejado algo por el camino, algo no ha quedado claro, o cualquier otra duda, mis asks y dms están abiertos.

{TITLE_ACTIVITY_FEED}: Genera el título de la página ("Toda la actividad"). Bloque no_activity: Se genera cuando el foro no tiene actividad reciente.

{no_activity.INFO}: Genera el texto de sin actividad reciente ("No hay actividad de los miembros en el foro para mostrar en este momento.").

Bloque has_activity: Se genera cuando el foro tiene actividad reciente.

{has_activity.L_ACTIVITY_END}: Genera el mensaje de llegar al final de la actividad ("Has llegado a la última actividad guardada por el momento.").

{JS_COLLAPSE}: Genera el script para los grupos colapsables (si muchos usuarios han recibido un award el mismo día, por ejemplo).

[bloque has_activity >] Bloque activity_date_group: Genera los diferentes grupos de actividad (se divide en días).

{has_activity.activity_date_group.FORMATTED_DATE}: Nombre del grupo de actividad ("hoy", "ayer", etc).

[bloque has_activity > bloque activity_date_group > ] Bloque activity_feed_item: Genera cada línea de actividad.

{has_activity.activity_date_group.activity_feed_item.TYPE}: Genera el número del tipo de actividad (dejo abajo una lista de todos los números que he encontrado).

{has_activity.activity_date_group.activity_feed_item.EXTRA_CLASS}: Genera la clase .same-user-next que se añade si hay dos actividades seguidas del mismo usuario.

{has_activity.activity_date_group.activity_feed_item.U_AVATAR}: Genera la url del avatar del usuario que ha realizado la acción.

{has_activity.activity_date_group.activity_feed_item.DATETIME}: Genera la fecha completa ("HH:MM DD/MM/AAAA").

{has_activity.activity_date_group.activity_feed_item.TIME_FORMATTED}: Genera la fecha formateada ("hace X horas", "HH:MM").

{has_activity.activity_date_group.activity_feed_item.ACTIVITY}: Genera la descripción de la actividad.

Números de los tipos de actividad (tal cual los listan en Forumactif):

0: registro.

1: nuevo tema.

2: respondió a un tema.

3: obtuvo una recompensa/premio.

4: publicación de una entrada de blog.

5: generación de la hoja de personaje.

6: publicación de un anuncio (compra/venta).

7: publicación de un evento (calendario).

8: cambio de nombre.

9: nueva encuesta.

Como aclaración, antes de empezar, cuando hablo de bloques, hablo de estas cosas:

<!-- BEGIN nombre_de_bloque --> <!-- END nombre_de_bloque -->

Como segunda aclaración: El bloque profile_field genera todos los campos de perfil, cada uno con su HTML dentro de dicho bloque. No funciona como en jcink que puedes poner cada profile field con su ID.

{AVATAR_IMG}: El avatar.

{POSTER_RANK}: Rango (imagen, si tiene, + texto).

{USER_ONLINE}: Estatus (produce el texto 'Fuera de línea' o 'En línea'). Debe estar envuelto en el bloque switch_show_status.

{ADMINISTRATE_USER}: Link que lleva al editar perfil de usuario en el PA. Debe estar envuelto en el bloque switch_auth_user.

{BAN_USER}: Link que lleva al panel de banear usuario en el PA. Debe estar envuelto en el bloque switch_auth_user.

{switch_awards.L_AWARDS}: Título de los awards. Debe estar envuelto en el bloque switch_awards.

{switch_awards.AWARDS_LIST}: Lista de los awards. Debe estar envuelto en el bloque switch_awards.

{profile_field.LABEL}: Título de campo de perfil. Debe estar envuelto en el bloque profile_field.

{profile_field.CONTENT}: Contenido de campo de perfil. Debe estar envuelto en el bloque profile_field.

{PUSERNAME}: Genera el uX del usuario. Si es el user 1, generaría el texto 'u1', sin comillas. Se usa para los links de mensajes y posts (/sta/ para todos los temas donde haya participado, /st/ para temas creados por el usuario, /spa/ para mensajes. Ejemplo: /sta/{PUSERNAME}).

{USERNAME}: Genera el nombre del usuario con su color de grupo.

{contact_field.LABEL}: Título de campo de contacto. Debe estar envuelto en el bloque contact_field .

{contact_field.CONTENT}: Contenido de contacto. Debe estar envuelto en el bloque contact_field.

Los RPG funcionan de manera concreta y es que tienen 2 bloques: el que lo envuelve todo (switch_rpg) y el que envuelve cada tipo de field. Por defecto, los fields rpg responden al bloque rpg_fields, sólo responderán a rpg_fields_left si le cambias la posición en Estilos de campos en la sección Módulos > Juegos de papel.

{switch_rpg.rpg_fields.F_NAME}: Título de campo de RPG. Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields.

{switch_rpg.rpg_fields.F_VALUE_NEW}: Contenido de campo de RPG. Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields.

{switch_rpg.rpg_fields_left.F_NAME}: Título de campo de RPG (a la izquierda). Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields_left .

{switch_rpg.rpg_fields_left.F_VALUE_NEW}: Contenido de campo de RPG (a la izquierda). Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields_left.