วิดเจ็ต: คำแนะนำ

คุณใช้องค์ประกอบที่กำหนดเองของ <devsite-recommendations> เพื่อแสดงการแนะนำเนื้อหาแก่ผู้อ่านได้ คุณสามารถอนุญาตให้ระบบสร้างคำแนะนำ ให้คำแนะนำที่ชัดเจนได้ด้วยตนเอง หรือรวมส่วนคำแนะนำที่มีอยู่ของเอกสารเพื่อการนำเสนอที่สอดคล้องกัน สถิติการคลิกผ่าน และอินเทอร์เฟซผู้ใช้ที่สมบูรณ์ (รวมถึงคำอธิบายและรูปภาพ)

การใช้งาน

หากต้องการใช้วิดเจ็ตนี้ ให้สร้างองค์ประกอบ <devsite-recommendations> หากคุณต้องการให้คำแนะนำอย่างชัดเจน ให้เพิ่มลิงก์ภายในองค์ประกอบ ปัจจุบันจะมีการให้คำแนะนำที่ระบบสร้างขึ้นเมื่อองค์ประกอบว่างเปล่า แต่งานในอนาคตจะช่วยให้ผู้เขียนสามารถทดลองกับคำแนะนำที่สร้างขึ้นเมื่อมีการให้คำแนะนำที่ชัดเจน ตลอดจนใช้คำแนะนำนั้นเป็นข้อมูลที่ป้อนเข้าสู่อัลกอริทึม

หากคุณมีคำแนะนำที่โจ่งแจ้ง ให้ระบุมาร์กอัปภายในองค์ประกอบ แท็ก <a> ที่ตรวจพบเมื่อองค์ประกอบเชื่อมต่อจะดึงแอตทริบิวต์ href ออกมาและใช้สำหรับคำแนะนำ

หากคุณมีคําแนะนํามากกว่า 3 รายการ ระบบจะเลือกแบบสุ่ม อย่างไรก็ตาม ลำดับของคำแนะนำจะยังคงเหมือนกับการจัดลำดับอินพุต ดังนั้น คำแนะนำที่มีลำดับความสำคัญสูงกว่าจะแสดงทางด้านซ้ายสุดเสมอ

หากไม่ต้องการให้คำแนะนำที่เฉพาะเจาะจงปรากฏในผลลัพธ์ที่สร้างขึ้น คุณสร้างองค์ประกอบ <devsite-recommendations> ที่ว่างเปล่าโดยใช้คอลเล็กชัน <link rel="disallow" href="/path"> ได้ ระบบจะตรวจหาแท็ก <link> ที่มี rel=disallow และแอตทริบิวต์ href และนำแท็กออกจากคำแนะนำที่สร้างขึ้นโดยอัตโนมัติ

หากต้องการคําแนะนําจากชุดย่อยของหน้าเท่านั้น ให้ใช้แท็ก Nomenclature ในช่อง query เพื่อกรองผลลัพธ์ ไวยากรณ์คือ k:category:value เช่น k:language:typescript รายการแท็กสามารถเป็นรายการที่คั่นด้วยจุลภาค (k:language:typescript,k:language:swift) เพื่อรวมหน้าเว็บที่มีแท็กใดก็ได้

ส่วนต่อไปนี้จะอธิบายมาร์กอัป วิธีที่มาร์กอัปจะแสดงผลภายใต้เงื่อนไขปกติ และวิธีที่มาร์กอัปจะแสดงผลบนเครื่องหรือ User Agent แบบง่าย

Markup

<devsite-recommendations>
<p>Note: link text is displayed when JavaScript is off</p>
<ul>
  <li><a href="/maps/documentation">Maps docs</a></li>
  <li><a href="/analytics">Analytics</a></li>
  <li><a href="/machine-learning/crash-course">MLCC</a></li>
</ul>
</devsite-recommendations>

ผลลัพธ์

User Agent แบบง่าย

หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่

ตัวอย่างที่ไม่อนุญาต

Markup

<devsite-recommendations>
  <link rel="disallow" href="/maps/documentation">
  <link rel="disallow" href="/analytics">
  <link rel="disallow" href="/machine-learning/crash-course">
</devsite-recommendations>

ผลลัพธ์

