Démarreur de portefeuille Gridome
Consultez la version Astro ici: https://github.com/drehimself/astro-portfolio-starter
Un thème de démarrage de portefeuille simple pour Gridome
URL de démonstration
https://gridsome-portfolio-tarter.netlify.com
Caractéristiques
- Conception propre et minimale
- Tailwind CSS V1 (avec Purgecss). Utilisation de ce plugin Gridome.
- Faites défiler vers des sections à l'aide de Vue-Scrollto
- Blog avec le contenu de Markdown pour les publications
- Type de documentation qui montre comment utiliser les composants VUE dans Markdown (cliquez sur Docs)
- Switcher de thème avec mode sombre
- Recherchez les publications avec Fuse.js et Vue-Fuse
- Tags pour les messages
- Pagination de base
- Syntaxe Souvante avec Shiki (en utilisant ce plugin Gridome)
- 404 PAGE
- RSS Feed
- Sitemap en XML
Installation
- Installez l'outil CLI Gridome si vous ne l'avez pas:
npm install --global @gridsome/cli - Clone The Repo:
git clone https://github.com/drehimself/gridsome-portfolio-starter.git -
cd gridsome-portfolio-starter -
npm install (cela peut être un long téléchargement à cause de Cypress. Si vous ne vous souciez pas de tester avec Cypress, supprimez-le de package.json ) -
gridsome develop pour démarrer un serveur de développement local sur http://localhost:8080
Essai
J'ai des tests de base de bout en bout utilisant Cypress. Vous pouvez les trouver dans /cypress/integration/tests.js .
Pour exécuter des tests, assurez-vous d'abord que votre serveur de développement s'exécute avec gridsome develop . Je suppose que vous utilisez le port par défaut du 8080. Sinon, modifiez la touche baseUrl dans le fichier cypress.json .
Une fois votre serveur de développement en cours d'exécution, vous pouvez exécuter npm run test ou ./node_modules/.bin/cypress open to Start Cypress. L'application Cypress Electron fonctionnera. Cliquez sur le fichier tests.js et les tests s'exécuteront dans un navigateur automatisé.
Notes
- Lorsque Gridome passera à Vue 3, je mettrai également à jour ce dépôt. Je mettrai également à jour vers Tailwind V2, ainsi que d'autres goodies V2 Tailwind comme Dark Mode et le JIT.
- Basé sur mon site Web de portfolio personnel. Je voulais créer une version open source avec plus de fonctionnalités.
- Consultez un screencast que j'ai fait où je passe par le processus de construction de mon site Web.
- Illustrations de Undraw
- La recherche est basée sur Fuse.js et Vue-Fuse. Il ne recherche que le titre et le résumé des messages pour l'instant. Certains ajustements peuvent être nécessaires pour le faire chercher à votre goût. Consultez la documentation de fusible pour les paramètres de recherche. Ce PR a ajouté la possibilité de rechercher à la fois les types "Post" et "Documentation".
- Découvrez ces autres démarreurs grisés où j'ai obtenu quelques idées:
- Blog de démarrage Gridome
- Starter Gridome Bleda
- Blog de démarrage de Jigsaw - Je me suis beaucoup inspiré du design de ce thème de démarrage.
Autres versions
- Version Nuxt: https://github.com/drehimself/nuxt-portfolio-starter
- Version de sabre: https://github.com/drehimself/saber-portfolio-starter
