البيانات الوصفية للصفحة
صفحة DevSite هي وحدة واحدة من المحتوى على موقع إلكتروني. يمكن أن تحتوي صفحة على عنوان ونص وعناصر رأس وسمات بيانات وصفية تتحكم في ميزات الموقع الإلكتروني. عندما يزور أحد المستخدمين عنوان URL لإحدى الصفحات، يعرض الموقع صفحة ويب كاملة استنادًا إلى خصائص صفحة المحتوى، مع إضافة عناصر ديناميكية مثل الرأس والتذييل والشريط الجانبي. تم تحسين السلوكيات التلقائية لصفحات المستندات الفنية، ولكن يمكن أيضًا إعداد صفحة لاستخدامات أخرى، مثل التسويق والصفحات المقصودة.
بنية الصفحة
صفحة DevSite هي صفحة ويب يدير الموقع الإلكتروني مظهرها العام وميزاته. يتم عرض صفحة عن Google Developers حيث تحتوي على عدة مناطق مشتركة. (لا تتيح كل المواقع استخدام جميع الميزات). مرر الماوس فوق الرسم التخطيطي للتسميات.
site header
شعار الموقع الإلكتروني وأداة تسجيل الدخول ومربّع البحث وشريط التنقّل العلوي شائع على مستوى الموقع الإلكتروني بالكامل.
project bar
عنوان المشروع أو المنتج والتطبيقات المصغّرة الخاصة بالمشروع (مثل رابط "تعليقات Google") يتم تحديد هذه المنطقة من خلال البيانات الوصفية للمشروع.
sidebar
التنقّل الهرمي على مستوى الكتاب يتم تحديد هذه المنطقة من خلال البيانات الوصفية للكتاب.
body
عنوان الصفحة ومحتواها.
page footer ("last updated")
أدوات مخصّصة للصفحة (مثل إشعار "تاريخ آخر تعديل"). قد يحتوي أيضًا على إشعار ترخيص CC، وهو سمة بيانات وصفية للمشروع.
site footer
روابط تذييل الموقع، أداة اختيار اللغة. شائع على مستوى الموقع الإلكتروني بالكامل.
ملفات مصدر HTML
<html devsite>
<head>
<title>Page title</title>
<meta name="project_path" value="/path/to/_project.yaml" />
<meta name="book_path" value="/path/to/_book.yaml" />
</head>
<body>
<p>Body content goes here, implemented as HTML.</p>
</body>
</html>
تُعلم السمة devsite للعنصر <html> DevSite بأنه يجب عرض هذا العنصر كصفحة DevSite وليس كمادة عرض HTML حرفيًا. إذا كانت صفحتك تظهر بدون تنسيق أو تحتوي على رأس أو تذييل، يُرجى التأكّد من ظهور علامة <html devsite> بالقرب من أعلى الملف.
إنّ العناصر <html> و<head> و<body> مطلوبة ويجب أن تتضمّن علامات فتح وإغلاق.
ويجب أن تتضمّن الصفحة العادية أيضًا عنصر <title> داخل <head>. راجِع عنوان الصفحة.
تتحكَّم علامات <meta> محدَّدة في ميزات الصفحة. يتم توضيح ذلك في هذا المرجع. تتضمن الصفحة النموذجية العلامة الوصفية "project_path" التي تشير إلى ملف البيانات الوصفية _project.yaml وعلامة "book_path" الوصفية التي تشير إلى ملف البيانات الوصفية _book.yaml. راجِع المشاريع والكتب. لا تظهر عادةً علامات <meta> التي يتم التعرّف عليها من خلال DevSite في الصفحة الأخيرة.
ويتم عرض العناصر الأخرى في <head> وجميع العناصر في <body> في الصفحة النهائية.
ملفات المصدر Markdown
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
ويجب أن يكون للصفحة النموذجية عنوان (مثل # Page title). راجِع عنوان الصفحة.
تتحكم علامات وصفية محددة في ميزات الصفحة. يتم توضيح ذلك في هذا المرجع. تتضمن الصفحة النموذجية العلامة الوصفية Project: التي تشير إلى ملف البيانات الوصفية _project.yaml وعلامة Book: الوصفية التي تشير إلى ملف البيانات الوصفية _book.yaml. الاطّلاع على المشاريع والكتب لا تظهر عادةً العلامات الوصفية التي يتعرّف عليها DevSite في الصفحة الأخيرة.
المشاريع والكتب
يتم وصف المشروع من خلال ملف بيانات وصفية خاص بالمشروع يحمل اسم _project.yaml. يتم توضيح الكتاب من خلال ملف البيانات الوصفية للكتاب باسم _book.yaml. ويتم نشر هذه الملفات على الموقع الإلكتروني مع ملفات الصفحات ومواد العرض، ويمكن ترجمتها إلى لغات متعددة. راجِع البيانات الوصفية للمشروع والبيانات الوصفية للكتاب للحصول على معلومات حول بنية هذه الملفات وسماتها.
لربط صفحة بمشروع، قدِّم السمة project_path. وقيمتها هي مسار المحتوى إلى ملف _project.yaml.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Markdown
Project: /path/to/_project.yaml
إذا لم تتضمّن إحدى الصفحات السمة project_path، سيتم عرضها بدون منطقة شريط المشروع وميزاتها. لن يتم اعتبار الصفحة جزءًا من مشروع.
لربط صفحة بكتاب، قدِّم السمة book_path. وقيمتها هي مسار المحتوى إلى ملف _book.yaml.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Markdown
Book: /path/to/_book.yaml
عنوان الصفحة
<head>
<title>Page title</title>
...
</head>
أو استخدِم عنصر <h1> مع الفئة page-title في <body> من الصفحة.
HTML
<h1 class="page-title">Page title</h1>
Markdown
# Page title
لا تحتاج الصفحات الرئيسية للمشروع إلى عناوين،
HTML
<meta name="no_page_title" value="true" />
Markdown
no_page_title: true
في الحالات الخاصة التي لا يكون فيها <h1> التلقائي مطلوبًا لتنسيق خاص ولكن الصفحة لا تزال بحاجة إلى عنوان نافذة، يمكنك الاحتفاظ بالعنوان ولكن مع إخفاء العنوان باستخدام السمة "hide_page_heading":
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Markdown
hide_page_heading: true
# Page title
وصف العنوان
تتضمّن العديد من المواقع الإلكترونية على DevSite وصفًا في رأس الصفحة. يتم ضبط هذا الإعداد في ملف البيانات الوصفية _project.yaml ويتم عرضه تلقائيًا على الصفحات المقصودة على DevSite. وبمعنى آخر، ستعرض الصفحات التي يتم إنشاؤها باستخدام نماذج _index.yaml وصفًا تلقائيًا في العنوان، والذي يتم ضبطه في ملف _project.yaml.
يمكن إلغاء هذا الوصف للصفحة من خلال ضبط description في جذر ملف _index.yaml، أو إيقافه من خلال ضبط hide_description: true داخل الكائن header في الكائن landing_page.
تنسيق بالعرض الكامل
إذا كنت بحاجة إلى مزيد من التحكّم في التصميم، يمكنك الطلب من DevSite التخلي عن التحكّم في التصميم للمنطقة أسفل عنوان الموقع الإلكتروني وشريط المشروع وفوق تذييل الموقع الإلكتروني. لإجراء ذلك، يجب ضبط سمة البيانات الوصفية "full_width" على "true".
HTML
<meta name="full_width" value="true" />
Markdown
full_width: true
تاريخ آخر تعديل
بشكل تلقائي، باستثناء صفحات full-width، تشتمل منطقة تذييل الصفحة على "تاريخ آخر تعديل" تلقائي. . وفي معظم الحالات، يمنح ذلك المستخدمين إشارة مباشرة حول حداثة المحتوى على الصفحة.
في بعض الحالات، قد تكون هذه المعلومات مربكة أو قد يعتبرها فريق المنتج سريًا. لإيقاف آخر إشعار تم تعديله على إحدى الصفحات، اضبط السمة hide_last_updated على true:
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="hide_last_updated" value="true" />
Markdown
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
hide_last_updated: true
يمكنك إلغاء "تاريخ آخر تعديل" الذي يتم احتسابه تلقائيًا. التاريخ من خلال ضبط العلامة الوصفية refresh_date على تاريخ بتنسيق ISO 8601:
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="refresh_date" value="2017-03-27" />
Markdown
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
refresh_date: 2017-03-27
وصف الصفحة
وصف الصفحة هو ملخص نصي لمحتوى الصفحة. لضبط وصف لصفحة ما، يجب توفير عنصر <meta name="description" content="DESCRIPTION" />. لاحِظ أنّ نص الوصف مدرَج في سمة باسم content وليس في سمة value. وهذا يطابق سمة معايير الويب.
HTML
<meta name="description" content="It was the best of times, it was the blurst of times..." />
Markdown
description: It was the best of times, it was the blurst of times...
يؤدي ضبط وصف الصفحة إلى تضمين العلامة <meta> في الصفحة النهائية
مسار الصورة
image_path هو المسار إلى الصورة التي تمثّل هذه الصفحة في ميزات وسائل التواصل الاجتماعي وميزات DevSite، مثل recommendations وdynamic content. عند ضبط هذه الصورة، سيتم استخدامها كصورة OpenGraph للصفحة، ما يُلغي إعدادات social media الخاصة بالمشروع وإعدادات العلامة التجارية في tenant site's.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Markdown
image_path: /site-assets/developers_64dp.png
الكلمات الرئيسية
الحقل keywords هو قائمة من السلاسل مفصولة بفواصل التي تصف الصفحة ويتم استخدامها في ميزات البحث عن الفيديوهات واستكشاف المحتوى، مثل البحث في الموقع الإلكتروني وDynamic Content.
يتيح الحقل keywords استخدام الكلمات الرئيسية المسطحة بدون ارتباط بسمات (على سبيل المثال، gettingstarted) والكلمات الرئيسية المنظَّمة التي تستخدم مساحات الاسم الأبعاد لتمثيل العلاقة بين المستندات والكيانات الفعلية، مثل لغات البرمجة والمنتجات والأحداث (مثل product:ComputeEngine أو language:Python3). يمكنك إضافة كلا النوعين keywords إلى أي حقل للكلمات الرئيسية.
في حال إعداد كلمة رئيسية لا تتوافق مع متطلبات التنسيق، سيظهر لك تحذير يتضمّن النسخة المنسَّقة من كلمتك الرئيسية في نتائج الأداة التي استخدمتها (عادةً ما تكون أداة سطر الأوامر DevSite أو أداة نشر محتوى DevSite).
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean