أهلاً!
كنت أحاول إدراج أيقونة بجوار رأس البحث لمحاولة تعلم كيفية إدراج العناصر في 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>
الآن، بناءً على الوثائق أعلاه، يجب أن نبدأ كالتالي:
يذهب القالب إلى قسم الرأس.
<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;
}
هل هناك أي شيء خاطئ بها؟
مرحباً،
لا تحتاج إلى إضافة CSS مخصص إلى SVG إذا كنت تريد ظهوره قبل العنوان لأننا وضعناه داخل علامات <h2>، لذا سيستخدم أنماط <h2>. ولكن يجب عليك تعديل قسم عنوان البحث. إذا كنت على صواب، فهذه لقطة الشاشة التي شاركتها أعلاه من السمة الخاصة بك DarkPixlz’s Modern Theme؟
لقد تحققت من تلك السمة وأعتقد أن المشكلة هي أنك تستخدم هوامش داخلية (paddings) وحجم خط كبير جدًا لمحاذاة العنوان في المنتصف، ولا يوجد مساحة كافية لأيقونة البحث.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
اقتراحي:
أستخدم هوامش خارجية (margins) بدلاً من الهوامش الداخلية (paddings) ولكن لا حاجة لها على الجوانب - لأن .search-header لديها بالفعل 10% هوامش داخلية على الجوانب - للحصول على مساحة كافية للأيقونة واستخدام حجم خط أصغر خاصة على الأجهزة المحمولة. لإصلاح المحاذاة الرأسية، يمكنك إضافة 1em هامش خارجي إلى الأعلى حيث أن .main-outlet لديك لديها 3em هامش داخلي في الأعلى.
ربما يكون من الأفضل رؤية ذلك إذا قمت بتغيير الخلفية.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // استخدم حجم خط أصغر على الشاشات الأصغر
text-align: center;
}
شكرا، لقد نجح الأمر 