gridsome portfolio starter

Gridsome Portfolio Starter

Schauen Sie sich die Astro-Version hier an: https://github.com/dehimself/astro-portfoliostarter

Ein einfaches Portfolio -Starterthema für Gridsome

Demo -URL

https://gridsome-portfoliostarter.netlify.com

Merkmale

• Sauberes und minimales Design
• Rückenwind CSS V1 (mit Purgecss). Verwenden Sie dieses Raster -Plugin.
• Scrollen Sie mit Vue-Scrollto zu Abschnitten
• Blog mit Markdown -Inhalten für Beiträge
• Dokumentationstyp, mit dem angezeigt wird, wie VUE -Komponenten in Markdown verwendet werden (klicken Sie auf DOCS).
• Themenschalter mit dunklem Modus
• Suchen Sie Beiträge mit Fuse.js und Vue-Fuse
• Tags für Beiträge
• Grundpaginierung
• Syntax -Hervorhebung mit Shiki (mit diesem Gitter -Plugin)
• 404 Seite
• RSS -Feed
• Sitemap in XML

Installation

1. npm install --global @gridsome/cli
2. Klon The Repo: git clone https://github.com/drehimself/gridsome-portfolio-starter.git
3. cd gridsome-portfolio-starter
4. npm install (dies kann ein langer Download aufgrund von Zypressen sein. Wenn Sie sich nicht mit Cypress testen, entfernen Sie ihn von package.json ).
5. gridsome develop , um einen lokalen Entwicklerserver unter http://localhost:8080 zu starten

Testen

Ich habe einige grundlegende End-to-End-Tests mit Cypress. Sie finden sie in /cypress/integration/tests.js .

Um Tests auszuführen, stellen Sie zunächst sicher, dass Ihr Dev -Server mit gridsome develop wird. Ich gehe davon aus, dass Sie den Standardport von 8080 verwenden. Wenn nicht, ändern Sie den baseUrl -Schlüssel in der Datei cypress.json .

Nachdem Ihr Dev -Server ausgeführt wurde, können Sie npm run test ausführen oder ./node_modules/.bin/cypress open Die Cypress Electron App wird ausgeführt. Klicken Sie auf die Datei tests.js und die Tests werden in einem automatisierten Browser ausgeführt.

Notizen

• Wenn Gridsome zu Vue 3 wechselt, werde ich dieses Repo auch aktualisieren. Ich werde auch auf Tailwind V2 aktualisieren, zusammen mit anderen Tailwind V2 -Leckereien wie Dark Modus und der JIT.
• Basierend auf meiner persönlichen Portfolio -Website. Ich wollte eine Open -Source -Version mit weiteren Funktionen erstellen.
• Schauen Sie sich einen Screencast an, den ich gemacht habe, wo ich den Prozess des Erstellens meiner Website durchführe.
• Illustrationen von undtraw
• Die Suche basiert auf Fuse.js und Vue-Fuse. Es durchsucht nur den Titel und die Zusammenfassung der Beiträge vorerst. Möglicherweise müssen einige Optimierungen erforderlich sein, um es nach Ihren Wünschen zu suchen. In der Sicherungsdokumentation finden Sie die Sucheinstellungen. Diese PR fügte die Möglichkeit hinzu, sowohl "Post "- als auch" Dokumentations "-Typen zu durchsuchen.
• Schauen Sie sich diese anderen Gitterstarter an, bei denen ich einige Ideen erhalten habe:
  • Gridsome Starter Blog
  • Gitterstarter Bleda
  • Jigsaw Starter Blog - Ich habe viel Design -Inspiration von diesem Starter -Thema erhalten.

Andere Versionen

• Nuxt Version: https://github.com/dehimself/nuxt-portfoliostarter
• SABER-Version: https://github.com/dehimself/saber-portfoliostarter