Mi archivo de diseño se ve así:
{{ define "main" }} ... {{ end }} Y mi base_of.html se parece a:
<!DOCTYPE html> <html lang="{{ site.LanguageCode | default `en-US` }}"> ... </head> <body> ... <!-- cache partial only in production --> {{ if hugo.IsProduction }} {{ partialCached "script.html" . }} {{ partialCached "footer.html" . }} {{ else }} {{ partial "script.html" . }} {{ partial "footer.html" . }} {{ end }} </body> </html>En el archivo scripts.html, cargo los archivos JS que usarán todas las páginas. Sin embargo, en una página de diseño específica, quiero cargar un archivo JS adicional, pero debe cargarse después de que se hayan cargado todos mis otros archivos JS en todo el sitio.
Desde dentro del alcance de la página de diseño, parece que no puedo establecer una variable booleana a la que pueda hacer referencia el scripts.html parcial, para que sepa cargar ese script adicional.
¿Hay alguna manera de hacer esto con Hugo?
Una de las posibilidades de cómo lograr esto es especificando otro bloque al lado del main en su archivo de diseño. Puede tener tantos bloques definidos como desee y luego simplemente los renderizará en otros archivos mediante la declaración del bloque.
{{ define "main" }} ... {{ end }} {{ define "scripts" }} <script src="/js/layout.special.js"></script> {{ end }}Luego, en su baseof.html, simplemente agregue este código después de sus scripts principales para representar el bloque:
{{ block "scripts" . }}{{ end }}Otra forma de resolver este problema es probar el tipo de página usando una declaración if simple como se muestra en el código a continuación. Esto se puede hacer como una subcondición en aquellas condiciones que ya tiene en el archivo, o como una nueva condición separada después. Depende de tu caso y objetivo.
<!-- cache partial only in production --> {{ if hugo.IsProduction }} {{ partialCached "script.html" . }} {{ partialCached "footer.html" . }} {{ if eq .Type "layout-name" }} {{ partialCached "script.layout-name.html" . }} {{ end }} {{ else }} {{ partial "script.html" . }} {{ partial "footer.html" . }} {{ if eq .Type "layout-name" }} {{ partial "script.layout-name.html" . }} {{ end }} {{ end }}Tenga en cuenta que, en este caso, debe asegurarse de que la página tenga el tipo especificado. Hay dos posibilidades de cómo hacer esto:
type de variable de página predefinido en el frente de sus archivos de contenido, o El valor predeterminado de la variable .Type es página .
De muchas maneras en realidad.
Podrías tener un "alternar" de materia preliminar
es decir, digamos que tiene un parallax.js que solo desea cargar en ciertas páginas. Al frente: "parallax: true" En tu base de puedes hacer:
{{ if .Params.parallax }} <script html here> Or via partial (why did you load your scripts via a partial?). {{ end }}No tengo acceso a su repositorio, así que me estoy quedando ciego aquí, así que: también podría tener ese diseño de silos (es decir, digamos que tiene /content/about-us/)
Y en diseños pones /layout/sobre-nosotros/
En ellos tienes tus archivos individuales y de lista y define tus bloques.
Ver aquí para ejemplos:
plantillas como usar
plantilla de una sola página
plantilla de página de lista
Y simplemente cargue los scripts que desee para ese silo.
También podría en su JS simplemente poner una declaración "si" para ver si una clase específica está en ese archivo (no lo sugeriría, pero podría hacerlo).
Entonces, digamos que tenía un carrusel en páginas específicas y tenía una clase de "mi-excelente-carrusel", luego hace la declaración if en el JS.
Esas son algunas maneras.
Hazme saber si tienes alguna pregunta.
Además, mire los documentos de Hugo.
Específicamente: https://gohugo.io/templates/base/
Los bloques son buenos, es posible que los estés usando, pero no puedo decirlo.
También siempre sugiero mirar otros temas para que pueda aprender las formas de hacer esto. Hay un montón, pero estás seguro comenzando con BEP (siendo el principal mantenedor de Hugo) https://github.com/bep/docuapi