เนื่องจากผลลัพธ์จะขึ้นอยู่กับคำแนะนำที่มีการเปลี่ยนแปลง ผลลัพธ์จะแสดงเหมือนกับเอาต์พุตจากโมเดลคำแนะนำ

การรวมเนื้อหาที่มีอยู่

องค์ประกอบจะปรับปรุงอย่างต่อเนื่องกับมาร์กอัปที่มีอยู่ในหน้าเว็บได้ คุณจึงอัปเกรดลิงก์ที่มีอยู่ได้โดยการรวม <devsite-recommendations> ไว้ด้วย

ลิงก์ใหม่จะนำฟังก์ชันการทำงานและนโยบายทั้งหมดของแพลตฟอร์มการแนะนำมาใช้ เช่น หน้าแดชบอร์ดการรวบรวมข้อมูลและการทดสอบ แต่เนื้อหาจะมีการแทนที่ด้วยข้อมูลเมตาที่สมบูรณ์ ซึ่งรวมถึงคำอธิบายและรูปภาพ และอาจยกเว้นบางลิงก์ (เช่น มีการควบคุมการเข้าถึงหรือหน้าที่ไม่มีข้อมูลเมตา)

Markup

<devsite-recommendations>
<h2>Example communities</h2>
<p>Note: All markup here will be replaced with the recommendation UI.</p>
<p>
  For more information on Google Developers, check out our <a href="/community/experts">GDEs</a>. If
  you are looking to form a community, take a look at <a href="/community/gdg">GDGs</a>. Lastly, if
  you're currently studying, don't miss our <a href="/community/dsc">DSCs</a>.
</p>
</devsite-recommendations>

ผลลัพธ์

ชุมชนตัวอย่าง

หมายเหตุ: มาร์กอัปทั้งหมดที่นี่จะแทนที่ด้วย UI คำแนะนำ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Google Developers โปรดดูที่ GDE ถ้า คุณต้องการสร้างชุมชน ลองดูที่ GDG และสุดท้าย หาก ที่คุณกำลังศึกษาข้อมูลอยู่ อย่าพลาด DSC ของเรา

การใช้งานในไฟล์มาร์กดาวน์

ในไฟล์มาร์กดาวน์ (.md) ให้ตรวจสอบว่าองค์ประกอบที่กำหนดเองรวมอยู่กับองค์ประกอบ HTML มาตรฐาน เช่น <section> หรือ <div> ดังนี้

เนื้อหาแบบผสม

## Markdown section

* Markdown list
* [Markdown link](/foo)

## HTML section

<div>
<devsite-recommendations>
  <p>Note: link text is displayed when JavaScript is off</p>
  <h2>Sample heading</h2>
  <a href="/recommended">Recommended</a>
</devsite-recommendations>
</div>

ส่วนมาร์กดาวน์

ส่วน HTML

หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่

ตัวอย่างส่วนหัว

แนะนำ

มาร์กดาวน์ทั้งหมด

<pre><devsite-recommendations>
## Sample heading

* Note: link text is displayed when JavaScript is off
* [Maps documentation](/maps/documentation)

</devsite-recommendations><pre>

ผลลัพธ์

ตัวอย่างส่วนหัว

แอตทริบิวต์ระบบ

ปัจจุบันแอตทริบิวต์ที่รองรับมีเพียงแอตทริบิวต์เดียวที่ใช้ควบคุมลักษณะการทำงานของระบบและผู้ใช้ทั่วไปไม่จำเป็นต้องใช้

yield (ไม่บังคับ) หากระบุไว้ องค์ประกอบจะให้แก่องค์ประกอบคำแนะนำอื่นๆ ที่ไม่ให้ผลตอบแทนในหน้าเว็บ ซึ่งโดยทั่วไปแล้ว เว็บไซต์เองก็ใช้นี้เพื่อวางคำแนะนำในหน้าเว็บโดยอัตโนมัติ แต่เพื่อแสดงต่อเมื่อไม่มีอินสแตนซ์อื่นๆ แสดงอยู่เท่านั้น

การกรองด้วยการตั้งชื่อ

Markup

<devsite-recommendations query="k:language:typescript">
</devsite-recommendations>

ผลลัพธ์