Creando un icono de búsqueda con un tema

Hola!

Estaba intentando insertar un icono junto al encabezado de búsqueda para intentar aprender cómo insertar elementos en Discourse, para empezar.

Sin embargo, esto no funcionó.

<script>
node = document.getElementsByClassName('search-page-heading');
node.insertAdjacentElements('beforebegin', '<svg class="PixlzThemeSearchIcon" aria-hidden="true"><use xlink:href="#search"></use></svg>');
</script>

Podría ser un error estúpido (como algunos de ustedes saben, me vuelvo más estúpido por la noche), pero se agradece la ayuda.
¡Gracias!

Hola,

Si he entendido correctamente, te gustaría añadir un icono de búsqueda aquí en la página de búsqueda :arrow_down_small:

Creo que para esto necesitas sobrescribir la plantilla de Discourse.
Así es como se hace: Sobrescribir plantillas de Discourse, pero te sugiero que leas toda la documentación.


En este caso, se vería algo así. Primero debes encontrar la plantilla de la página de búsqueda. Aquí están las plantillas: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

La plantilla que buscamos es full-page-search.hbs y podemos ver claramente qué parte debemos editar para realizar este cambio.

Esta es la parte del encabezado de la plantilla que editaremos… pero eso será un poco más adelante…

    <h1 class="search-page-heading">
      {{#if this.hasResults}}
        <div class="result-count" id="search-result-count" aria-live="polite">
          {{html-safe this.resultCountLabel}}
        </div>
      {{else}}
        {{i18n "search.full_page_title"}}
      {{/if}}
    </h1>

Ahora, según la documentación anterior, debemos comenzar así:

La plantilla va a la sección header.

<script type="text/x-handlebars" data-template-name="full-page-search">

</script>

Luego, debemos copiar la plantilla completa dentro:

Se ve así
<script type="text/x-handlebars" data-template-name="full-page-search">
  <DSection @pageClass="search" @class="search-container">
    <ScrollTracker @name="full-page-search" @tag={{this.searchTerm}} @class="hidden" />
    <div class="search-header" role="search">
      <h1 class="search-page-heading">
        {{#if this.hasResults}}
          <div class="result-count" id="search-result-count" aria-live="polite">
            {{html-safe this.resultCountLabel}}
          </div>
        {{else}}
          {{i18n "search.full_page_title"}}
        {{/if}}
      </h1>
      <div class="search-bar">
        <SearchTextField @value={{this.searchTerm}} @class="full-page-search search no-blur search-query" @aria-label={{i18n "search.search_term_label"}} @enter={{action "search" (hash collapseFilters=true)}} @hasAutofocus={{this.hasAutofocus}} @aria-controls="search-result-count" />
        <ComboBox @id="search-type" @value={{this.search_type}} @content={{this.searchTypes}} @onChange={{action (mut this.search_type)}} @options={{hash
            castInteger=true
          }} />
        <DButton @action={{action "search" (hash collapseFilters=true)}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{this.searchButtonDisabled}} />
      </div>
      {{#if this.usingDefaultSearchType}}
        {{!-- context is only provided when searching from mobile view --}}
        {{#if this.context}}
          <div class="search-context">
            <label>
              <Input @type="checkbox" name="searchContext" @checked={{this.searchContextEnabled}} /> {{this.searchContextDescription}}
            </label>
          </div>
        {{/if}}

        <div class="search-filters">
          <SearchAdvancedOptions @searchTerm={{readonly this.searchTerm}} @onChangeSearchTerm={{action (mut this.searchTerm)}} @search={{action "search" (hash collapseFilters=true)}} @searchButtonDisabled={{this.searchButtonDisabled}} @expandFilters={{this.expandFilters}} />
        </div>
      {{/if}}

      <div class="search-notice">
        {{#if this.invalidSearch}}
          <div class="fps-invalid">
            {{i18n "search.too_short"}}
          </div>
        {{/if}}
      </div>

    </div>

    <div class="search-advanced">
      {{#if this.hasResults}}
        {{#if this.usingDefaultSearchType}}
          <div class={{this.searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
            {{#if this.canBulkSelect}}
              <DButton @icon="list" @class="btn-default bulk-select" @title="topics.bulk.toggle" @action={{action "toggleBulkSelect"}} />
              {{#if this.selected}}
                <DButton @class="btn-default bulk-select-btn" @selected={{this.selected}} @action={{action "showBulkActions"}} @icon="wrench" />
              {{/if}}
            {{/if}}

            {{#if this.bulkSelectEnabled}}
              {{#if this.hasUnselectedResults}}
                <DButton @icon="check-square" @class="btn-default" @action={{action "selectAll"}} @label="search.select_all" />
              {{/if}}

              {{#if this.hasSelection}}
                <DButton @icon="far-square" @class="btn-default" @action={{action "clearAll"}} @label="search.clear_all" />
              {{/if}}
            {{/if}}

            <div class="sort-by inline-form">
              <label>
                {{i18n "search.sort_by"}}
              </label>
              <ComboBox @value={{this.sortOrder}} @content={{this.sortOrders}} @onChange={{action (mut this.sortOrder)}} @id="search-sort-by" @options={{hash
                  castInteger=true
                }} />
            </div>
          </div>
        {{/if}}
      {{/if}}

      <PluginOutlet @name="full-page-search-below-search-info" @tagName="span" @connectorTagName="div" @args={{hash search=this.searchTerm}} />

      {{#if this.searching}}
        {{loading-spinner size="medium"}}
      {{else}}
        <div class="search-results" role="region">
          <LoadMore @selector=".fps-result" @action={{action "loadMore"}}>
            {{#if this.usingDefaultSearchType}}
              <SearchResultEntries @posts={{this.model.posts}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @selected={{this.selected}} @highlightQuery={{this.highlightQuery}} @searchLogId={{this.model.grouped_search_result.search_log_id}} />

              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#unless this.hasResults}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>

                    {{#if this.model.grouped_search_result.error}}
                      <div class="warning">
                        {{this.model.grouped_search_result.error}}
                      </div>
                    {{/if}}

                    {{#if this.showSuggestion}}
                      <div class="no-results-suggestion">
                        {{i18n "search.cant_find"}}
                        {{#if this.canCreateTopic}}
                          <a href {{action "createTopic" this.searchTerm}}>{{i18n "search.start_new_topic"}}</a>
                          {{#unless this.siteSettings.login_required}}
                            {{i18n "search.or_search_google"}}
                          {{/unless}}
                        {{else}}
                          {{i18n "search.search_google"}}
                        {{/if}}
                      </div>

                      <GoogleSearch @searchTerm={{this.searchTerm}} />
                    {{/if}}
                  {{/if}}
                {{/unless}}

                {{#if this.hasResults}}
                  <h3 class="search-footer">
                    {{#if this.model.grouped_search_result.more_full_page_results}}
                      {{#if this.isLastPage}}
                        {{i18n "search.more_results"}}
                      {{/if}}
                    {{else}}
                      {{i18n "search.no_more_results"}}
                    {{/if}}
                  </h3>
                {{/if}}
              </ConditionalLoadingSpinner>
            {{else}}
              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#if this.hasResults}}
                  {{#if this.model.categories.length}}
                    <h4 class="category-heading">
                      {{i18n "search.categories"}}
                    </h4>
                    <div class="category-items">
                      {{#each this.model.categories as |category|}}
                        {{category-link category extraClasses="fps-category-item"}}
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.tags.length}}
                    <h4 class="tag-heading">
                      {{i18n "search.tags"}}
                    </h4>

                    <div class="tag-items">
                      {{#each this.model.tags as |tag|}}
                        <div class="fps-tag-item">
                          <a href={{tag.url}}>
                            {{tag.id}}
                          </a>
                        </div>
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.users}}
                    <div class="user-items">
                      {{#each this.model.users as |user|}}
                        <UserLink @user={{user}} @class="fps-user-item">
                          {{avatar user imageSize="large"}}

                          <div class="user-titles">
                            {{#if user.name}}
                              <span class="name">
                                {{user.name}}
                              </span>
                            {{/if}}

                            <span class="username">
                              {{user.username}}
                            </span>
                          </div>
                        </UserLink>
                      {{/each}}
                    </div>
                  {{/if}}
                {{else}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>
                  {{/if}}
                {{/if}}
              </ConditionalLoadingSpinner>
            {{/if}}
          </LoadMore>
        </div>
      {{/if}}
    </div>
  </DSection>
</script>

Ahora podemos editar la parte del encabezado que mencioné antes. En este caso, es un cambio muy sencillo, pero puedes realizar cambios más complejos. Asegúrate de que tu plantilla personalizada siempre esté actualizada. Si hay algún cambio en la plantilla principal, también debes actualizar tu plantilla personalizada para que todo funcione correctamente. :slightly_smiling_face:

En este caso, simplemente añadimos un icono {{d-icon "search"}} antes del título de la página completa y antes del recuento de resultados.

La plantilla completa se ve así :arrow_down_small:

<script type="text/x-handlebars" data-template-name="full-page-search">
  <DSection @pageClass="search" @class="search-container">
    <ScrollTracker @name="full-page-search" @tag={{this.searchTerm}} @class="hidden" />
    <div class="search-header" role="search">
      <h1 class="search-page-heading">
        {{#if this.hasResults}}
          <div class="result-count" id="search-result-count" aria-live="polite">
            {{d-icon "search"}}
            {{html-safe this.resultCountLabel}}
          </div>
        {{else}}
          {{d-icon "search"}}
          {{i18n "search.full_page_title"}}
        {{/if}}
      </h1>
      <div class="search-bar">
        <SearchTextField @value={{this.searchTerm}} @class="full-page-search search no-blur search-query" @aria-label={{i18n "search.search_term_label"}} @enter={{action "search" (hash collapseFilters=true)}} @hasAutofocus={{this.hasAutofocus}} @aria-controls="search-result-count" />
        <ComboBox @id="search-type" @value={{this.search_type}} @content={{this.searchTypes}} @onChange={{action (mut this.search_type)}} @options={{hash
            castInteger=true
          }} />
        <DButton @action={{action "search" (hash collapseFilters=true)}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{this.searchButtonDisabled}} />
      </div>
      {{#if this.usingDefaultSearchType}}
        {{!-- context is only provided when searching from mobile view --}}
        {{#if this.context}}
          <div class="search-context">
            <label>
              <Input @type="checkbox" name="searchContext" @checked={{this.searchContextEnabled}} /> {{this.searchContextDescription}}
            </label>
          </div>
        {{/if}}

        <div class="search-filters">
          <SearchAdvancedOptions @searchTerm={{readonly this.searchTerm}} @onChangeSearchTerm={{action (mut this.searchTerm)}} @search={{action "search" (hash collapseFilters=true)}} @searchButtonDisabled={{this.searchButtonDisabled}} @expandFilters={{this.expandFilters}} />
        </div>
      {{/if}}

      <div class="search-notice">
        {{#if this.invalidSearch}}
          <div class="fps-invalid">
            {{i18n "search.too_short"}}
          </div>
        {{/if}}
      </div>

    </div>

    <div class="search-advanced">
      {{#if this.hasResults}}
        {{#if this.usingDefaultSearchType}}
          <div class={{this.searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
            {{#if this.canBulkSelect}}
              <DButton @icon="list" @class="btn-default bulk-select" @title="topics.bulk.toggle" @action={{action "toggleBulkSelect"}} />
              {{#if this.selected}}
                <DButton @class="btn-default bulk-select-btn" @selected={{this.selected}} @action={{action "showBulkActions"}} @icon="wrench" />
              {{/if}}
            {{/if}}

            {{#if this.bulkSelectEnabled}}
              {{#if this.hasUnselectedResults}}
                <DButton @icon="check-square" @class="btn-default" @action={{action "selectAll"}} @label="search.select_all" />
              {{/if}}

              {{#if this.hasSelection}}
                <DButton @icon="far-square" @class="btn-default" @action={{action "clearAll"}} @label="search.clear_all" />
              {{/if}}
            {{/if}}

            <div class="sort-by inline-form">
              <label>
                {{i18n "search.sort_by"}}
              </label>
              <ComboBox @value={{this.sortOrder}} @content={{this.sortOrders}} @onChange={{action (mut this.sortOrder)}} @id="search-sort-by" @options={{hash
                  castInteger=true
                }} />
            </div>
          </div>
        {{/if}}
      {{/if}}

      <PluginOutlet @name="full-page-search-below-search-info" @tagName="span" @connectorTagName="div" @args={{hash search=this.searchTerm}} />

      {{#if this.searching}}
        {{loading-spinner size="medium"}}
      {{else}}
        <div class="search-results" role="region">
          <LoadMore @selector=".fps-result" @action={{action "loadMore"}}>
            {{#if this.usingDefaultSearchType}}
              <SearchResultEntries @posts={{this.model.posts}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @selected={{this.selected}} @highlightQuery={{this.highlightQuery}} @searchLogId={{this.model.grouped_search_result.search_log_id}} />

              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#unless this.hasResults}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>

                    {{#if this.model.grouped_search_result.error}}
                      <div class="warning">
                        {{this.model.grouped_search_result.error}}
                      </div>
                    {{/if}}

                    {{#if this.showSuggestion}}
                      <div class="no-results-suggestion">
                        {{i18n "search.cant_find"}}
                        {{#if this.canCreateTopic}}
                          <a href {{action "createTopic" this.searchTerm}}>{{i18n "search.start_new_topic"}}</a>
                          {{#unless this.siteSettings.login_required}}
                            {{i18n "search.or_search_google"}}
                          {{/unless}}
                        {{else}}
                          {{i18n "search.search_google"}}
                        {{/if}}
                      </div>

                      <GoogleSearch @searchTerm={{this.searchTerm}} />
                    {{/if}}
                  {{/if}}
                {{/unless}}

                {{#if this.hasResults}}
                  <h3 class="search-footer">
                    {{#if this.model.grouped_search_result.more_full_page_results}}
                      {{#if this.isLastPage}}
                        {{i18n "search.more_results"}}
                      {{/if}}
                    {{else}}
                      {{i18n "search.no_more_results"}}
                    {{/if}}
                  </h3>
                {{/if}}
              </ConditionalLoadingSpinner>
            {{else}}
              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#if this.hasResults}}
                  {{#if this.model.categories.length}}
                    <h4 class="category-heading">
                      {{i18n "search.categories"}}
                    </h4>
                    <div class="category-items">
                      {{#each this.model.categories as |category|}}
                        {{category-link category extraClasses="fps-category-item"}}
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.tags.length}}
                    <h4 class="tag-heading">
                      {{i18n "search.tags"}}
                    </h4>

                    <div class="tag-items">
                      {{#each this.model.tags as |tag|}}
                        <div class="fps-tag-item">
                          <a href={{tag.url}}>
                            {{tag.id}}
                          </a>
                        </div>
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.users}}
                    <div class="user-items">
                      {{#each this.model.users as |user|}}
                        <UserLink @user={{user}} @class="fps-user-item">
                          {{avatar user imageSize="large"}}

                          <div class="user-titles">
                            {{#if user.name}}
                              <span class="name">
                                {{user.name}}
                              </span>
                            {{/if}}

                            <span class="username">
                              {{user.username}}
                            </span>
                          </div>
                        </UserLink>
                      {{/each}}
                    </div>
                  {{/if}}
                {{else}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>
                  {{/if}}
                {{/if}}
              </ConditionalLoadingSpinner>
            {{/if}}
          </LoadMore>
        </div>
      {{/if}}
    </div>
  </DSection>
</script>

Espero que esto te ayude. :slightly_smiling_face:

¡De acuerdo, eso casi funcionó!

Modifiqué el banner de búsqueda y hace esto


Nunca supe que sería tan complejo, ¡pero gracias! Pensé que sería un simple script de JS de 3 líneas.

Sí, creo que es por tu CSS personalizado. Probablemente tengas que personalizar esta área. :slightly_smiling_face:

Disculpa la demora en responder, pero este es el CSS para ello.

svg.PixlzThemeSearchIcon {
      position: relative;
      display: table-row;
      height: 50px !important;
      width: 50px;
      top: 227px;
      left: 220px;
      fill: #e0e0e0;
}

¿Hay algo mal con él?

Hola,

No necesitas agregar CSS personalizado a SVG si quieres que aparezca antes del título porque lo pusimos en las etiquetas <h2>, por lo que usará los estilos de <h2>. Pero tienes que modificar la sección del título de búsqueda. Si no me equivoco, ¿esta captura de pantalla que compartiste arriba es de tu tema DarkPixlz’s Modern Theme?

Revisé ese tema y creo que el problema es que usas enormes rellenos y tamaños de fuente para alinear el título al centro y no hay suficiente espacio para el ícono de búsqueda.

.search-container .search-page-heading {
  padding: 2em 3.8em;
  font-size: 5em;
}

Mi sugerencia:

Uso márgenes en lugar de rellenos, pero no son necesarios en los lados - porque .search-header ya tiene un 10% de relleno en los lados - para tener suficiente espacio para el ícono y usar un tamaño de fuente más pequeño, especialmente en dispositivos móviles. Para arreglar la alineación vertical, puedes agregar un margen de 1em en la parte superior, ya que tu .main-outlet tiene un relleno de 3em en la parte superior.

Probablemente sea mejor ver si cambio el fondo.

.search-container .search-page-heading {
  margin: 1em 0 2em 0;
  font-size: 5em; // usa un tamaño de fuente más pequeño en pantallas más pequeñas
  text-align: center;
}

Gracias, eso funcionó :slight_smile: