gridsome portfolio starter

網格組合的首發

在此處查看Astro版本：https：//github.com/drehimself/astro--portfolio-starter

一個簡單的投資組合入門主題

演示網址

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

特徵

• 乾淨的設計
• 尾風CSS V1（帶有珀格斯）。使用此網格插件。
• 使用Vue-Scrollto滾動到部分
• 博客，帖子銷售內容
• 文檔類型顯示瞭如何在Markdown中使用VUE組件（單擊文檔）
• 帶有黑暗模式的主題切換器
• 使用Fuse.js和Vue-Fuse搜索文章
• 帖子的標籤
• 基本分頁
• 語法用Shiki突出顯示（使用此網格插件）
• 404頁
• RSS提要
• XML中的站點地圖

安裝

1. 如果沒有它，請安裝網格CLI工具： npm install --global @gridsome/cli
2. 克隆回購： git clone https://github.com/drehimself/gridsome-portfolio-starter.git
3. cd gridsome-portfolio-starter
4. npm install package.json由於賽普拉斯的下載可能很長。
5. gridsome develop以在http://localhost:8080啟動本地開發服務器

測試

我使用柏樹有一些基本的端到端測試。您可以在/cypress/integration/tests.js中找到它們。

要運行測試，請首先確保您的開發服務器隨著gridsome develop運行。我假設您使用的是8080的默認端口。如果沒有，請更改cypress.json文件中的baseUrl鍵。

開發服務器運行後，您可以運行npm run test或./node_modules/.bin/cypress open以啟動Cypress。柏樹電子應用將運行。單擊tests.js文件，測試將在自動瀏覽器中運行。

筆記

• 當網格轉移到VUE 3時，我也會更新此存儲庫。我還將更新到Tailwind V2，以及其他尾風V2好處，例如Dark Mode和The Jit。
• 基於我的個人投資組合網站。我想創建一個具有更多功能的開源版本。
• 查看我在構建網站的過程中所做的屏幕截圖。
• Undraw的插圖
• 搜索基於Fuse.js和Vue-Fuse。它僅搜索現在的帖子標題和摘要。可能需要進行一些調整才能使其搜索您的喜好。查看保險絲文檔以獲取搜索設置。該公關增加了搜索“發布”和“文檔”類型的能力。
• 查看這些其他網格的起動器，我從中獲得了一些想法：
  • 網格入門博客
  • 網格啟動器布雷達
  • Jigsaw Starter博客 - 我從這個入門主題中獲得了很多設計靈感。

其他版本

• NUXT版本：https：//github.com/drehimself/nuxt-portfolio-starter
• Saber版本：https：//github.com/drehimself/saber-portfolio-starter