Actualmente estoy empezando a trabajar con hugo SSG. Mi objetivo es tener una aplicación confiable pero sin complicaciones para centralizar algunos componentes en proyectos de sitios web html, css, js que de otro modo serían vanidosos. Quiero utilizar hugo para mantener el encabezado, el encabezado y el pie de página para mí.
Ahora migré todo el html y css de mi proyecto actual a hugo, que funcionó bien. Son páginas de destino promedio con encabezado/pie de página y un par de secciones. Sin embargo, parece que no puedo incluir mis archivos Javascript.
Comencé con dos primeros scripts para probar la configuración, uno navBar.js y un headerShadow.js (trucos de interfaz de usuario simples).
Incluí esos dos archivos en {projectName}/themes/{themeName}/layouts/partials partials en footer.html con las siguientes etiquetas:
<script defer language="javascript" type="text/javascript" src="{{ "/js/navBar.js" | urlize | relURL }}"></script> <script defer language="javascript" type="text/javascript" src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>Primera pregunta: ¿Es esa la mejor práctica? Encontré esto en otra publicación en stackoverflow, que no puedo reproducir.
Segunda pregunta: mi código de Visual Studio ya marca exactamente la parte /js/navBar.js" en ambas etiquetas como defectuosa. ¿Qué estoy haciendo mal aquí?
Lo intenté:
<script src="js/headerShadow.js"></script>¡Estaría muy agradecido por el consejo de alguien con más experiencia con hugo!
Muchas gracias por adelantado :)
Sugeriría usar tuberías y activos hugo como mejores prácticas. En los documentos debajo de:
GESTIÓN DE ACTIVOS
Construcción de JavaScript
https://gohugo.io/hugo-pipes/js/
Da la sintaxis exacta y qué hacer, así que no me molestaré en copiarlo y pegarlo aquí. Esto incluye Tree Shaking, minify, etc. etc. Cosas que son "mejores prácticas".
Sugeriría de las opciones (como importar desde sus node_modules o etc.) que simplemente mantenga su JS en la carpeta de activos para simplificar y use esa opción en los documentos anteriores.
Específicamente: https://gohugo.io/hugo-pipes/js/#import-js-code-from-assets
Esto sería, en mi opinión, para un sitio simple, la mejor práctica.
Si no desea usar Hugo Pipes (es un poco avanzado para lo que necesita), aquí hay una forma simple de abordarlo que funcionó bien en mi proyecto.
<script src="{{ .Site.BaseURL }}js/navBar.js"></script>
En desarrollo (comando de hugo server ), .Site.BaseURL se anulará a http://localhost:1313/ . En producción (comando hugo ) será el valor de baseURL en config.toml , como https://www.example.com/ .
Los archivos en el directorio static están integrados en la raíz de su sitio, por lo que el archivo estaría ubicado en http://localhost:1313/js/navBar.js . Es por eso que creo que la ruta relativa no funciona.
Si eso no funciona, es probable que haya algún otro problema en su proyecto que deba solucionarse, o intente borrar el caché de su navegador.