Vorlagenrezeptbuch für das Help Center

Zusammentragen der Ergebnisse

Dieses Beispiel-Snippet zeigt, wie Sie mit dem Helper{{results}}die Inhalte für die Ergebnisse der Verbundsuche zusammentragen.

{{#if results}} 
    {{#each results}}
  • {{title}} {{#if is_external}} {{/if}}

    {{#if vote_sum}} {{vote_sum}} {{/if}} {{#if comment_count}} {{comment_count}} {{/if}}
    {{text}}
  • {{/each}}
{{else}}

{{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}}

{{/if}}

Sortierung von Abonnementtypen auf der Seite mit gefolgten Inhalten unter „Meine Aktivitäten“ hinzufügen

Sie können Benutzern das Anzeigen ihrer Abonnements erleichtern, indem Sie ihnen die Möglichkeit geben, Abonnements auf der Seite „Meine Aktivitäten > Seite“ mit gefolgten Inhalten zu sortieren.

Relevante Vorlage
  • Seite mit gefolgten Inhalten
Rezept
  • Fügen Sie unter dem Tag den folgenden Code hinzu:
    {{current_filter.label}} {{#each filters}} {{name}} {{/each}}

Sortieroptionen „Erstellungsdatum“ und „Aktualisierungsdatum“ für Anfragen unter „Meine Aktivitäten“ hinzufügen

Sie können die Sortieroptionen „Erstellungsdatum“ und „Aktualisierungsdatum“ für Endbenutzer auf der Anfrageseite unter „Meine Aktivitäten“ hinzufügen.

Hinweis:Die Sortieroptionen „Erstellungsdatum“ und „Aktualisierungsdatum“ sind beiStandarddesignsund Designs, die nach August 2016 angepasst wurden, standardmäßig verfügbar.
Relevante Vorlage
  • Seite zur Auflistung von Anfragen

Rezept

  • Ersetzen Sie{{t 'created'}}durch:
    {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}
  • Ersetzen Sie{{t 'last_activity'}}durch:
    {{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}

Schaltfläche „Folgen/Nicht mehr folgen“ für Benutzer in einer gemeinsamen Organisation hinzufügen

Sie können dafür sorgen, dass Benutzer Benachrichtigungen zu Anfragen in ihrer gemeinsamen Organisation enthalten. Der Helper {{subscribe}} fügt die Schaltfläche „Folgen“ hinzu. Benutzer können auf diese Schaltfläche klicken, falls sie benachrichtigt werden möchten, wenn in ihrer gemeinsamen Organisation Anfragen erstellt oder aktualisiert werden. Wenn sie keine Benachrichtigungen mehr erhalten möchten, können sie diese Option deaktivieren.

Hinweis:Die Schaltfläche „Folgen“ für gemeinsame Organisationen ist beiStandarddesignsund Designs, die nach dem 23. Januar 2016 angepasst wurden, standardmäßig verfügbar.
Relevante Vorlage
  • Seite zur Auflistung von Anfragen
Relevantes Objekt
  • {{#form 'requests_filter'}}...{{/form}}
Rezept
  • Fügen Sie den Helper{{subscribe}}zum Formularobjekt hinzu.

Beispiel

{{#form 'requests_filter' class='request-table-toolbar'}} {{input 'query' id='quick-search' type='search' class='requests-search'}} 
{{label 'organization' for='request-organization-select' class='request-filter'}} {{select 'organization' id='request-organization-select' class='request-filter'}} {{subscribe}} {{label 'status' for='request-status-select' class='request-filter'}} {{select 'status' id='request-status-select' class='request-filter'}}
{{/form}}

Referenz

Angemeldeten Benutzern die Möglichkeit geben, andere Benutzer bei Supportanfragen auf CC zu setzen

Sie können angemeldeten Benutzern bei neuen und vorhandenen Supportanfragen im Help Center die Fähigkeit zum Hinzufügen von CC geben. Wenn ein Benutzer bei einer Supportanfrage auf CC gesetzt wird, wird er bei Ticketaktualisierungen per E-Mail benachrichtigt.

Hinweis:Die CC-Option für Supportanfragen ist beiStandarddesignsund Designs, die nach dem 14. Dezember 2015 angepasst wurden, standardmäßig verfügbar.

Sie müssen die Funktion aktivieren, nachdem Sie den Code zu Ihrem angepassten Design hinzugefügt haben (sieheFestlegen von CC-Berechtigungen).

Relevante Vorlage
  • Anfragenseite
Relevantes Objekt
  • {{#form 'comment' class='comment-form'}}...{{/form}}
Rezept
  • Fügen Sie das folgende Code-Snippet im Kommentarformular ein:
    {{#if help_center.request_ccs_enabled}} 
    {{token_field 'ccs' class="ccs-input"}}
    {{/if}}

In Folgeanfragen einen Link zur ursprünglichen Anfrage hinzufügen

Sie können einen Link in der Folgeanfrage zu übergeordneten Anfrage (falls vorhanden) anzeigen.

Hinweis:Links zu übergeordneten Anfragen in Folgeanfragen sind beiStandarddesignsund Designs, die nach August 2016 angepasst wurden, standardmäßig verfügbar.

Relevante Vorlage
  • Anfragenseite

Rezept

  • Fügen Sie das folgende Snippet an der Stelle, an der der Link zum übergeordneten Ticket erscheinen soll (falls vorhanden), zur Vorlage für die Anfrageseite hinzu:
    {{#if request.followup_source_id}} 
    {{t 'followup'}}
    {{link 'request' id=request.followup_source_id}}
    {{/if}}

Abstimmungsschaltflächen zu Beiträgen hinzufügen

Die Abstimmungsschaltflächen in Beiträgen sind Teil des Designs „Copenhagen“. Wenn Sie in Beiträgen keine Option zum Abstimmen sehen, haben Sie die Schaltflächen möglicherweise aus Ihrem Design entfernt.

Der Code zum Hinzufügen der Abstimmungsschaltflächen kann von Design zu Design variieren. Hier ist der Code für das Standarddesign „Copenhagen“, falls Sie ihn brauchen:

Relevante Vorlage
  • Beitrag
Rezept
  • Fügen Sie den folgenden Code zur Vorlage für die Beitragsseite hinzu:
    {{#with article}} 
    {{t 'was_this_article_helpful'}}
    {{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}}
    {{vote 'label' class='article-vote-label'}}
    {{/with}}

Inhaltsstichwörter zu Beiträgen und Posts hinzufügen

Das Standarddesign „Copenhagen“ zeigt standardmäßig Inhaltsstichwörter auf Beitrags-, Community-Post- und Suchseiten an. Wenn Sie ein angepasstes Design oder ein Design aus dem Marketplace verwenden, müssen Sie es möglicherweise aktualisieren, um auf diesen Seiten Inhaltsstichwörter anzuzeigen. Für den Anfang können Sie die folgenden Vorlagendateien aus dem Design „Copenhagen“ als Leitfaden verwenden:

Sobald Sie mit den erforderlichen Schritten vertraut sind, können Sie Inhaltsstichwörter zu anderen Seiten hinzufügen. Das folgende Snippet fügt zum Beispiel eine Liste von Inhaltsstichwörtern zur Vorlagenseite für Community-Themen hinzu.

{{#each posts}} ... {{#if (compare content_tags.length ">" 0)}}  {{/if}} ... {{/each}}

Badges zu einem angepassten Help-Center-Design hinzufügen

Hinweis:Badges sind ab dem 1. September 2020 standardmäßig verfügbar.
Wenn Sie das Standarddesign „Copenhagen“ nicht verwenden möchten, können Sie ein angepasstes Design erstellen. Badges sind aber nur in Verbindung mit derTheme Templating API v2verfügbar. Wenn Sie noch v1 verwenden, führen Sie die in derUpgrade-Anleitungbeschriebenen Schritte aus. Anregungen hierzu finden Sie auch in diesemZendesk-Beispieldesign auf GitHub.

In diesem Thema wird Folgendes behandelt:

Hinzufügen des neuen actions-Helpers für Benutzerprofile

Wenn Sie Agenten Badges verleihen möchten, müssen Sie die Option „Badge verleihen“ hinzufügen. Dies ist aber erst möglich, nachdem Sie den neuen actions-Helper hinzugefügt haben.

So fügen Sie die Deklaration für den actions-Helper hinzu

  1. Öffnen Sie den Online-Designcodeeditor und rufen Sie die Benutzerprofilseite eines Agenten auf:
    Page filename:user_profile_page.hbs
  2. Suchen Sie die Deklaration für denedit-Helper.
    {{edit}}
  3. Ersetzen Sie die Deklaration für den edit-Helper durch die Deklaration für den neuen actions-Helper.
    {{actions}}

Nun können Agenten Badges verleihen. Die neue Schaltfläche wird wie gewünscht per CSS gestylt. Weitere Anregungen finden Sie imZendesk-Beispieldesign.

Anzeigen von Titel-Badges auf der Postlistenseite

Sie können Titel-Badges hinzufügen, die in der Postlistenseite als Label neben dem Namen des Autors angezeigt werden. Dieses Label ähnelt dem Poststatus-Label, da es der Einfachheit halber dessen Stilklasse verwendet.

So zeigen Sie Titel-Badges auf einer Postlistenseite an

  1. Öffnen Sie den Online-Designcodeeditor und rufen Sie die folgende Seite auf:
    Page filename:community_topic_page.hbs
  2. Suchen Sie die Deklarationauthor. Beim Design „Copenhagen“ sieht die Zeile wie folgt aus:
  3. Fügen Sie dieses Snippet in die darauffolgende Zeile ein:
    {{#each author.badges}}{{/each}}

Für fortgeschrittene Benutzer: In diesem Szenario sollten Sie nicht die CSS-Klassestatus-label(wieder)verwenden, sondern eine neue spezielle CSS-Klasse erstellen, die Sie unabhängig vom Stil des Status-Labels ändern können.

Hier ist ein Beispiel für das Titel-Badge eines Community-Mitglieds

Beispiel für einen Titel-Badge in Gather

Anzeigen von Titel-Badges auf einer Post- und Kommentarseite

So zeigen Sie Titel-Badges auf einer Postlistenseite an

  1. Öffnen Sie den Online-Designcodeeditor und rufen Sie die folgende Seite auf:
    Page filename:community_post_page.hbs
  2. Suchen Sie die Deklarationauthor. Beim Design „Copenhagen“ sieht die Zeile wie folgt aus:
  3. Fügen Sie dieses Snippet in die darauffolgende Zeile ein:
    {{#each author.badges}}{{/each}}

Anzeigen von Titel- und Leistungs-Badges auf einer Benutzerprofilseite

Moglicherweise您auf静脉Benutzerprofilseite neben dem Titel-Badge zum Beispiel auch ein Leistungs-Badge hinzufügen. In den folgenden Beispielen wird davon ausgegangen, dass für jedes Leistungs-Badge eine Symbolgrafik vorhanden ist. Basierend auf dem Design „Copenhagen“ können Leistungs-Badges wie folgt aussehen:

Gather-Badges für Titel und Leistung

So zeigen Sie Titel- und Leistungs-Badges auf der Profilseite eines Benutzers an

  1. Öffnen Sie den Online-Designcodeeditor und rufen Sie die folgende Seite auf:
    Page filename:user_profile_page.hbs
  2. Suchen Sie die Zeilen in der Datei, in denen der Name des Benutzers angegeben ist. Beispiel:

    {{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}

  3. Ersetzen Sie das Snippet durch den folgenden Code:

    {{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}{{#each user.badges}}{{#is category_slug "titles"}}{{name}}{{/is}}{{/each}}

    {{#each user.badges}}{{#is category_slug "achievements"}}

    {{name}}
    {{/is}}{{/each}}

In diesem Beispiel werden der Einfachheit halber nur CSS-Inline-Stile verwendet. Nutzen Sie diese Best-Practices-Beispiele als Anregung, aber stellen Sie sicher, dass der Stil zu Ihrem Design passt.

Benutzern die Möglichkeit geben, Benutzerprofile in Ihrem Help Center anzuzeigen

In diesem Abschnitt wird beschrieben, wie Sie die erforderlichen Vorlagen aktualisieren, damit Benutzer durch Klicken auf den Namen oder Avatar eines Autors im Help Center das Profil des betreffenden Benutzers aufrufen können.

Hinweis:Benutzerprofile sind beiStandarddesignsund Designs, die nach dem 20. Juni 2016 angepasst wurden, standardmäßig verfügbar.
Bei den in diesem Abschnitt beschriebenen Lösungen werden die folgenden Vorlagen mit dem Helperlinkin der Vorlagensprache Curlybars aktualisiert (siehelink (Helper)in der Vorlagendokumentation). Beiträge

Nehmen Sie in der Vorlage für die Beitragsseite die folgenden Änderungen vor.

Namen des Beitragsautors aktualisieren

Ersetzen Sie den folgendenif-Block:

{{#if article.author.url}}  {{article.author.name}}  {{else}} {{article.author.name}} {{/if}}

durch den folgendenlink-Helper:

{{#link "user_profile" id=article.author.id class="user-profile"}} {{article.author.name}} {{/link}}
Namen von Kommentarautoren aktualisieren

Ersetzen Sie den folgendenif-Block:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

durch den folgendenlink-Helper:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Avatare der Beitrags- und Kommentarautoren aktualisieren

Ersetzen Sie das folgende img-Tag:

Avatar

durch den folgendenlink-Helper:

{{#link "user_profile" id=article.author.id class="user-profile"}} Avatar {{/link}}
Community-Posts

Nehmen Sie in der Vorlage für die Community-Post-Seite die folgenden Änderungen vor.

Namen der Post-Autoren aktualisieren

Ersetzen Sie den folgendenif-Block:

{{#if post.author.url}}  {{post.author.name}}  {{else}} {{post.author.name}} {{/if}}

durch den folgendenlink-Helper:

{{#link "user_profile" id=post.author.id class="user-profile"}} {{post.author.name}} {{/link}}
Namen der Kommentarautoren aktualisieren

Ersetzen Sie den folgendenif-Block:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

durch den folgendenlink-Helper:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Avatare der Post-Autoren aktualisieren

Ersetzen Sie das folgende img-Tag:

Avatar

durch den folgendenlink-Helper:

{{#link "user_profile" id=post.author.id class="user-profile"}} Avatar {{/link}}
Avatare der Kommentarautoren aktualisieren

Ersetzen Sie das folgende img-Tag:

< img src = " {{author.avatar_url}}”alt="Avatar"/>

durch den folgendenlink-Helper:

{{#link "user_profile" id=author.id class="user-profile"}} Avatar {{/link}}
Suchergebnisse

Nehmen Sie in der Vorlage für die Suchergebnisseite die folgenden Änderungen vor.

Namen von Beitragsautoren in den Ergebnissen aktualisieren

Ersetzen Sie den folgendenif-Block im{{#each article_results}}-Block:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

durch den folgendenlink-Helper:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Namen von Post-Autoren in den Ergebnissen aktualisieren

Ersetzen Sie den folgendenif-Block im{{#each post_results}}-Block:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

durch den folgendenlink-Helper:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Suchergebnisse in älteren Designs aktualisieren

Wenn Sie ein älteres Design haben, verwenden die Suchergebnisse möglicherweise stattdessen den Helper{{meta}}. In diesem Fall können Sie den in diesem Abschnitt beschriebenen Code dazu verwenden, um Autorennamen mit Profilseiten im Help Center zu verknüpfen.

Sie müssen möglicherweise Ihre CSS-Stile aktualisieren, damit die Seite mit den Suchergebnissen einheitlich aussieht.

Namen von Beitragsautoren in den Ergebnissen aktualisieren

Ersetzen Sie die folgenden div-Tags:

{{meta}}
{{text}}

durch Folgendes:

 
{{text}}
{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}} {{date created_at}}

Endergebnis:

{{#each article_results}} 
  • {{title}} {{#if vote_sum}} {{vote_sum}} {{/if}}
    {{text}}
    {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}} {{date created_at}}
  • {{/each}}
    Namen von Post-Autoren in den Ergebnissen aktualisieren

    Fügen Sie Folgendes hinzu:

    Endergebnis:

    {{#每个post_results}} <李类=“搜索结果”>{{title}}  
    {{text}}
    {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}} {{date created_at}} {{t 'comments_count' count=comment_count}}
    {{/each}}

    Unterabschnitte im Help-Center-Design aktivieren

    Sie könnenUnterabschnittezur Wissensdatenbank des Help Centers hinzufügen, um weitere Ebenen in der Inhaltshierarchie zu erstellen. Wenn Sie ein Design verwenden, das vor dem 29. März 2019 angepasst wurde, müssen Sie Code zu Ihrem angepassten Help-Center-Design hinzufügen, um die Unterstützung für Unterabschnitte zu aktivieren. Der folgende Code ist in späteren Versionen des Designs „Copenhagen“ enthalten.

    Hinweis:Unterabschnitte sind in Guide Enterprise beiStandarddesignsund Designs, die nach dem 29. März 2019 angepasst wurden, standardmäßig verfügbar.
    Relevante Vorlage
    • Abschnitt
    Relevantes Objekt
    • section.sections
    Rezept
    • Fügen Sie das folgende Snippet in die Vorlage für Zendesk-Abschnittsseitensection_page.hbsein, und zwar zwischen dem Header-Tag ( ) und dem Pagination-Tag ({{pagination}}):
      {{#如果部分。部分}}< ul类= "列表将年代ection-list--collapsed"> {{#each section.sections}} 
    • {{name}}
    • {{/each}}
    {{/if}} {{#if section.articles}}
      {{#each section.articles}}
    • {{#if promoted}}{{/if}} {{title}}
    • {{/each}}
    {{else}} {{t 'empty'}} {{/if}}

    Seitenleistenfilter und Ergebnisse mehrerer Help Center zur Suchergebnisseite hinzufügen

    Mit der Help-Center-Suchfunktion kann der Benutzer alle vorhandenen Help Center durchsuchen und die Suchergebnisse aus den Help Centern, der Wissensdatenbank und der Community in einem gemeinsamen Feed mit Filtern auf der Ergebnisseite anzeigen.

    Wenn Sie ein Design verwenden, das vor dem 29. März 2019 angepasst wurde, müssen Sie Code zu Ihrem angepassten Help-Center-Design hinzufügen, um die Suche in mehreren Help Centern und die gemeinsame Anzeige der Suchergebnisse zu unterstützen. Wenn Sie mehrere Help Center haben, müssen Sie Ihr Design für jedes Help Center aktualisieren.

    Hinweis:InStandarddesignsund Designs, die nach dem 25. September 2019 angepasst wurden, werden einheitliche Suchergebnisse und die Suche in mehreren Help Centern standardmäßig unterstützt.

    Am schnellsten können Sie die erforderlichen Änderungen in Ihr Design übernehmen, indem Sie die neueste Version des Designs „Copenhagen“ importieren, das einheitliche Suchergebnisse unterstützt. Weitere Informationen hierzu finden Sie unterHinzufügen eines Help-Center-Designs zu Guide.

    Wenn Sie lieber ein vorhandenes angepasstes Design aktualisieren möchten, finden Sie in diesem Abschnitt eine Übersicht aller Änderungen, die Sie vornehmen müssen. Bei den in diesem Abschnitt beschriebenen Lösungen werden die folgenden Dateien mit den Helpernhelp_center_filters,filtersundsubfiltersin der Vorlagensprache Curlybars aktualisiert:

    Aktualisieren der Suchergebnisvorlage zum Hinzufugen von Seitenleistenfiltern

    Sie müssen die Suchergebnisvorlage aktualisieren, um Seitenleistenfilter hinzuzufügen und alle Ergebnisse zusammenzutragen.

    Hinzufügen von Seitenleistenfiltern

    Dieses Beispiel-Snippet zeigt, wie Sie in der Seitenleiste der Suchergebnisseite mit den neuen Filter-Helpern Suchfacetten implementieren können.

    Fügen Sie den folgenden Code unter

    in die Suchergebnisvorlage ein:
    {{#if help_center.community_enabled}}

    {{t 'filter_by_type'}}

    {{/if}} {{#if subfilters}}
    {{#is current_filter.identifier 'knowledge_base'}}

    {{t 'filter_by_category'}}

    {{/is}} {{#is current_filter.identifier 'community'}}

    {{t 'filter_by_topic'}}

    {{/is}}
    {{/if}}
    Zusammentragen der Ergebnisse

    Dieses Beispiel-Snippet zeigt, wie Sie mit dem Helper {{results}} die Inhalte für die einheitlichen Suchergebnisse zusammentragen.

    Ersetzen Sie die Helper{{article_results}}und{{post_results}}sowie die dazugehörigen H3-Unterüberschriften

    in der Suchergebnisvorlage durch den folgenden Code:

    {{#if results}} 
      {{#each results}}
    • {{title}}

      {{#if vote_sum}} {{vote_sum}} {{/if}} {{#if comment_count}} {{comment_count}} {{/if}}
      {{text}}
    • {{/each}}
    {{else}}

    {{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}}

    {{/if}}

    Aktualisieren der CSS-Stile für die Seitenleistenfilter auf der Suchergebnisseite

    Sie können CSS-Stile für die Seitenleistenfilter hinzufügen. Das folgende Beispiel basiert auf dem Design „Copenhagen“.

    Stellen Sie sicher, dass die folgenden CSS-Regeln in der Datei style.css enthalten sind:

    / * * * * * * * * * *搜索结果/ .search-results{说play: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 1024px) { .search-results { flex-direction: row; } } .search-results-column { flex: 1; } @media (min-width: 1024px) { .search-results-column { flex: 0 0 75%; } } .search-results-sidebar { border-top: 1px solid #ddd; flex: 1 0 auto; margin-bottom: 20px; padding: 0; } @media (min-width: 1024px) { .search-results-sidebar { border: 0; flex: 0 0 20%; height: auto; } } .search-results-sidebar .sidenav-item[aria-selected="true"] { background-color: $brand_color; color: $brand_text_color; text-decoration: none; } .search-results-subheading { font-size: 18px; font-weight: 600; } .search-results-list { margin-bottom: 25px; } .search-results-list > li { padding: 20px 0; } .search-results-list > li:first-child { border-top: 1px solid #ddd; } .search-results-list > li h2 { margin-bottom: 0; } .search-result-title { font-size: 16px; } .search-result-description { margin-top: 15px; word-break: break-word; } .search-result-votes, .search-result-meta-count { color: lighten($text_color, 20%); display: inline-block; font-size: 13px; font-weight: 300; padding: 4px 5px; position: relative; } .search-result-votes::before, .search-result-meta-count::before { color: $brand_color; } [dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count { margin-left: 5px; } [dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before { margin-right: 3px; } [dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count { margin-right: 5px; } [dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before { margin-left: 3px; } .search-result-votes::before { content: "\1F44D"; } .search-result-meta-count::before { content: "\1F4AC"; } .search-result .meta-group { align-items: center; } .search-result-breadcrumbs { margin: 0; } .search-result-breadcrumbs li:last-child::after { content: "·"; display: inline-block; margin: 0 5px; } /* Non-latin search results highlight */ /* Add a yellow background for Chinese */ html[lang|="zh"] .search-result-description em { font-style: normal; background: yellow; } /* Use bold to highlight for the rest of supported non-latin languages */ html[lang|="ar"] .search-result-description em, html[lang|="bg"] .search-result-description em, html[lang|="el"] .search-result-description em, html[lang|="he"] .search-result-description em, html[lang|="hi"] .search-result-description em, html[lang|="ko"] .search-result-description em, html[lang|="ja"] .search-result-description em, html[lang|="ru"] .search-result-description em, html[lang|="th"] .search-result-description em { font-style: bold; }

    Aktualisieren des JavaScript-Code für die ausblendbare Seitenleiste auf der Suchergebnisseite

    Sie können JavaScript-Code für die ausblendbare Seitenleiste der Suchergebnisseite hinzufügen. Das folgende Beispiel basiert auf dem Design „Copenhagen“.

    Ersetzen Sie den folgenden Block in der Datei script.js im angepassten Design:

    // Toggles expanded aria to collapsible elements Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) { el.addEventListener('click', function(e) { e.stopPropagation(); var isExpanded = this.getAttribute('aria-expanded') === 'true'; this.setAttribute('aria-expanded', !isExpanded); }); });

    durch das folgende Code-Snippet:

    // Toggles expanded aria to collapsible elements var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'); Array.prototype.forEach.call(collapsible, function(el) { var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle'); el.addEventListener('click', function(e) { toggleNavigation(toggle, this); }); el.addEventListener('keyup', function(e) { if (e.keyCode === 27) { // Escape key closeNavigation(toggle, this); } }); });
    Zurück an den Anfang

    0 Kommentare

      Bittemelden Sie sich an, um einen Kommentar zu hinterlassen.

      Powered by Zendesk