hugo theme charlolamode

charlola.mode

El tema de este sitio web se basa en el marco de Hugo. Esta es una modificación de las plantillas Papermod y Hugo-Paper. Es rápido y fácil de usar con un diseño mínimo y las funciones más básicas.

Consulte mi sitio web para ver un ejemplo similar: www.cmart1n.com

Enlace al tema de Hugo: https://themes.gohugo.io/themes/hugo-theme-charlolamode/.

Características

1. Personaliza tu página de inicio con ...

   • Título de la página
   • Su nombre
   • Descripción
   • Íconos sociales
   • Botones

2. Cambiar color de todos los elementos, como fondo, texto, iconos ...

3. Si hace clic en una pestaña, verá una lista de publicaciones.

   • Las publicaciones se pueden visualizar con imágenes
   • La publicación puede conducir a un enlace externo

Comienzo rápido

1. Instalar Hugo
2. Instalar git

Abra su terminal o línea de comando

1. Cree una nueva carpeta 'QuickStart'

 hugo new site quickstart

2. Entra en esta carpeta

 cd quickstart

3. Inicializar un repositorio git vacío en el directorio actual

 git init

4. Clonar este repositorio en su carpeta

 git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode

5. Eliminar el config.toml

 rm config.toml

6. Agregar tema en un nuevo archivo config.yml

 echo "theme: charlolamode" >> config.yml

7. Inicie el servidor de desarrollo de Hugo para ver el sitio localmente.

 hugo server

Una vez que se inicia el servidor local, puede ver su sitio. Si su webbrowser no aparece automáticamente, abra su navegador e ingrese http: // localhost: 1313. Ahora puede comenzar a modificar esta página en el directorio. Si guarda nuevos cambios, este sitio actualizará automáticamente y renderá la modificación.

Abra el código de Visual Studio para editar su blog

3. Abre tu editor favorito como el código Visual Studio

Configuración básica

El config.yml es tu mejor amigo. Puede modificar y agregar información, como ...

• Título de la página
• Su nombre
• Descripción
• Íconos sociales
• Botones

Eche un vistazo al Charlolamode/config.yml como referencia. Hay ejemplos comentados que le muestran cómo agregar fácilmente pestañas e íconos sociales como LinkedIn, Twitter, YouTube, Instagram. Copie el contenido en su config.yml, que sobrescribirá el config.yml del tema.

Cambiar la imagen de perfil

Para agregar su foto de perfil, reemplace perfil.png en la carpeta estática/imágenes . Asegúrate de tomar una imagen con una cara feliz :)

Agregar pestañas

En config.yml puede agregar nuevas pestañas junto a 'artículos' y 'contacto'. Descopment 'categoría' para comprobarlo.

Nota Si agrega una nueva pestaña en config.yml, debe hacer lo siguiente:

1. Agregue nueva carpeta en el directorio 'Contenido' con el mismo nombre que la nueva pestaña.
2. Copiar _index.md de artículos a una nueva carpeta.

Agregar contenido nuevo

Si desea presionar nuevo contenido, cree un nuevo archivo de Markdown en la nueva carpeta. Encuentre un ejemplo en Content/Artículos/Artículo.md .

Cambiar colores

Eche un vistazo a los activos/CSS/Core/Theme-Vars.css para jugar con colores.

Deshabilitar el 'modo de perfil'

Para mostrar el contenido del artículo en la página de inicio, en lugar de la información del perfil, establezca lo siguiente en Params: en config.yml

 profileMode: 
    enabled: false

Con el contenido del artículo trasladado a la página de inicio, puede ser deseable eliminar la entrada del menú principal para artículos :

 menu:
    main:
        - name: Contact
          url: contact/
          weight: 30
        # - name: Articles
        #   url: articles/
        #   weight: 20
        - name: Projects
          url: projects
          weight: 15

¡Gracias!

Invertí mi propio tiempo para construir esto y es completamente gratis. Si esta plantilla le ha ahorrado tiempo, no dude en apoyar esta página con una donación de café :)

¡Me encantaría recibir comentarios, enviar un mensaje a través de LinkedIn!

Sitio web en línea

Para impulsar su sitio web en línea, use Azure Static Web o Netflify. Yo uso la web estática Azure.