ฉันจะเพิ่มเมตาแท็กในส่วน <head> … </head> ได้อย่างไร


คำตอบ:


49

จากแหล่งที่แตกต่างกันฉันพบวิธีที่แตกต่างในการเพิ่มเมตาแท็กใน Drupal 8 ดังนั้นจึงรวบรวมทุกวิธี


1. การใช้ไฟล์ THEME.theme

ฉันคิดว่ามีการถามคำถามเดียวกันในสเตวอซอฟต์โฟล: เพิ่มเมตาแท็กไว้ใน drupal 8 และถ้าคุณเห็นคำตอบของ@Danielishkoเขาได้ให้รหัสต่อไปนี้

เพียงเพิ่มรหัสต่อไปนี้ในTHEME.themeไฟล์ของคุณล้างแคชและคุณจะดี หมายเหตุ: function theme_preprocess_html(&$variables) {...}ควรมีอยู่ในไฟล์. theme แล้วดังนั้นอย่าสร้างไฟล์ใหม่มิฉะนั้นจะทำให้เกิดข้อผิดพลาด

function theme_preprocess_html(&$variables) {

  $xuacompatible = [
    '#tag' => 'meta',
    '#attributes' => [
      'http-equiv' => 'x-ua-compatible',
      'content' => 'ie=edge',
    ],
  ];


  $variables['page']['#attached']['html_head'][] = [$xuacompatible, 'x-ua-compatible'];
}

ภาพที่ส่งออก:

ป้อนคำอธิบายรูปภาพที่นี่


2. ผ่านไฟล์เทมเพลต:

คำถามก็ถูกถามในหัวข้อนี้: วิธีการตั้งค่า / ลบ Drupal 8 เมตาแท็ก

หากคุณอ่านคำถามในลิงค์ที่กล่าวถึงข้างต้น Questioner ได้กล่าวว่าการใช้html.html.twigไฟล์เทมเพลตคุณสามารถเพิ่มเมตาแท็กได้โดยตรง<head>....</head>

html.html.twigไฟล์ที่คุณสามารถหาได้core/modules/sytem/templates/html.html.twigคุณสามารถคัดลอกและวางในโฟลเดอร์แม่แบบของชุดรูปแบบของคุณและชุดรูปแบบของคุณจะใช้หนึ่ง

จาก html.html.twig

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

ภาพออก:

ป้อนคำอธิบายรูปภาพที่นี่

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


3. สร้างโมดูลที่กำหนดเองของคุณเอง

หากคุณอ้างถึงบทช่วยสอนนี้: การเพิ่มแท็ก HTML ใหม่ในใน Drupal 8เขาได้อธิบายวิธีการเพิ่มแท็กทั่วไปใน Drupal 8 ฉันได้แก้ไขตามความต้องการของคุณ คุณสามารถอ้างถึงบทช่วยสอนนี้: Drupal 8: สร้าง Simple Moduleสำหรับวิธีการพัฒนาโมดูลอย่างง่ายใน Drupal 8 และรหัสต่อไปนี้จะอยู่ในไฟล์ module_name.module ของคุณนั่นแหล่ะ

สำหรับmodule_name.moduleไฟล์

<?php
/**
 * Implements hook_page_attachments().
 */
function module_name_page_attachments(array &$page) {
  $xuacompatible = [
        '#tag' => 'meta',
        '#attributes' => [
          'http-equiv' => 'x-ua-compatible',
          'content' => 'ie=edge',
        ],
      ];
  $page['#attached']['html_head'][] = [$xuacompatible, 'x-ua-compatible'];
}

ฉันคิดว่าวิธีการและวิธีการที่อธิบายไว้ในตัวเลือกที่ 1 นี้ค่อนข้างเหมือนกัน


4. การใช้โมดูล Drupal

ฉันไม่แน่ใจวิธีใช้วิธีนี้ฉันพยายามค้นหา ที่นี่ฉันกำลังพูดถึงเพราะเมื่อจุดของการเพิ่มเมตาแท็กมาโมดูลนี้ป๊อปอัพเสมอ

ฉันคิดว่าวิธีนี้คุณควรใช้ ในคำตอบที่ได้รับการยอมรับเขาได้อธิบายถึงวิธีการของโมดูลและคุณสามารถใช้โมดูลMetatagสำหรับสิ่งนั้น โมดูลนี้มีโมดูลที่ขึ้นต่อกันToken & Ctoolsซึ่งเป็นสิ่งที่พบได้บ่อยมาก ในคำตอบนั้นได้อธิบายขั้นตอนทั้งหมดไว้แล้วดังนั้นฉันไม่ได้พูดถึงที่นี่


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

@lesleyn ฉันได้อัปเดตคำตอบของฉันฉันได้รวมวิธีการเพิ่มเมตาแท็กที่แตกต่างกัน แต่เช่นเดียวกับคุณฉันไม่ได้คิดวิธีการเพิ่มโดยใช้โมดูล Metatag ฉันผ่านโมดูลนั้นเราสามารถเข้าถึงสิ่งที่ระบุไว้ในรายการโทเค็น ใช้เมตาแท็กที่คุณระบุไว้ฉันคิดว่าเราต้องสร้างโทเค็นสำหรับสิ่งนี้นี่คือ jus ที่ฉันคาดเดายาก Othe เข้าใกล้ฉันได้ทำการทดสอบแล้วและพวกเขาก็ทำงาน
CodeNext

1
สิ่งนี้ควรถูกทำเครื่องหมายว่าถูกต้อง =) +1
Cyclonecode

1
@ AntonínSlejškaทั้ง n-1 และ n-3 เป็นวิธีเดียวกันกันมากความแตกต่างคือใน n-1 คุณกำลังเพิ่มรหัสในไฟล์. theme ในขณะที่ n-3 คุณกำลังสร้างโมดูลที่กำหนดเองสำหรับสิ่งนั้น ฉันจะบอกว่าไปสำหรับ n-1 จะสะอาดและง่าย และสำหรับ HOMEPAGE คุณจะต้องใส่โค้ดเพิ่มเติมในโค้ดที่ฉันได้ให้ไว้ใน n-1 ฉันเพิ่งเพิ่มการอัปเดตใน n-1 สำหรับความต้องการของคุณแจ้งให้เราทราบหากคุณคัดลอกวางที่ฉันต้องลบมัน หากยังมีปัญหาอยู่โปรดแจ้งให้เราทราบ
CodeNext

@ รหัสต่อไปฉันขอโทษ ฉันลืมล้างแคช มันใช้งานได้สมบูรณ์แบบ ขอบคุณสำหรับความช่วยเหลือ ฉันได้คัดลอกรหัส
AntonínSlejška

4

เมื่อเพิ่มเนื้อหาลงในตัวควบคุมบล็อกเอนทิตีฟิลด์หรือสถานที่อื่น ๆ ที่คุณไม่จำเป็นต้องสร้างเบ็ด

คุณสามารถเพิ่มเมตาแท็กโดยตรงไปยังรูปแบบใดหรือทำให้องค์ประกอบ ( #theme, #type, #markup):

$build['username'] = [
  '#theme' => 'username',
  '#account' => \Drupal::currentUser(),
  '#attached' => [
    'html_head' => [
      [
        [
          '#tag' => 'meta',
          '#attributes' => [
            'name' => 'foo',
            'content' => 'bar',
          ],
        ],
        'my_module_foo',
      ],
    ],
  ],
];

เมื่อเรนเดอร์แท็กเป็นฟองขึ้นไปถึงระดับหน้าและถูกเพิ่มเข้าไปใน<head>...</head>ส่วน

ในเบ็ดการประมวลผลล่วงหน้าคุณสามารถแนบไปที่ระดับบนสุดของ$variablesดู/drupal//a/288989/47547


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.