您好！
我尝试在搜索标题旁边插入一个图标，想借此学习如何在 Discourse 中插入项目。
但是，这并没有奏效。
<script>
node = document.getElementsByClassName('search-page-heading');
node.insertAdjacentElements('beforebegin', '<svg class="PixlzThemeSearchIcon" aria-hidden="true"><use xlink:href="#search"></use></svg>');
</script>
这可能是一个愚蠢的错误（正如你们中的一些人所知，我晚上会变得更笨），但还是感谢您的帮助。
谢谢！
Hello,
If I understand correctly you would like to add search icon here on search page 
I think for this you need to override the Discourse template.
Here is how to do it: Overriding Discourse templates but I suggest to read the all documentation.
In this case is looks something like this. First you have to find the search page template. Here are the templates: discourse/app/assets/javascripts/discourse/app/templates at main · discourse/discourse · GitHub
The template we looking for is the full-page-search.hbs and we can clearly see which part we should edit to make this change.
This is the heading part of the template which we will edit…but that is a little bit later…
<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>
Now we know from the doc above, we should start like this:
The template goes to the header section.
<script type="text/x-handlebars" data-template-name="full-page-search">
</script>
Than we have to copy the full template inside:
<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>
Now we can edit the heading part what I mentioned before. In this case this is a really simple change but you can make more complex changes. Be sure your custom template is always up to date. If there is any change in the core template you should update your custom template as well to works everything fine. 
In this case we just add an icon {{d-icon "search"}} before full page title and before results count.
The full template looks like this
<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>
Hope this helps
是的，我认为这是因为你的自定义 CSS。你可能需要自定义这个区域。
抱歉回复晚了，这是它的 CSS。
svg.PixlzThemeSearchIcon {
position: relative;
display: table-row;
height: 50px !important;
width: 50px;
top: 227px;
left: 220px;
fill: #e0e0e0;
}
有什么问题吗？
你好，
如果你想让 SVG 出现在标题之前，就不需要添加自定义 CSS，因为我们已经将其放在了 <h2> 标签内，它将使用 <h2> 的样式。但你必须修改搜索标题部分。如果我没记错的话，你上面分享的截图来自你的主题 DarkPixlz’s Modern Theme？
我检查了那个主题，我认为问题在于你使用了巨大的内边距和字体大小来将标题居中，导致搜索图标没有足够的空间。
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
我的建议：
我使用外边距而不是内边距，但不需要在两侧添加——因为 .search-header 已经在两侧有 10% 的内边距——以便为图标留出足够的空间，并使用较小的字体大小，尤其是在移动设备上。要修复垂直对齐，你可以像 .main-outlet 在顶部有 3em 的内边距一样，在顶部添加 1em 的外边距。
如果我改变背景，可能会更好看。
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // 在较小的屏幕上使用较小的字体大小
text-align: center;
}
谢谢，这招奏效了 
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.