您好！
我尝试在搜索标题旁边插入一个图标，想借此学习如何在 Discourse 中插入项目。
但是，这并没有奏效。
<script>
node = document.getElementsByClassName('search-page-heading');
node.insertAdjacentElements('beforebegin', '<svg class="PixlzThemeSearchIcon" aria-hidden="true"><use xlink:href="#search"></use></svg>');
</script>
这可能是一个愚蠢的错误（正如你们中的一些人所知，我晚上会变得更笨），但还是感谢您的帮助。
谢谢！
你好，
如果我没理解错的话，你想在搜索页面这里添加一个搜索图标 
我认为这需要你覆盖 Discourse 模板。
具体方法如下：覆盖 Discourse 模板，但我建议你先阅读完整文档。
在这种情况下，操作看起来是这样的。首先，你需要找到搜索页面的模板。模板列表如下：https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates
我们要找的模板是 full-page-search.hbs，我们可以清楚地看到需要修改哪一部分来实现这个更改。
这是我们要修改的模板标题部分……不过那要稍后再说……
<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>
根据上面的文档，我们现在知道应该这样开始：
模板应放入 header 部分。
<script type="text/x-handlebars" data-template-name="full-page-search">
</script>
然后我们需要将整个模板复制进去：
<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>
现在我们可以修改之前提到的标题部分了。在这个例子中，这是一个非常简单的修改，但你也可以进行更复杂的更改。请确保你的自定义模板始终与核心模板保持同步。如果核心模板有任何更新，你也应相应地更新你的自定义模板，以确保一切正常运行。
在这个例子中，我们只需在全页面标题和结果计数之前添加一个图标 {{d-icon "search"}}。
完整的模板如下所示
<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>
希望这能帮到你
是的，我认为这是因为你的自定义 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;
}
谢谢，这招奏效了 