hugo dream plus
Yume
Este tema es una versión actualizada del tema del sueño de Yue Yang y contiene toneladas de nuevas características como:
Este tema se puede utilizar para dos propósitos:
Este proyecto se adhiere al Código de Conducta del Pacto de contribuyente. Al participar, se espera que mantenga este código. Informe un comportamiento inaceptable a [email protected].
Instalación
Empezando
Documentación
Casi terminado
Que contribuye
Licencia
El tema se puede instalar ejecutando los siguientes comandos dentro de la carpeta de su sitio web de Hugo .
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveUna vez que el tema se haya instalado con éxito, tendrá que hacer un poco de ajuste del tema para cumplir con su gusto.
Dentro de la carpeta exampleSite , encontrará los archivos de configuración, cards.toml y posts.toml que se puede utilizar para ajustar el tema.
Debe usar estos archivos de configuración como base para su sitio, ya que se encargan de las declaraciones variables necesarias , que puede editar de acuerdo con sus necesidades.
Defina a través de las siguientes variables de configuración en params debajo de la tabla author como se muestra:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "Después de eso, complete las variables sociales al final del archivo de configuración. Este tema supera los siguientes sitios sociales: (se dan los ejemplos)
| Enlace social | Variable | Ejemplo de inicialización |
|---|---|---|
| Github | github | github = "username" |
| Correo electrónico | correo electrónico | email = "[email protected]" |
| Gorjeo | gorjeo | twitter = "username" |
facebook = "username" | ||
| YouTube | YouTube | youtube = "username" |
| Medio | medio | medium = "username" |
linkedin = "username" | ||
| Flujo de stackover | flujo de stackover | stackoverflow = "number/username" |
| Codepen | codepen | codepen = "username" |
reddit = "username" |
Estas variables deben estar en la tabla [social] de config.toml o su equivalente para YAML o JSON .
[ social ]
github = " UtkarshVerma "Una vez hecho esto, escriba la sección " Acerca de mí " de su sitio web en Markdown como se indica aquí: Error y sobre páginas.
Como se indicó anteriormente, este tema tiene dos vistas, vistas de tarjetas y vistas de publicaciones . El tipo de renderizado de la vista depende del tipo de contenido que alimente a Dream Plus . Por lo tanto:
cards en /content activa la vista de la tarjeta .posts en /content activa la vista posterior .La variable
contentTypeahora se ha desactivado.
Una distinción clara entre ambas vistas es que la vista de tarjeta no admite publicaciones, sino que redirige al enlace especificado, mientras que la vista posterior lo hace. Puede probarlos visitando mis sitios (indicados anteriormente) que los usan. Además, la creación de post/tarjeta se realiza de manera diferente para ambas vistas. Es como sigue:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationDespués de esto, simplemente abra su tarjeta de Markdown y proporcione los parámetros para la tarjeta/publicación.
Hay dos formas diferentes de configurar el fondo de este tema. Estas configuraciones son mutuamente excluyentes entre sí.
Para establecer un color de fondo específico, hágalo a través de la variable color . Si desea establecer una combinación aleatoria de colores como su fondo, simplemente deje la variable de color INNSET .
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent Especifique la imagen que desea establecer como fondo a través de la matriz images . Si prefiere una sola imagen de fondo, simplemente dé un valor único a la matriz. Por ejemplo:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background Proporcionar múltiples imágenes a la matriz images permite la característica de fondo de imagen aleatoria de Dream Plus, que cena el fondo dentro de la matriz dada cada vez que se vuelve a cargar el sitio. También puede difuminar el fondo hasta cierto punto a través de la variable blur .
Todas las variables de configuración de fondo deben colocarse dentro de la tabla
backroundenparams
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "Las cubiertas para cada tarjeta postal o tarjeta se procesan mediante Dream Plus utilizando el procesamiento de imágenes de Hugo para tiempos de carga del sitio web más rápidos. Las rutas de búsqueda para el archivo de portada son las que se indican a continuación:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
La especificación de la imagen de la portada a través de la zonda de frontal ha sido desapercibida. Las cubiertas de tarjetas ahora se pueden definir a través de la primera cena a través de la teclacover. Sin embargo, el procesamiento de imágenes no será aplicable en tales cubiertas. Además, las cubiertas de las zonas frontales se priorizan sobre los recursos de imagen , por lo tanto, para hacer que las cubiertas de recursos de imagen sean, primero tendrá que eliminar la tecla de cubierta de la parte delantera.
También puede modificar el proceso de procesamiento de imágenes a través de la variable coverArgs en [params.features] . Los argumentos aprobados deben ser para la función .Resize , ya que eso es lo que Dream Plus utiliza. Por ejemplo,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image Puede configurar su sitio web en función del dispositivo cliente utilizando la variable isMobile JS. Es true cuando el dispositivo cliente es un móvil y viceversa.
Este tema admite la personalización total de las páginas y páginas de error . Estas páginas se pueden personalizar a través de los archivos about.md y 404.md Dream Plus lee los archivos mencionados anteriormente como texto de marcado simple y luego los renderiza. Una vez que haya terminado de escribir los archivos y modificarlos de acuerdo con sus necesidades, péguelos en la carpeta content de su sitio de Hugo. Si no desea que Hugo construya estas páginas y sirvan con sus propios enlaces como <website>.<domain>/about o <website>.<domain>/404 . Luego puede decirle a Hugo que ignorelos a través de la variable ignoreFiles en su archivo config.toml de la siguiente manera:
ignoreFiles = [ " content/404.md " , " content/about.md " ] También puede establecer un Favicon personalizado para su sitio web a través de la variable de configuración de favicon en params . Por ejemplo,
[params]
favicon = "/images/defaultFav.ico"
El script del sitio web Shorte.ST se ha implementado en este tema. Para usarlo, tendrá que configurarlo a través de la tabla shortest en params .
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define Si desea controlar la cantidad de publicaciones/tarjetas que tiene una página, entonces puede hacerlo utilizando la variable de configuración paginate .
paginate = 4 # Defaults to 10 Además, las etiquetas, cuando están habilitadas, no se mostrarán todas en el encabezado y la barra lateral de forma predeterminada. Solo se muestran las 8 mejores etiquetas (en cuanto al artículo) para evitar la congestión. Sin embargo, se puede anular utilizando la variable tagLimit de la tabla [params.tag] .
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tagsTambién hay algunas otras configuraciones menores. Puede configurarlos refiriéndose a los comentarios dentro del archivo de configuración.
La documentación para este repositorio está actualmente en trabajo y se agrega al wiki de este repositorio. Las contribuciones de Wiki son bienvenidas. No dude en preguntarme sobre las características de este tema para eso.
Después de terminar las configuraciones, está listo para comenzar. Entonces, pruebe su sitio web usando:
hugo serverSu sitio ahora debe estar disponible localmente en http: // localhost: 1313 para fines de prueba.
Para probar el sitio de ejemplo, deberá especificar explícitamente el archivo de configuración a Hugo. Esto se hace de la siguiente manera:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.toml¿Encontraste algo interesante para agregar a este tema o más bien un error? Avísame al respecto a través del rastreador de problemas. Las solicitudes de extracción también son bienvenidas. Para obtener instrucciones más detalladas sobre cómo contribuir, consulte Contriping.MD
Este tema se lanza bajo la licencia MIT .
