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