cgartlab.github.io
1.0.0
Screwfast-это шаблон с открытым исходным кодом, предназначенный для быстрой и эффективной настройки веб-проекта, смешивая минимализм с функциональностью . Независимо от того, демонстрируете ли вы портфолио, запускаете целевую страницу компании или запускаете блог, Screwfast предоставляет все необходимое. Объединив силу Astro, Tailwind CSS и Prine UI, этот шаблон предлагает функциональное и эстетически приятное решение для вашего присутствия в Интернете.
Просмотреть живую демонстрацию
Компонент социальной акции :
Компонент кнопки закладки :
localStorage .localStorage на файлы cookie, чтобы упорствовать в закладки.Состав для обратной связи :
Интеграция темы документации Starlight :
Компонент установления значков :
<Icon name="iconName" /> в ваших компонентах Astro.Функция интернационализации (I18N) :
LanguagePicker .monolingual-site . Динамическая таблица содержимого (TOC) с индикатором прогресса прокрутки :
Примечание
В настоящее время нет запланированных улучшений или известных ошибок. Если вы столкнетесь с какими -либо проблемами, сообщите о них на нашей странице «Проблемы» или начните обсуждение, чтобы поделиться идеями, предложениями или задания вопросов.
Это руководство предоставит вам необходимые шаги для настройки и ознакомления с проектом Astro на вашей местной машине разработки.
Чтобы начать, нажмите кнопку Use this template (большой зеленый вверху), чтобы создать собственное репо из этого шаблона в своей учетной записи GitHub.
После создания вашего репозитория вы можете клонировать его на локальную машину, используя следующие команды:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]Начните с установки зависимостей проекта. Откройте свой терминал, перейдите к корневому каталогу проекта и выполните:
npm install Эта команда установит все необходимые зависимости, определенные в файле package.json .
При установленных зависимостях вы можете использовать следующие сценарии NPM для управления жизненным циклом разработки вашего проекта:
npm run dev : запускает локальный сервер разработки с включенным горячим перезагрузкой.npm run preview : FORE FORE TOWER TOWER LOCALL для предварительного просмотра перед развертыванием.npm run build : объединяет ваш сайт в статические файлы для производства.Для получения подробной помощи с командами Astro CLI, посетите документацию Astro.
Перед развертыванием вам нужно создать производственную сборку:
npm run build Это создает dist/ каталог с вашим встроенным сайтом (настраивается через Outdir в Astro).
Нажмите кнопку ниже, чтобы начать развертывание вашего проекта на Vercel:
Нажмите кнопку ниже, чтобы начать развертывание вашего проекта на NetLify:
Scratfast организует модульные компоненты, контент и макеты для оптимизации разработки и управления контентом.
src/
├── assets/
│ ├── scripts/ # JS scripts
│ └── styles/ # CSS styles
├── components/ # Reusable components
│ ├── Meta.astro # Meta component for SEO
│ ├── sections/ # Components for various sections of the website
│ ├── ThemeIcon.astro # Component for toggling light/dark themes
│ └── ui/ # UI components categorized by functionality
├── content/ # Markdown files for blog posts, insights, products, and site configuration
│ ├── blog/
│ ├── docs/
│ ├── insights/
│ ├── products/
│ └── config.ts # Contains site-wide configuration options
├── data_files/ # Strings stored as JSON files
├── images/ # Static image assets for use across the website
├── layouts/ # Components defining layout templates
│ └── MainLayout.astro # The main wrapping layout for all pages
├── pages/ # Astro files representing individual pages and website sections
│ ├── 404.astro # Custom 404 page
│ ├── blog/
│ ├── fr/ # Localized content
│ ├── contact.astro
│ ├── index.astro # The landing/home page
│ ├── insights/
│ ├── products/
│ ├── robots.txt.ts # Dynamically generates robots.txt
│ └── services.astro
└── utils/ # Shared utility functions and helpers
Статические файлы, поданные непосредственно в браузер, находятся в public каталоге в корне проекта.
public/
└── banner-pattern.svg
Screnfast позволяет легко настройку в соответствии с вашими конкретными потребностями. Вот несколько способов настроить компоненты и контент:
Некоторые компоненты имеют свойства, определенные как переменные TypeScript в файле компонентов. Вот пример настройки FeaturesGeneral компонента:
// Define the string variables title and subTitle for the main heading and sub-heading text.
const title : string = "Meeting Industry Demands" ;
const subTitle : string =
"At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors." ;Для коллекций контента, таких как отзывы или статистика, отредактируйте соответствующий массив объектов:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;Измените контент в этих массивах, чтобы отразить ваши данные.
Вы можете передавать значения непосредственно в файлах страницы для компонентов, используемых на страницах. Вот пример компонента HeroSection и ClientsSection с встроенными реквизитами:
< HeroSection
subTitle =" Top-quality hardware tools and expert construction services for every project need. "
primaryBtn =" Start Exploring "
primaryBtnURL =" /explore "
/>
< ClientsSection
title =" Trusted by Industry Leaders "
subTitle =" Experience the reliability chosen by industry giants. "
/> Отредактируйте реквизиты, такие как title , subTitle , primaryBtn и т. Д., Чтобы персонализировать эти разделы. Убедитесь, что вы поддерживаете структуру и типы данных реквизита.
Редактировать файл navigation.ts в каталоге utils для управления навигационной панелью и ссылками нижнего колонтитула:
Отредактируйте массив navBarLinks для настройки ссылок на навигационные панели:
// An array of links for the navigation bar
export const navBarLinks : NavLink [ ] = [
{ name : "Home" , url : "/" } ,
{ name : "Products" , url : "/products" } ,
{ name : "Services" , url : "/services" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Contact" , url : "/contact" } ,
] ; Замените name на дисплей и url на подходящий путь к страницам на вашем сайте.
Аналогично, отрегулируйте ссылки, отображаемые в нижнем колонтитуле, редактируя массив footerLinks :
// An array of links for the footer
export const footerLinks : FooterLinkSection [ ] = [
{
section : "Product" ,
links : [
{ name : "Tools & Equipment" , url : "/tools-equipment" } ,
{ name : "Construction Services" , url : "/construction-services" } ,
{ name : "Pricing" , url : "/pricing" } ,
] ,
} ,
{
section : "Company" ,
links : [
{ name : "About us" , url : "/about" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Careers" , url : "/careers" } ,
{ name : "Customers" , url : "/customers" } ,
] ,
} ,
] ; Каждый раздел в массиве footerLinks представляет группу ссылок. Обновите значение section для заголовка группы и измените name и url каждой ссылки по мере необходимости.
Замените URL -адреса заполнителя в socialLinks , которые возражают на ваши профили социальных сетей:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; Примечание
Не забудьте добавить полные и действительные URL -адреса для навигации, чтобы функционировать должным образом. Эти настройки будут отражаться на протяжении всего вашего сайта Astro, способствуя последовательности на всех страницах.
У нас есть два варианта для компонентов навигационного бара: Navbar.astro для регулярного Navbar и NavbarMegaMenu.astro для мега -меню. Оба расположены в src/components/sections/navbar&footer .
Компоненты Navbar.astro и NavbarMegaMenu.astro могут быть настроены в MainLayout.astro , что позволяет вам выбрать стиль навигации, который наилучшим образом соответствует вашему проекту. Чтобы настроить эти компоненты, вы можете изменить их непосредственно под src/components/sections/navbar&footer для применения конкретных конфигураций или обновлений проектирования.
Screwfast теперь оснащен Starlight, предназначенным для повышения пользовательского опыта с документацией. Эта современная и элегантная тема включает в себя набор функций, чтобы сделать контент более доступным и приятным для навигации.
Ключевые функции:
С Starlight вы получаете доступ к мощным функциям и интеграциям, а также обширные варианты настройки в соответствии с вашими потребностями.
Примечание
Погрузитесь в всеобъемлющий список функций Starlight и узнайте, как он может упростить ваш процесс разработки, посетив сайт документации темы.
Важный
Если боковая панель на вашем сайте Starlight не прокручивается, и вам нужно вручную перетащить прокручивание, удалите тег скрипта, связанный с библиотекой плавного прокрутки Lenis из src/components/ui/starlight/Head.astro .
Испытайте маслянистую гладкую прокрутку с ленисом. Мы интегрировали Lenis, чтобы обеспечить улучшенный опыт прокрутки, который является как плавным, так и отзывчивым.
Вот как мы настроили Lenis в src/assets/scripts/lenisSmoothScroll.js :
// src/assets/scripts/lenisSmoothScroll.js
import "@styles/lenis.css" ;
import Lenis from "lenis" ;
const lenis = new Lenis ( ) ;
function raf ( time ) {
lenis . raf ( time ) ;
requestAnimationFrame ( raf ) ;
}
requestAnimationFrame ( raf ) ; А затем добавьте его в MainLayout.astro :
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >Обратите внимание, что плавная прокрутка может повлиять на доступность и производительность на некоторых устройствах, поэтому обязательно проверьте его всесторонне в разных средах.
Примечание
Если вы хотите удалить Lenis и вернуться в поведение прокрутки по умолчанию браузера, просто прокомментируйте или удалите эти строки из файла MainLayout.astro и /starlight/Head.astro , если вы используете документы.
Для отдельных страниц продукта GSAP был интегрирован для добавления привлекательных анимаций, которые выполняются, как только страница продукта загружается. Вы можете найти и изменить конфигурацию GSAP в разделах сценария файла страницы продукта, расположенного по адресу src/pages/products/[...slug].astro и страницы Insights по адресу src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >Настройка анимации:
Пожалуйста, адаптируйте анимации GSAP в этом сценарии, чтобы соответствовать внешнему виду вашего проекта. Предоставляемый пример является отправной точкой, представляющая, как использовать GSAP для немедленного визуального воздействия при загрузке страницы продукта.
Изменение или удаление анимации:
gsap.from() или добавьте новые вызовы анимации GSAP по мере необходимости.Примечание
Мы решили сохранить интеграцию худой и сфокусированной, но комплексная документация GSAP может быть направлена на более сложную анимацию: документацию GSAP.
Чтобы достичь более чистого и просторного дизайна, прокрутка по умолчанию была визуально удалена. Хотя этот выбор соответствует эстетическим целям проекта, важно учитывать, что скрытие полос прокрутки может иногда повлиять на доступность и пользовательский опыт. Мы рекомендуем оценить это решение о дизайне в контексте вашей пользовательской базы и их потребностей.
Для тех, кто предпочитает прокрутки на заказ, мы предлагаем использовать плагин Tailld-Scrollbar, который добавляет утилиты CSS Taillid для стилей прокрутки, что позволяет обеспечить более контролируемую настройку, которая также может соответствовать стандартам доступности.
Примечание
Если вы хотите вернуть Scrollbar по умолчанию, вы можете прокомментировать или удалить следующие CSS из src/layouts/MainLayout.astro :
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > Кроме того, обновите тег <html> для удаления класса scrollbar-hide , что привело к:
< html lang =" en " class =" scroll-pt-16 " >Конфигурация SEO в шаблоне винтиста предназначена для того, чтобы дать пользователям оптимизировать видимость своего веб -сайта в поисковых системах и платформах социальных сетей. В этой документации изложены данные о реализации и инструкции по использованию для эффективного управления настройками SEO.
Конфигурация SEO была централизована с использованием файла constants.ts . Этот файл управляет данными, связанными с SEO, такими как заголовки страниц, описания, структурированные данные и теги открытия графика, обеспечивая более структурированный и управляемый подход к управлению SEO.
Чтобы настроить настройки SEO, измените значения в файле constants.ts . Ключевые конфигурации включают сайт, SEO и OG, позволяющие разработчикам определять параметры SEO по всему сайту.
// constants.ts
export const SITE = {
title : " ScrewFast " ,
// Other SITE properties...
} ;
export const SEO = {
title : SITE . title ,
// Other SEO properties...
} ;
export const OG = {
title : ` ${ SITE . title }: Hardware Tools & Construction Services ` ,
// Other OG properties...
} ; При применении метаданных в рамках ваших макетов, таких как MainLayout.astro , вы можете передать желаемые значения метаданных в качестве реквизита Meta -компоненту:
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />Для переопределения SEO, специфичных для страницы, разработчики могут передавать отдельные свойства схемы в определенных файлах страниц.
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
С помощью этой настройки мета -компонент получает пользовательское мета -описание и применяет его к метаданным страницы. Если вместо этого будет использоваться не настраиваемое значение, вместо этого будет использоваться дефолт из Meta.astro .
Для более надежной стратегии SEO вы можете создать дополнительные свойства в компоненте Meta.astro . Например, вы можете включить конкретные теги Open Graph для дат публикации статьи или тегов для метаданных для специфичных для Twitter.
Структурированные данные в формате JSON-LD могут управляться компонентом Meta.astro , улучшая то, как поисковые системы понимают содержание вашей страницы и потенциально улучшая результаты поиска с помощью богатых фрагментов. Измените свойство structuredData с соответствующими типами и свойствами Schema.org:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>В то время как шаблон предоставляет пользовательское решение SEO, вы можете использовать интеграцию Astro, такую как Astro SEO, для дополнительных функций и оптимизации SEO. Интеграция такого пакета может обеспечить более автоматическое управление метаданным и дополнительную функциональность, ориентированную на SEO.
robots.txt динамически генерируется с использованием кода, найденного в src/pages/robots.txt.ts. Эта конфигурация следует примеру из Astro Docs:
import type { APIRoute } from 'astro' ;
const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${ new URL ( 'sitemap-index.xml' , import . meta . env . SITE ) . href }
` . trim ( ) ;
export const GET : APIRoute = ( ) => {
return new Response ( robotsTxt , {
headers : {
'Content-Type' : 'text/plain; charset=utf-8' ,
} ,
} ) ;
} ; Добавление файла .vscode/settings.json Эта функция обеспечивает легкое создание ссылок Markdown с медиа -файлами и бесшовным копированием в рабочее пространство.
() .src/images/content/<path> . Вставка getting-started.png src/content/post-1.md
 в post-1.md .src/images/content/post-1/getting-started.png . Примечание
Не забудьте нажать сдвиг , когда сбрасывая изображения.
Максимизируйте эффективность вашего сайта с помощью этих встроенных интеграций Astro:
astro.config.mjs : export default defineConfig ( {
// ...other Astro configurations
integrations : [ ... other Astro integrations , compressor ( { gzip : false , brotli : true } ) ] ,
} ) ;astro.config.mjs : export default defineConfig ( {
// ...
site : 'https://example.com' ,
integrations : [ sitemap ( ) ] ,
} ) ;Самое замечательное в Astro - его богатая экосистема интеграции, позволяющая вам адаптировать функциональные возможности проекта к вашим точным потребностям. Не стесняйтесь исследовать страницу Introgation Integrations и добавлять дополнительные возможности, как вы считаете нужным.
Этот проект построен с использованием различных инструментов и технологий, которые повышают его производительность, обслуживание и опыт разработчиков. Ниже приведен список ключевых инструментов и их роли в проекте:
Интерактивные компоненты, такие как Navbars, модалы и аккордеоны, создаются с использованием пользовательского интерфейса PRELINE, комплексной библиотеки компонентов с открытым исходным кодом.
Стилирование в нашем проекте использует полевые классы, предлагаемые Tailwind CSS. Эта методология позволяет нам создавать пользовательские макеты и компоненты со скоростью и эффективностью.
Чтобы обеспечить согласованное форматирование кода, особенно для сортировки класса, мы интегрировали плагин prettier-plugin-tailwindcss . Следующая конфигурация установлена в файле .prettierrc в корне проекта:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} Мы развертываем наш проект на Vercel, используя их надежную платформу для бесшовных рабочих процессов CI/CD. Используя vercel.json , мы устанавливаем строгие заголовки безопасности и политики кэширования, обеспечивая соблюдение лучших практик безопасности и производительности:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} Для оптимальной производительности сайта мы после обработки наших HTML-файлов с помощью process-html.mjs , пользовательского скрипта, который миниацирует HTML после фазы сборки, чтобы уменьшить размер файла и улучшить время загрузки.
Вот фрагмент из нашего сценария минификации HTML в process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;Мы призываем вас обратиться к подробной документации для каждого инструмента, чтобы полностью понять их возможности и то, как они вносят свой вклад в проект:
Если вы заинтересованы в помощи, вы можете внести свой вклад несколькими способами:
Этот проект выпущен по лицензии MIT. Пожалуйста, прочитайте файл лицензии для получения более подробной информации.
Примечание. Этот шаблон веб -сайта не имеет отношения к отображаемым компаниям. Логотипы используются только в демонстрационных целях и должны быть заменены в индивидуальных версиях.
