Sitio web de demostración | Registro de cambios
Yue es un tema de Hugo minimalista, multilingüe y personalizable, adecuado para blogs.
Las capturas de pantalla pueden estar desactualizadas, por lo que es mejor visitar el sitio web de demostración.
Modo de luz en el escritorio
Modo oscuro en el escritorio
Modo luz en el móvil
Modo oscuro en el móvil
Apariencia mínima
Fácil de instalar (con Git y Hugo instalados, crea un sitio web en unos segundos)
Documentación detallada
Modo oscuro automático
Plurilingüe
Lista de traducciones en una sola página
Selector de idioma (ir a la página correspondiente o página de inicio)
Múltiples autores
Tabla de contenido (plegable, solo se genera cuando está disponible)
Fecha de modificación en la página de inicio, página única, página de sección y página de términos
Formato de fecha personalizado
Paginación en página de inicio y página de sección.
RSS de texto completo
Etiquetas y categorías
Aviso de derechos de autor (se puede establecer el autor y el año)
enlace RSS
Enlace de anclaje de rumbo
Móvil primero y responsivo
SCSS
Optimización de motores de búsqueda
Microdatos
meta descripción
Abrir gráfico
Recuento de páginas por secciones ( /posts/ , /tags/ , etc.)
Personalización
favicon
Estilos (SCSS)
Contenidos (HTML)
Para conocer todas las funciones, consulte hugo.yaml (configuración predeterminada) y exampleSite/hugo.yaml (configuración del sitio de demostración).
Instale Git y la última versión extendida de Hugo.
# Crear sitio webgit init my-websitecd my-website# Instalar el submódulo themegit add --profundidad=1 https://github.com/CyrusYip/hugo-theme-yue themes/hugo-theme-yue git commit --message "agregar tema"# Crear contenido de demostracióncp --recursive themes/hugo-theme-yue/exampleSite/* .# Vista previa del servidor hugo
Ahora tenemos un sitio web de demostración en funcionamiento. El directorio content contiene el contenido y hugo.yaml es el archivo de configuración. Siéntete libre de jugar con ellos.
cd mi-sitio web actualización del submódulo git --remoto
Se recomienda leer CHANGELOG.md antes de actualizar el tema.
Puede suscribirse a las actualizaciones y al registro de cambios en un agregador de feeds (por ejemplo, Inoreader).
Actualizaciones: https://github.com/CyrusYip/hugo-theme-yue/commits/main.atom
Registro de cambios: https://github.com/CyrusYip/hugo-theme-yue/commits/main/CHANGELOG.md.atom
Debe utilizar opciones adicionales al clonar el proyecto de su sitio web.
git clone --recurse-submodules --shallow-submodules [email protected]:tu-nombre-de-usuario/mi-sitio-web.git
Después de configurar el sitio web, probablemente desee alojarlo en Internet. Hay muchos métodos para hacerlo, consulte Alojamiento e implementación | Hugo. Si no sabe qué elegir, puede comenzar desde Netlify, consulte Hospedar en Netlify | Hugo.
Asegúrese de cambiar baseURL a su nombre de dominio (por ejemplo, https://my-cool-domain.org/ ) en hugo.yaml .
-baseURL: https://yue.cyrusyip.org/+baseURL: https://my-cool-domain.org/
Comando de compilación recomendado:
hugo --gc --minificar
--gc elimina los archivos de caché no utilizados y --minify reduce el tamaño del sitio web (principalmente HTML).
Crea una nueva publicación.
hugo new content content/en/posts/my-first-post.md
Para obtener más información sobre el uso, consulte:
Uso básico | hugo
Estructura del directorio | hugo
Las configuraciones se enumeran en exampleSite/hugo.yaml (configuración del sitio de demostración) y hugo.yaml (configuración predeterminada, importada por el primero).
En la raíz del proyecto de su sitio web, hugo.yaml es el archivo de configuración, que es una copia de exampleSite/hugo.yaml.
Para conocer la configuración, consulte Configurar Hugo | Hugo.
Idiomas soportados:
en : inglés
fr : francés
zh-CN : chino simplificado
Para crear un sitio web multilingüe, consulte Modo multilingüe | Hugo y ejemploSite/hugo.yaml.
Los archivos de traducción se encuentran en el directorio i18n y data/i18n.yaml. Se aceptan contribuciones en idiomas adicionales.
Para aportar un nuevo idioma:
Cree un archivo de idioma (por ejemplo, fr.yaml para francés) en el directorio i18n.
Copie el contenido de i18n/en.yaml en el nuevo archivo.
Elimina todos los comentarios ( # ... ) y traduce el contenido.
Traduce también el contenido en data/i18n.yaml.
Si desea seguir contribuyendo a la traducción, puede obtener los últimos cambios suscribiéndose al feed de i18n/en.yaml (https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml .atom) utilizando un lector RSS.
Si su sitio web no está en inglés, probablemente desee personalizar el título de /tags y /categories .
Por ejemplo, para personalizar el título /tags del sitio web zh-CN , cree content/zh-CN/tags/_index.md y agregue el siguiente contenido al archivo.
--- title: Chinese Tags ---
Yue te permite personalizar favicon, estilos (SCSS) y contenidos (HTML).
Favicon es el ícono al lado del título en una pestaña del navegador. Para usar su favicon, coloque favicon.ico en un directorio static . Puedes crear favicon.ico en generadores de favicon.ico en línea.
Yue usa SCSS (libsass) para agregar estilos. Todos los archivos están en activos/scss. Para personalizar estilos, cree assets/scss/_style-start.scss y assets/scss/_style-end.scss .
_style-start.scss se aplica primero y puede anular las variables en este archivo.
$ tamaño de fuente base: 15px;
_style-end.scss se aplica al final y puede agregar estilos en este archivo.
Vanilla CSS también es válido en SCSS.
Referencias:
CSS: Hojas de estilo en cascada | MDN
Sass: Conceptos básicos de Sass
Estructura del directorio | hugo
Puede crear estos archivos para insertar código HTML.
layouts/partials/head/head-start.html
layouts/partials/head/head-end.html
layouts/partials/single/single-end.html
layouts/partials/body/body-end.html
head-start.html se agrega cerca del inicio del elemento <head> .
Casos de uso:
Precargar scripts
Cargar scripts
Cargar estilos
A continuación se muestra un ejemplo de precarga de scripts:
<link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2"><link rel="preload" as="script" href="https: //unpkg.com/@swup/preload-plugin@3"><link rel="preload" as="script" href="https://unpkg.com/swup@4">
head-end.html se agrega al final del elemento <head> .
Casos de uso:
Cargar scripts
Cargar estilos
A continuación se muestra un ejemplo de cómo agregar Google Analytics y un script local:
<!-- Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-F46B15BRUF"></script><script> window.dataLayer = window.dataLayer || []; función gtag(){dataLayer.push(argumentos);} gtag('js', nueva Fecha()); gtag('config', 'G-F46B15BRUF');</script><!-- Script local, ruta: activos/js/my-script.js -->{{ con recursos.Obtener "js/my-script" .js" | js.Build }} <script defer src="{{ .RelPermalink }}"></script>{{ end }} single-end.html se agrega al final del elemento <main> en una publicación.
Casos de uso:
servicios de comentarios, por ejemplo, Disqus y giscus
Aquí hay un ejemplo de cómo agregar Giscus:
{{ $idioma := "" }}
{{- /*
Solución alternativa para LanguagePrefix en minúsculas,
ver https://github.com/gohugoio/hugo/issues/9404
*/ -}}
{{ if eq site.LanguagePrefix "/zh-cn" }}
{{ $idioma = "zh-CN" }}
{{ demás }}
{{ $idioma = "es" }}
{{ end }}<script src="https://giscus.app/client.js" data-repo="CyrusYip/yue-test" data-repo-id="P_9hJMbXtqr" data-category="Datos generales" -category-id="SIB_ldsflk712ldRsjf7" data-mapping="nombre de ruta" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="preferred_color_scheme" data-lang="{{ $idioma }}" crossorigin="anonymous " asíncrono></script>Lista de servicios de comentarios: Comentarios | Hugo.
body-end.html se agrega al final del elemento <body> .
Casos de uso:
Cargar scripts dinámicamente
Para informar errores, envíe un problema. Para hacer preguntas, inicie una discusión.
Hugo tiene muchas características, lea la documentación de Hugo para conocerlas.
Consulte CHANGELOG.md.
Este proyecto utiliza hugo-bin - npm para administrar la versión de Hugo. Requisito previo: Node.js y npm.
Clona este repositorio.
instalación npm npm ejecuta clean:servidor:compartido
Hay otros comandos útiles enumerados en package.json. Para utilizar la versión recomendada de Hugo, ejecute npx hugo .
Si no tiene Node.js y npm instalados, simplemente instale la versión que aparece en package.json.
"hugo-bin": { "buildTags": "extendido", "versión": "x.yyy.z"},CHANGELOG.md debe actualizarse en cada confirmación.
Si está utilizando Yue y el código fuente de su sitio web está alojado en GitHub, puede agregar el tema hugo-theme-yue a su repositorio.
Enlace al tema hugo-theme-yue .
He aprendido mucho de muchos proyectos. Gracias, desarrolladores.
hugo-xmin (plantillas mínimas)
hugo-theme-jane (plantilla RSS)
hugo-theme-zen (selector de idioma)
hugo-tema-gruvbox (color)
gruvbox (color)
hugo-theme-stack (código fuente, documentación y configuración)
hugo-PaperMod (código fuente, documentación y configuración)
Este proyecto tiene licencia del MIT.
