Me gustaría agregar swiper para hacer un control deslizante para mi proyecto de prueba, que se basa en hugo framework. Desafortunadamente, no funciona correctamente. Aquí están mis proyectos de github: https://github.com/bullet03/carousel_site
Qué he hecho:
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <!-- Swiper JS --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", {}); </script>Mi css no se carga, no hay error, es como si no hubiera swiper ni estilos. ¿Podría amablemente, señalar, cómo solucionarlo?
Cuando cloné su repositorio e intenté mostrar la página, no se puede mostrar porque no hay un archivo single.html en su directorio layouts/_default . Hugo utiliza este archivo para representar páginas individuales como su a.md (no es una página de inicio ni una página de lista ).
Cree un layouts/_default/single.html y coloque este contenido en él:
{{ define "main" }} <!-- Place the content for single pages here, it will be rendered in a place where you'll add {{ block "main" . }}{{ end }}. Adding the block to your baseof.html is not necessary to achieve what you want to achieve (display the swiper). --> {{ end }}No necesita agregar ningún contenido allí a menos que lo desee, solo asegúrese de que el archivo exista y que se defina un bloque dentro de él.
Para obtener más información, consulte Orden de búsqueda de plantillas .