generateViewport
يمكنك تخصيص منفذ العرض الأولي للصفحة باستخدام كائن viewport الثابت أو وظيفة generateViewport الديناميكية.
معلومة مفيدة:
- تصديرات كائن
viewportووظيفةgenerateViewportمدعومة فقط في مكونات الخادم (Server Components).- لا يمكنك تصدير كائن
viewportووظيفةgenerateViewportمن نفس مقطع المسار.- إذا كنت تقوم بالترقية من تصديرات
metadata، يمكنك استخدام أداة metadata-to-viewport-export codemod لتحديث التغييرات.
كائن viewport
لتحديد خيارات منفذ العرض، قم بتصدير كائن viewport من ملف layout.jsx أو page.jsx.
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}
export default function Page() {}export const viewport = {
themeColor: 'black',
}
export default function Page() {}وظيفة generateViewport
يجب أن تعيد generateViewport كائن Viewport يحتوي على حقل واحد أو أكثر من حقول منفذ العرض.
export function generateViewport({ params }) {
return {
themeColor: '...',
}
}export function generateViewport({ params }) {
return {
themeColor: '...',
}
}معلومة مفيدة:
- إذا كان منفذ العرض لا يعتمد على معلومات وقت التشغيل، فيجب تعريفه باستخدام كائن
viewportالثابت بدلاً منgenerateMetadata.
حقول منفذ العرض
themeColor
تعرف على المزيد حول theme-color.
لون سمة بسيط
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}export const viewport = {
themeColor: 'black',
}<meta name="theme-color" content="black" />مع سمة media
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: [
{ media: '(prefers-color-scheme: light)', color: 'cyan' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
],
}export const viewport = {
themeColor: [
{ media: '(prefers-color-scheme: light)', color: 'cyan' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
],
}<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />width, initialScale, maximumScale و userScalable
معلومة مفيدة: يتم تعيين وسم meta
viewportتلقائيًا، وعادةً لا تكون هناك حاجة للتكوين اليدوي لأن الإعدادات الافتراضية كافية. ومع ذلك، يتم توفير المعلومات للاكتمال.
import type { Viewport } from 'next'
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
// مدعوم أيضًا ولكن أقل استخدامًا
// interactiveWidget: 'resizes-visual',
}export const viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
// مدعوم أيضًا ولكن أقل استخدامًا
// interactiveWidget: 'resizes-visual',
}<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>colorScheme
تعرف على المزيد حول color-scheme.
import type { Viewport } from 'next'
export const viewport: Viewport = {
colorScheme: 'dark',
}export const viewport = {
colorScheme: 'dark',
}<meta name="color-scheme" content="dark" />الأنواع
يمكنك إضافة أمان النوع لكائن منفذ العرض باستخدام نوع Viewport. إذا كنت تستخدم إضافة TypeScript المدمجة في بيئة التطوير الخاصة بك، فلن تحتاج إلى إضافة النوع يدويًا، ولكن لا يزال بإمكانك إضافته صراحةً إذا أردت.
كائن viewport
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}وظيفة generateViewport
وظيفة عادية
import type { Viewport } from 'next'
export function generateViewport(): Viewport {
return {
themeColor: 'black',
}
}مع خاصية segment
import type { Viewport } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export function generateViewport({ params, searchParams }: Props): Viewport {
return {
themeColor: 'black',
}
}
export default function Page({ params, searchParams }: Props) {}مشاريع JavaScript
لمشاريع JavaScript، يمكنك استخدام JSDoc لإضافة أمان النوع.
/** @type {import("next").Viewport} */
export const viewport = {
themeColor: 'black',
}سجل الإصدارات
| الإصدار | التغييرات |
|---|---|
v14.0.0 | تم تقديم viewport و generateViewport. |