gridsome portfolio starter

グリッドソームポートフォリオスターター

astroバージョンはこちらをご覧ください：https：//github.com/drehim self/astro-portfolio-starter

Gridsomeのシンプルなポートフォリオスターターテーマ

デモURL

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

特徴

• 清潔で最小限のデザイン
• Tailwind CSS V1（Purgecssを使用）。このGridsomeプラグインを使用します。
• Vue-scrolltoを使用してセクションまでスクロールします
• 投稿のマークダウンコンテンツを含むブログ
• マークダウンでVueコンポーネントを使用する方法を示すドキュメントタイプ（ドキュメントをクリック）
• ダークモードのテーマスイッチャー
• fuse.jsとvue-fuseで投稿を検索します
• 投稿のタグ
• 基本的なページネーション
• Shikiで強調表示される構文（このグリッドソームプラグインを使用）
• 404ページ
• RSSフィード
• XMLのサイトマップ

インストール

1. Gridsome 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でそれらを見つけることができます。

テストを実行するには、最初にDEVサーバーがgridsome developで実行されていることを確認してください。 8080のデフォルトポートを使用していると仮定しています。そうでない場合は、 cypress.jsonファイルのbaseUrlキーを変更します。

開発サーバーの実行後、 npm run testまたは./node_modules/.bin/cypress openて開始することができます。サイプレス電子アプリが実行されます。 tests.jsファイルをクリックすると、テストは自動ブラウザーで実行されます。

メモ

• GridsomeがVue 3に移動したら、このレポを更新します。また、ダークモードやJITなどの他のTailwind V2グッズとともに、Tailwind V2に更新します。
• 私の個人ポートフォリオのウェブサイトに基づいています。より多くの機能を備えたオープンソースバージョンを作成したかったのです。
• 私が自分のウェブサイトを構築するプロセスを経験した場所で行ったスクリーンキャストをチェックしてください。
• UNDRAWのイラスト
• 検索は、fuse.jsとvue-fuseに基づいています。今のところ、投稿のタイトルと要約のみを検索します。あなたの好みに合わせて検索するために、いくつかの調整が必要になる場合があります。検索設定のヒューズドキュメントをご覧ください。このPRは、「投稿」と「ドキュメント」タイプの両方を検索する機能を追加しました。
• 私がいくつかのアイデアを得たこれらの他のグリッドサムスターターをチェックしてください：
  • Gridsome Starterブログ
  • グリッドサムスターターブレダ
  • Jigsaw Starterブログ - このスターターテーマから多くのデザインのインスピレーションを得ました。

他のバージョン

• nuxtバージョン：https：//github.com/drehim self/nuxt-portfolio-starter
• セイバーバージョン：https：//github.com/drehim self/saber-portfolio-starter