Скачать gridsome portfolio starter gridsome portfolio starter

gridsome portfolio starter

Другие категории

1.0.0

Скачать

Стартер портфолио Gridsome

Проверьте версию Astro здесь: https://github.com/drehimself/astro-portfolio-starter

Простая тема стартового портфеля для GridSome

Скриншот

Демо -URL

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

Функции

Чистый и минимальный дизайн
Tailwind CSS V1 (с Purgecss). Используя этот плагин Gridsome.
Прокрутите в разделах, используя Vue-Scrollto
Блог с контентом Marckdown для сообщений
Тип документации, который показывает, как использовать компоненты VUE в Markdown (нажмите DOCS)
Переключатель темы с темным режимом
Поиск постов с Fuse.js и Vue-Fuse
Теги для сообщений
Основное страдание
Синтаксис подсветка с Shiki (используя этот плагин Gridsome)
404 страница
RSS Feed
Sitemap в XML

Установка

Установите инструмент GridSome CLI, если у вас его нет: npm install --global @gridsome/cli
Clone the Repo: git clone https://github.com/drehimself/gridsome-portfolio-starter.git
cd gridsome-portfolio-starter
npm install (это может быть длинной загрузкой из -за Cypress. Если вы не заботитесь о тестировании с Cypress, удалите его с package.json )
gridsome develop , чтобы запустить локальный сервер Dev по адресу http://localhost:8080

Тестирование

У меня есть несколько основных сквозных тестов с использованием кипариса. Вы можете найти их в /cypress/integration/tests.js .

Чтобы запустить тесты, сначала убедитесь, что ваш Dev Server работает с gridsome develop . Я предполагаю, что вы используете порт по умолчанию 8080. Если нет, измените ключ baseUrl в файле cypress.json .

После того, как ваш Dev Server будет запущен, вы можете запустить npm run test или ./node_modules/.bin/cypress open для запуска Cypress. Приложение Cypress Electr будет работать. Нажмите на файл tests.js , и тесты будут выполняться в автоматическом браузере.

Примечания

Когда Gridsome переходит на Vue 3, я также обновлю это репо. Я также обновлю Tailwind V2, а также другие вкусности Tailwind V2, такие как Dark Mode и JIT.
На основе моего личного веб -сайта портфолио. Я хотел создать версию с открытым исходным кодом с большим количеством функций.
Проверьте экрана, где я прошел процесс создания своего сайта.
Иллюстрации от Undraw
Поиск основан на Fuse.js и Vue-Fuse. На данный момент он только ищет заголовок и резюме постов. Некоторые настройки могут потребоваться, чтобы заставить его искать по вашему вкусу. Проверьте документацию о предохранителе для настройки поиска. Этот пиар добавил возможность поиска как типов «post», так и «документации».
Проверьте эти другие стартовые закуски, где я получил некоторые идеи:
- Стартовый блог Gridsome
- Стартер сетка Бледа
- Стартер -блог Jigsaw - я получил много вдохновения дизайна от этой темы стартера.