gridsome portfolio starter - Código fuente gridsome portfolio starter descarga

gridsome portfolio starter

Otras categorias

1.0.0

Descargar

Entrante de la cartera

Echa un vistazo a la versión Astro aquí: https://github.com/drehimself/astro-portfolio-starter

Un tema de inicio de cartera simple para Gidsome

captura de pantalla

URL de demostración

https://gridsome-portfolio-starter.netlify.com

Características

Diseño limpio y mínimo
Valor de cola CSS V1 (con purgecss). Usando este complemento de cuadrícula.
Desplácese a secciones usando Vue-Scrollto
Blog con contenido de Markdown para publicaciones
Tipo de documentación que muestra cómo usar componentes VUE en Markdown (haga clic en documentos)
Conmutador de tema con modo oscuro
Publicaciones de búsqueda con Fuse.js y Vue-Fuse
Etiquetas para publicaciones
Paginación básica
Destacación de sintaxis con shiki (usando este complemento de cuadrícula)
404 página
Alimento RSS
Mapa del sitio en XML

Instalación

Instale la herramienta de CLI de la cuadrícula si no la tiene: npm install --global @gridsome/cli
Clon the Repo: git clone https://github.com/drehimself/gridsome-portfolio-starter.git
cd gridsome-portfolio-starter
npm install (esta puede ser una descarga larga debido a Cypress. Si no le importa probar con Cypress, elimínelo de package.json )
gridsome develop para iniciar un servidor de desarrollo local en http://localhost:8080

Pruebas

Tengo algunas pruebas básicas de extremo a extremo usando Cypress. Puede encontrarlos en /cypress/integration/tests.js .

Para ejecutar pruebas, primero asegúrese de que su servidor de desarrollo se esté ejecutando con gridsome develop . Supongo que está utilizando el puerto predeterminado de 8080. Si no, cambie la tecla baseUrl en el archivo cypress.json .

Después de que su servidor de desarrollo se ejecute, puede ejecutar npm run test o ./node_modules/.bin/cypress open para iniciar Cypress. La aplicación Cypress Electron se ejecutará. Haga clic en el archivo tests.js y las pruebas se ejecutarán en un navegador automatizado.

Notas

Cuando Gridsome se mueva a Vue 3, también actualizaré este repositorio. También actualizaré a Tailwind V2, junto con otras golosinas V2 V2 como Dark Mode y el JIT.
Basado en el sitio web de mi cartera personal. Quería crear una versión de código abierto con más funciones.
Echa un vistazo a un screencast que hice donde pasé por el proceso de construcción de mi sitio web.
Ilustraciones de Undraw
La búsqueda se basa en Fuse.js y Vue-Fuse. Solo busca el título y el resumen de las publicaciones por ahora. Es posible que sean necesarios algunos ajustes para que busque en su gusto. Consulte la documentación del fusible para la configuración de búsqueda. Este PR agregó la capacidad de buscar tipos de "publicación" y "documentación".
Echa un vistazo a estos otros entrantes de la cuadrícula donde obtuve algunas ideas:
- Blog de inicio
- En la parrilla BLEDA
- Blog de inicio de Jigsaw: obtuve mucha inspiración de diseño de este tema de inicio.