페이지 메타데이터
DevSite 페이지는 사이트에 있는 콘텐츠의 단일 단위입니다. 페이지에는 사이트의 기능을 제어하는 제목, 본문, 헤더 요소 및 메타데이터 속성이 포함될 수 있습니다. 사용자가 페이지의 URL을 방문하면 사이트는 콘텐츠 페이지의 속성을 기반으로 완전한 웹페이지를 렌더링하여 머리글, 바닥글 및 사이드바와 같은 동적 요소를 추가합니다. 기본 동작은 기술 문서 페이지에 최적화되어 있지만 마케팅 및 방문 페이지와 같은 다른 용도로 페이지를 구성할 수도 있습니다.
페이지 구조
DevSite 페이지는 사이트에서 일반적인 모양과 기능을 관리하는 웹페이지입니다. Google Developers 페이지에 여러 공통 영역이 표시됩니다. (일부 사이트에서는 모든 기능을 지원하지 않습니다.) 다이어그램 위로 마우스를 가져가면 라벨이 표시됩니다.
site header
사이트 로고, 로그인 위젯, 검색창, 상단 탐색 메뉴 사이트 전체에서 공통적으로 사용됩니다.
project bar
프로젝트나 제품명, 프로젝트별 위젯 (예: '의견' 링크) 이 영역은 프로젝트 메타데이터로 정의됩니다.
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>
<html> 요소의 devsite 속성은 HTML 애셋으로 렌더링되지 않고 DevSite 페이지로 렌더링되어야 함을 DevSite에 알립니다. 페이지가 서식이나 머리글 또는 바닥글 없이 표시되는 경우 <html devsite>이 파일 상단 근처에 표시되는지 확인하세요.
<html>, <head>, <body> 요소는 필수이며 여는 태그와 닫는 태그가 있어야 합니다.
일반적인 페이지에는 <head> 내에 <title> 요소도 있어야 합니다. 페이지 제목을 참고하세요.
특정 <meta> 태그는 페이지 기능을 제어합니다. 이러한 내용은 이 참조 문서에 설명되어 있습니다. 일반적인 페이지에는 _project.yaml 메타데이터 파일을 나타내는 "project_path" 메타 태그와 _book.yaml 메타데이터 파일을 나타내는 "book_path" 메타 태그가 있습니다. 프로젝트 및 도서를 참고하세요. DevSite에서 인식하는 <meta> 태그는 일반적으로 최종 페이지에 표시되지 않습니다.
<head>의 다른 요소와 <body>의 모든 요소는 최종 페이지에 렌더링됩니다.
마크다운 소스 파일
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
일반적인 페이지에는 제목이 있어야 합니다 (예: # Page title)을 입력합니다. 페이지 제목을 참고하세요.
특정 메타 태그는 페이지 기능을 제어합니다. 이러한 내용은 이 참조 문서에 설명되어 있습니다. 일반적인 페이지에는 _project.yaml 메타데이터 파일을 나타내는 Project: 메타 태그와 _book.yaml 메타데이터 파일을 나타내는 Book: 메타 태그가 있습니다. 프로젝트 및 도서를 확인하세요. DevSite에서 인식하는 메타 태그는 일반적으로 최종 페이지에 나타나지 않습니다.
프로젝트 및 도서
프로젝트는 _project.yaml라는 프로젝트 메타데이터 파일로 설명됩니다. _book.yaml(이)라는 도서 메타데이터 파일에 도서가 설명되어 있습니다. 이러한 파일은 페이지 및 애셋 파일과 함께 사이트에 게시되며 여러 언어로 번역할 수 있습니다. 이러한 파일의 구조와 속성에 대한 자세한 내용은 프로젝트 메타데이터 및 책 메타데이터를 참조하세요.
페이지를 프로젝트와 연결하려면 project_path 속성을 제공합니다. 값은 _project.yaml 파일의 콘텐츠 경로입니다.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
마크다운
Project: /path/to/_project.yaml
페이지에 project_path 속성이 없으면 프로젝트 바 영역과 해당 기능 없이 렌더링됩니다. 페이지는 프로젝트의 일부로 간주되지 않습니다.
페이지를 도서와 연결하려면 book_path 속성을 제공합니다. 값은 _book.yaml 파일의 콘텐츠 경로입니다.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
마크다운
Book: /path/to/_book.yaml
페이지 제목
<head>
<title>Page title</title>
...
</head>
또는 페이지의 <body>에 있는 page-title 클래스와 함께 <h1> 요소를 사용합니다.
HTML
<h1 class="page-title">Page title</h1>
마크다운
# Page title
프로젝트 홈페이지에는 제목이 필요하지 않습니다.
HTML
<meta name="no_page_title" value="true" />
마크다운
no_page_title: true
자동 <h1>가 특수 레이아웃에 적합하지 않지만 페이지에 여전히 창 제목이 필요한 특수한 경우에는 제목을 유지하되 "hide_page_heading" 속성을 사용하여 제목을 숨길 수 있습니다.
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
마크다운
hide_page_heading: true
# Page title
헤더 설명
많은 DevSite 사이트의 경우 헤더에 설명이 있습니다. 이는 _project.yaml 메타데이터 파일에서 설정되며 DevSite 방문 페이지에 자동으로 표시됩니다. 즉, _index.yaml 템플릿을 사용하여 만든 페이지는 _project.yaml 파일에 설정된 헤더에서 설명을 자동으로 렌더링합니다.
이 설명은 _index.yaml 파일의 루트에 description를 설정하여 페이지에서 재정의하거나 landing_page 객체의 header 객체 내에 hide_description: true를 설정하여 억제할 수 있습니다.
전각 레이아웃
레이아웃에 대한 추가 제어가 필요한 경우 사이트 헤더 및 프로젝트 표시줄 아래 및 사이트 바닥글 위 영역의 레이아웃 제어 권한을 포기하도록 DevSite에 알릴 수 있습니다. 이렇게 하려면 "full_width" 메타데이터 속성을 "true"로 설정합니다.
HTML
<meta name="full_width" value="true" />
마크다운
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" />
마크다운
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" />
마크다운
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
refresh_date: 2017-03-27
페이지 설명
페이지 설명은 페이지 콘텐츠의 텍스트 요약입니다. 페이지 설명을 설정하려면 <meta name="description" content="DESCRIPTION" /> 요소를 제공합니다. 설명 텍스트는 value가 아닌 content라는 속성에 들어갑니다. 웹 표준 속성과 일치합니다.
HTML
<meta name="description" content="It was the best of times, it was the blurst of times..." />
마크다운
description: It was the best of times, it was the blurst of times...
페이지 설명을 설정하면 <meta> 태그가 최종 페이지에 포함됩니다.
이미지 경로
image_path는 소셜 미디어와 DevSite 기능(예: recommendations, dynamic content)에서 이 페이지를 나타내는 이미지의 경로입니다. 설정되면 이 이미지가 페이지의 오픈 그래프 이미지로 사용되고 프로젝트의 social media 설정 및 tenant site's 브랜드 설정을 재정의합니다.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
마크다운
image_path: /site-assets/developers_64dp.png
키워드
keywords 필드는 페이지를 설명하는 쉼표로 구분된 문자열 목록입니다. 사이트 검색, Dynamic Content 등의 검색 및 탐색 기능에 사용됩니다.
keywords 필드는 측정기준 연결이 없는 플랫 키워드 (예: gettingstarted)와 문서 및 프로그래밍 언어, 제품, 이벤트 (예: product:ComputeEngine 또는 language:Python3)와 같은 실제 항목 간의 관계를 나타내는 데 측정기준 네임스페이스를 사용하는 구조화된 키워드를 지원합니다. 두 유형의 keywords를 모두 키워드 필드에 추가할 수 있습니다.
형식 요구사항을 준수하지 않는 키워드를 스테이징하면 사용한 도구 (일반적으로 DevSite 명령줄 도구 또는 DevSite Content Publisher)의 결과에 올바른 형식의 키워드 버전이 포함된 경고가 표시됩니다.
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
마크다운
keywords: spacetime, timetravel, product:Delorean