בניית שקופיות תוכן מותאם אישית עבור עדויות באמצעות REST JavaScript נותן לך שליטה מלאה על עיצוב, התנהגות וביצועים.בניגוד לתוספים שנוצרו מראש, שקופיות קוד יד משתלבת בצורה חלקה עם כל CMS, כולל Directus, וניתן להתאים את זה כדי להתאים את המפרט המדויק של המותג שלך. מאמר זה הולך באמצעות יצירת שקופיות ניסיונית מייצור, כיסוי HTML, CSS, מעבר ישיר, ביקורתי, ביקורתי של נתונים ישירות, לוגיקה, ו- JavaScript.

תכנון מבנה HTML

מגרפית עדות מורכבת מכולה ומ שקופיות בודדות.כל שקופיות מחזיקות את הציטוט, שם הלקוח, ו metadata אופציונלי כגון כותרת או לוגו החברה.

<div id="testimonial-slider" class="slider">
 <div class="slide active">
 <blockquote>
 <p>“Great service that delivered exactly what we needed.”</p>
 <footer>— Jane Doe, CEO of Example Inc.</footer>
 </blockquote>
 </div>
 <div class="slide">
 <blockquote>
 <p>“Their team was responsive and professional from start to finish.”</p>
 <footer>— John Smith, Founder of Acme Corp.</footer>
 </blockquote>
 </div>
 <div class="slide">
 <blockquote>
 <p>“We saw a measurable improvement in user engagement after the redesign.”</p>
 <footer>— Emily Chen, CTO of WebTech</footer>
 </blockquote>
 </div>
</div>

כל שקופיות עוטפות אלמנט 1 עבור נכונות סמנטית וגישה טובה יותר.המחלקה (FLT:2) קובעת כי השקופית גלויה כיום.מבנה זה יכול להיות קודר קשה או טוב יותר, שנוצר באופן דינמי מהנתונים שנלקחו באמצעות JavaScript.

עקבו אחרי CSS

CSS נקי, מודרני מבטיח השקופית נראית מלוטשת ומתבצעת היטב. השתמש ב- 3 על מיכל ולשלוט שקופיות עם איכויות ושינויים.

.slider {
 position: relative;
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
 overflow: hidden;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.slide {
 display: none;
 padding: 2rem;
 background: #f9f9f9;
 transition: opacity 0.5s ease-in-out;
}

.slide.active {
 display: block;
}

blockquote {
 margin: 0;
 padding: 0;
 font-style: italic;
 line-height: 1.6;
}

blockquote footer {
 margin-top: 0.75rem;
 font-style: normal;
 font-weight: 600;
 color: #333;
}

.slider-nav {
 display: flex;
 justify-content: center;
 gap: 0.5rem;
 margin-top: 1rem;
}

.slider-nav button {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 border: 2px solid #007acc;
 background: transparent;
 cursor: pointer;
 transition: background 0.3s;
}

.slider-nav button.active-dot {
 background: #007acc;
}

באמצעות ההרחבה:5 (FLT:5) עם מעדפי כיתה הוא פשוט אבל חסר מעברים חלק בין שקופיות. עבור מקטעי ייצור, לשקול שימוש ב- CSS הופך או מיקום מוחלט כדי להשיג צלב או שקופיות.הגישה לעיל פועלת היטב עבור התקנה מינימלית.

תפקוד JavaScript

מנוע JavaScript מצליח להחליק על אופניים, ניווט דוט ואינטראקציה של משתמשים.התחל על ידי בחירת השקופיות והתחלות של אינדקס.

const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.slider-nav button');
let currentIndex = 0;
let intervalId;

function showSlide(index) {
 slides.forEach((slide, i) => {
 slide.classList.toggle('active', i === index);
 });
 dots.forEach((dot, i) => {
 dot.classList.toggle('active-dot', i === index);
 });
 currentIndex = index;
}

function nextSlide() {
 const next = (currentIndex + 1) % slides.length;
 showSlide(next);
}

function startAutoPlay(interval = 5000) {
 intervalId = setInterval(nextSlide, interval);
}

function stopAutoPlay() {
 clearInterval(intervalId);
}

// Dot click handler
dots.forEach((dot, index) => {
 dot.addEventListener('click', () => {
 stopAutoPlay();
 showSlide(index);
 startAutoPlay(4000); // restart with shorter delay after manual interaction
 });
});

// Initialize
showSlide(0);
startAutoPlay(5000);

קוד זה מספק סיבוב אוטומטי וניווט דוט אינטראקטיבי.עבור שימושיות מוגברת, לעצור את Autoplay כאשר המשתמש מרחף מעל המפרק או אינטראקציה עם הנקודות.

תגית: Next Buttons

משתמשים רבים מצפים כי חץ שולט כדי לעיין באופן ידני בהמלצות. הוסף שני כפתורים בתוך או מחוץ למכל.

<button class="prev" aria-label="Previous testimonial">❮</button>
<button class="next" aria-label="Next testimonial">❯</button>
.prev, .next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(0,0,0,0.5);
 color: white;
 border: none;
 padding: 0.75rem;
 cursor: pointer;
 z-index: 10;
}

.prev { left: 0; border-radius: 0 4px 4px 0; }
.next { right: 0; border-radius: 4px 0 0 4px; }
document.querySelector('.prev').addEventListener('click', () => {
 const prev = (currentIndex - 1 + slides.length) % slides.length;
 showSlide(prev);
});

document.querySelector('.next').addEventListener('click', nextSlide);

עדויות ישירות מאת Directus

ב- CMS ללא ראש (Directus, Evidenceial Data מאוחסנים באוסף (למשל, FLT:10) עם שדות עבור FLT:11, FLT:12, FLT:12, FLT:12, 000:13 ו- אופציונלית תמונה.

async function fetchTestimonials() {
 try {
 const response = await fetch('https://your-project.directus.app/items/Testimonials');
 if (!response.ok) throw new Error('Network response was not ok');
 const data = await response.json();
 return data.data;
 } catch (error) {
 console.error('Failed to fetch testimonials:', error);
 return [];
 }
}

async function renderSlider() {
 const testimonials = await fetchTestimonials();
 const sliderContainer = document.getElementById('testimonial-slider');
 const navContainer = document.querySelector('.slider-nav');

 // Clear existing content
 sliderContainer.innerHTML = '';
 navContainer.innerHTML = '';

 testimonials.forEach((item, index) => {
 const slide = document.createElement('div');
 slide.className = `slide${index === 0 ? ' active' : ''}`;
 slide.innerHTML = `
 <blockquote>
 <p>“${item.quote}”</p>
 <footer>— ${item.client_name}${item.client_title ? `, ${item.client_title}` : ''}</footer>
 </blockquote>
 `;
 sliderContainer.appendChild(slide);

 const dot = document.createElement('button');
 dot.className = index === 0 ? 'active-dot' : '';
 dot.setAttribute('aria-label', `Go to testimonial ${index + 1}`);
 dot.addEventListener('click', () => {
 stopAutoPlay();
 showSlide(index);
 startAutoPlay(4000);
 });
 navContainer.appendChild(dot);
 });

 // Re‑initialize variables and start
 slides = document.querySelectorAll('.slide');
 dots = document.querySelectorAll('.slider-nav button');
 showSlide(0);
 startAutoPlay();
}

גישה זו שומרת על העדויות שלך ריכוז ב Directus ועדכונים את השקופית באופן אוטומטי בכל פעם שתוכן משתנה. עבור ביצועים טובים יותר, לשקול גרד את התגובה ה- API או באמצעות Directus SDK עם פרמטרים של השאילתה כדי לסנן או להקליד עדויות.

שיקולים

מקטע כולל מבטיח שכל המשתמשים יכולים לתקשר עם המלצותיך.התרגילים המרכזיים כוללים:

  • (ב) ב[[1924]], [[1924]], [[1924]]]], [[1924]]]]
  • בנוסף ל-FLT 18 (למשל, "ההוכחה הבאה", "ההוכחה הקודמת"
  • שימוש ב-FLT:19 על שקופיות לא בלתי נראות.
  • שימוש באוטומטי על מיקוד או מרחף, ומספק כפתור משחק/כאב.
  • ניווט מקלדת מבטיח: מקשי חצים נעים בין שקופיות, והתמקדות לשונית מנוהל בתוך widget.

לצליל עמוק, התייחס ל-FLT:0WAI Web נגישות Tutorials על CarouselsischesFLT:1.

עיצוב & אחראי; תמיכה ב-Touch

שקופיות עדויות חייבות לעבוד על מכשירים ניידים, טאבלטים, ושולחנות עבודה. השתמש יחידות יחסיות ושאילתות מדיה כדי להתאים ⁇ , גודל גופני, פריסת ניווט.

@media (max-width: 600px) {
 .slide {
 padding: 1.25rem;
 }
 blockquote {
 font-size: 0.95rem;
 }
 .slider-nav button {
 width: 10px;
 height: 10px;
 }
}

(ב) לעזר, להטמיע מנגנון ניצוץ באמצעות ההרחבה (FLT:21 ו-(FLT:22 להאזין לאירועי המאזינים.

let touchStartX = 0;
let touchEndX = 0;

sliderContainer.addEventListener('touchstart', (e) => {
 touchStartX = e.changedTouches[0].screenX;
});

sliderContainer.addEventListener('touchend', (e) => {
 touchEndX = e.changedTouches[0].screenX;
 handleSwipe();
});

function handleSwipe() {
 const diff = touchStartX - touchEndX;
 if (Math.abs(diff) > 50) {
 if (diff > 0) nextSlide();
 else {
 const prev = (currentIndex - 1 + slides.length) % slides.length;
 showSlide(prev);
 }
 }
}

אופטימיזציה

כדי להבטיח חווית משתמש חלקה, בצע את ההנחיות האלה:

  • לזי טעינה כל תמונות (למשל, תמונות של לקוחות) באמצעות ההרחבה (FLT:26).
  • להגביל את מספר מניפולציה DOM.כאשר לבנות מחדש את השקופית מנתוני API, השתמש קטע מסמך כדי אצווה שקופיות.
  • Throttle או debounce resize מטפל באירוע כדי למנוע הפריסה.
  • הקטנת תלות ב- JavaScript - המחופית אינה דורשת ג'קורי או ספריות כבדות.
  • השתמש ב-FLT:27 עבור אנימציה חלקה אם משתמשים במעברי CSS.

עבור מבט מעמיק על אופטימיזציה לדפדפן, ראה את ה-FLT:0 (Google Web Fundamentals Guide on makeingFLT:1).

היכרות עם תהליך בנייה

בעת שימוש ב-Directus כ- CMS חסר ראש, קוד השדרוג שלך עשוי להיות חלק מפרויקט חזית גדול יותר שנבנה עם חבילה כמו Webpack, Vite, או Parcel. לשמור על JavaScript ו- CSS בקבצים נפרדים ולבוא אותם לתוך היישום הראשי שלך. עבור אתר סטטי או וורדפרס ערכת נושא, אתה יכול ליישר את הקוד ישירות לאחר שיחת ה- API.

אם אתה משתמש ב- (FLT:0Directus SDK SDK SDKFIRLT:1), אימות וטיפול בשגיאות הופכים פשוטים יותר:

import { createDirectus, rest, readItems } from '@directus/sdk';

const client = createDirectus('https://your-project.directus.app').with(rest());

async function getTestimonials() {
 const testimonials = await client.request(readItems('Testimonials', {
 sort: ['sort'],
 limit: 10
 }));
 return testimonials;
}

גישה זו גם מעניקה לך בטיחות מסוג אם אתה משתמש ב- TypeScript.

עקבו אחרי Slider

לאחר פיתוח, בדיקה על פני דפדפנים מרובים (Chrome, Firefox, Safari, Edge) והמכשירים.בדוק כי המקלדת שולטת בעבודה, כי Autoplay הפסקה על מרחף, וכי המחליף חוזר בחסד כאשר JavaScript הוא מוגבל. השתמש ב- Devtools של הדפדפן כדי לדמות מהירויות רשת איטיות ולהאשר כי עדויות עדויות לכך הן בהדרגה.

בדיקות אוטומטיות ניתן להוסיף עם כלים כמו Cypress או Playwright כדי להבטיח אינטראקציות נשאר אמין כמו בסיס הקוד מתפתח.

מסקנה

בניית שקופיות ויזואליות מותאם אישית עם JavaScript מעניקה לך את החופש לעצב מרכיב ייחודי, נגיש ומבצעי המשלב את המקור עם Directus. על ידי בניית HTML באופן סמנטאלי, מעצב עם CSS נקי, יישום JavaScript חזק, ו- Bringing נתונים חיים מ Directus, אתה יוצר תכונה דינמית אשר בונה אמון עם הקהל שלך.