# Используйте decorateWidget, чтобы добавить текстовую ссылку в заголовок
**URL:** https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542
**Category:** Development
**Created:** [22.Декабрь.2023 13:36:25 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542 "2023-12-22T13:36:25Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [22.Декабрь.2023 13:36:25 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/1 "2023-12-22T13:36:25Z")
Я пытаюсь добавить иконку и текстовую ссылку в наш заголовок, используя компонент темы.
Мне удалось добавить иконку с помощью:
```plaintext
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget('header-icons:before', helper => {
return helper.h('li.header-dropdown-toggle', [
helper.h('a.icon', {
href:'/docs',
title: 'Document'
}, iconNode("book")),
]);
});
```
Но у меня возникают трудности с добавлением текста рядом с ней, который также вел бы на URL документации.
Я пробовал добавить следующее, но текст не является ссылкой:
```plaintext
api.decorateWidget('header-icons:before', helper => {
return helper.h('li.header-dropdown-toggle', [
helper.h('h3', {
href:'/docs',
title: 'Document'
}, 'Docs'),
]);
```
Что я упускаю?
Также есть ли способ разместить иконку в левой части заголовка (рядом с нашим логотипом)?
Заранее спасибо
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [22.Декабрь.2023 18:48:38 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/2 "2023-12-22T18:48:38Z")
В вашем примере вам нужно вставить свой текст здесь:
```js
helper.h('a.icon', {
href:'/docs',
title: 'Документ'
}, ["test", iconNode("book")]),
```
Вам потребуется настроить CSS для ссылки.
Например:
```css
padding-inline-end: 2em;
justify-content: space-between;
color: currentcolor;
```
> [@martyn\_thomas](#):
>
> Также есть ли способ разместить иконку слева от заголовка (рядом с нашим логотипом)?
Если вы имеете в виду справа:, вы можете попробовать:
```js
api.decorateWidget('home-logo:after', helper => {
return helper.h('div.d-header-icons', [
helper.h('a.icon.btn-flat.doc', {
href:'/docs',
title: 'Документ'
}, [iconNode("book"), "Документ"]),
]);
});
```
```css
.d-header-icons .icon.doc {
width: auto;
gap: 0.5em;
margin-inline: 1em;
& .d-icon {
width: 1em;
}
}
```
Я быстро протестировал это. Возможно, вы столкнетесь с некоторыми особенностями, но вы должны уловить общую идею!
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [22.Декабрь.2023 19:03:08 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/3 "2023-12-22T19:03:08Z")
> [@Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588):
>
> discourse2Summary Custom Header Links allows you to easily add custom text-based links to the header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links)hammer_and_wrenchRepository Link [GitHub - discourse/discourse-custom-header-links · GitHub](https://github.com/discourse/discourse-custom-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop Mobile (due to very limited space, adding more than one link on mo…
> [@Custom Header Links (icons)](https://meta.discourse.org/t/custom-header-links-icons/86307):
>
> discourse2Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-icon-header-links](https://github.com/discourse/discourse-icon-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Screenshots Desktop Mobile Settings This component includes a …
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [22.Декабрь.2023 19:19:04 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/4 "2023-12-22T19:19:04Z")
Правильно, не знаю, почему я не связал эти компоненты, хотя знал об их существовании. 🤦♂️
---
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [22.Декабрь.2023 19:36:55 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/5 "2023-12-22T19:36:55Z")
Я копался в этих компонентах — хотел немного и того, и другого, ха-ха
---
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [22.Декабрь.2023 19:58:02 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/6 "2023-12-22T19:58:02Z")
Сработало отлично — спасибо.
Теперь предстоит провести вечер, борясь с CSS, чтобы изменить цвет шрифта, ха-ха
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [21.Январь.2024 19:58:29 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/7 "2024-01-21T19:58:29Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.