# 在 vdom 升级后添加头部链接

**URL:** https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284
**Category:** Support
**Created:** [2016年四月26日 23:44 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284 "2016-04-26T23:44:31Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年四月26日 23:44 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/1 "2016-04-26T23:44:31Z")

</div>

So, post-vdom’ing of the header, this old code:

```plaintext
<script type='text/x-handlebars' data-template-name='/connectors/header-after-home-logo/add-header-links'>
{{#unless showExtraInfo}}
    <a id="recruiter" href="http://sih.onemadogre.com/t/joining-sih/494">Join us!</a>
    <a id="about" href="http://sih.onemadogre.com/c/guild-news-announcements/about-the-guild">About SiH</a>
{{/unless}}
</script>

```

doesn’t work, so I’ve replaced it with:

**note: this code works fine as of, like, early May? anyway my comments below can be ignored**

```plaintext
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('div#header-links', [
                helper.h('a#recruiter', {
                    href:'/t/joining-sih/494', 
                    text:'Join Us!'
                }),
                helper.h('a#about', {
                    href:'/c/guild-news-announcements/about-the-guild', 
                    text:'About SiH'
                })
            ]);
        }
});
</script>

```

Which _almost_ works (some css needed to reposition div#header-links, but nbd), except that my links just refresh the page.

I realize this is less a Discourse specific question and probably more a “Yuun’s making a dumb syntax error” question, but I’d appreciate it if someone could give it a look over nonetheless. 😓

Thanks in advance, generous stranger. 🙂

Clarification: my links don’t refresh the page, they just always go to the home page. The hover text for each link is correct, but I guess it’s being overridden by the home logo’s href?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2016年四月26日 23:50 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/2 "2016-04-26T23:50:31Z")

</div>

Probably something @eviltrout can advise on tomorrow.

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年四月27日 00:15 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/3 "2016-04-27T00:15:24Z")

</div>

Ah, well this worked:

```plaintext
<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('header:after', helper => {
    const showExtraInfo = helper.attrs.topic;
        if(!showExtraInfo) {
            return helper.h('div#header-links', [
                helper.h('a#recruiter', {
                    href:'https://sih.onemadogre.com/t/joining-sih/494', 
                    text:'Join Us!'
                }),
                helper.h('a#about', {
                    href:'https://sih.onemadogre.com/c/guild-news-announcements/about-the-guild', 
                    text:'About SiH'
                })
            ]);
        }
});
</script>

```

After noticing the links were working, just being overridden by the home page link, I switched to using the `header` widget instead of `home-logo`. I didn’t use `header` at first due to missing the bit that detected whether or not topic info was loaded, but found it on a second pass. 🙂

I would still appreciate any advice on whether or not this is the best approach - this seemed like the most straightforward way to me, but yeah.

Oh, blurgh. Except positioning the links isn’t quite working now, having it right after the home logo was quite convenient. \>.\>

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年四月27日 17:30 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/4 "2016-04-27T17:30:37Z")

</div>

This is the correct approach. You are using the plugin api and `decorateWidget` which is the way you should modify things.

Why is positioning the links tough? Are they not appearing in the right place in the DOM? If not maybe I can add something to make them easier to insert in the right place.

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年四月27日 19:43 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/5 "2016-04-27T19:43:28Z")

</div>

Excellent, thanks.

Re: positioning, I think it may only be _relatively_ tough, I’ll need to get back on my site and spend a little more time fiddling with the CSS. When I was using `home-logo:after` it was quite easy to position the links where I wanted them (on the header, just to the right of the home logo), but now that I’m using `header:after` some… yeah, some fiddling will be required.

I’m sure it’s fully possible, I just got distracted after updating my last post and haven’t gotten back to it yet.

Oh, huh. My links using `home-logo:after` work now. So: working links, easy positioning. All is well. 🙂

---

<div class="post-metadata">

### Author: ![probus](https://avatars.discourse-cdn.com/v4/letter/p/67e7ee/32.png) [@probus](https://meta.discourse.org/u/probus)
#### Post date: [2016年六月20日 09:14 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/6 "2016-06-20T09:14:50Z")

</div>

I believe the best/correct place in the DOM for this would be inside ‘contents’, after ‘title’ and ‘panel’. So in the exact same place as ‘extra-info-wrapper’. That would make it trivial to center the links both horizontally and vertically, because the new element would be right after both floated divs in the DOM.

---

<div class="post-metadata">

### Author: ![clay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clay/32/102156_2.png) [@clay](https://meta.discourse.org/u/clay)
#### Post date: [2016年七月5日 15:44 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/7 "2016-07-05T15:44:38Z")

</div>

I’m missing the big picture here – where can I find a link to all of the possible locations for the widgets? For instance, where is `home-logo` defined, etc?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月5日 16:11 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/8 "2016-07-05T16:11:05Z")

</div>

All widgets are within the folder `discourse/widgets` in the javascript directory. Some files contain more than one widget if they are smaller pieces that make up a bigger component.

The home-logo is [here](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/home-logo.js.es6#L7).

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [2016年七月17日 14:36 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/9 "2016-07-17T14:36:51Z")

</div>

is it possible to put something next to the search icon using this method?

i’ve tried changing user-notifications:after, and some other widget names. and it didn’t work.

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年七月17日 14:46 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/10 "2016-07-17T14:46:55Z")

</div>

I haven’t played around with it much, but this should get you started:

```plaintext
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('div#test-links', [
                helper.h('a#test1', {
                    href:'/t/joining-sih/494', 
                    text:'Join Us!'
                }),
            ]);
        }
});
</script>

```

```plaintext
div#test-links {
    display: inline;
    float: left;
}

```

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [2016年七月17日 14:53 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/11 "2016-07-17T14:53:47Z")

</div>

that worked 😃 thanks.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [2016年七月17日 15:23 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/12 "2016-07-17T15:23:53Z")

</div>

in right to left language, i can’t bring the links to the position next to search and they go to the left side of user avatar instead.

i mean it doesn’t make any difference if i use header-icons:before or header-icons:after.

any idea how i may fix this?

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年七月17日 15:26 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/13 "2016-07-17T15:26:40Z")

</div>

Try using `position: absolute` and fiddling manually with the position, maybe?

I don’t know much about what changes going to RTL, but it’s worth a shot. The `float: left` above was just a quick thing to show it was possible to get the links there without much trouble.

e.g.:

```plaintext
div#test-links {
    position: absolute;
    left: -150px;
}

```

Puts them in a sorta correct place on my test forum.

---

<div class="post-metadata">

### Author: ![BenRoe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benroe/32/121303_2.png) [@BenRoe](https://meta.discourse.org/u/BenRoe)
#### Post date: [2016年七月20日 22:49 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/14 "2016-07-20T22:49:39Z")

</div>

I use Flexbox to positioning the Links. Maybe it’s useful for someone.

```plaintext
.d-header .title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

#header-links {
    max-width: 50%;
    font-size: 1.2rem;
    margin-left: 30px;
    margin-top: 4px;
}

```

 ![](https://global.discourse-cdn.com/meta/original/3X/9/f/9faeff9f08b2efa430b1fa3297eca076006ab695.jpg)

---

<div class="post-metadata">

### Author: ![BenRoe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benroe/32/121303_2.png) [@BenRoe](https://meta.discourse.org/u/BenRoe)
#### Post date: [2016年七月20日 22:55 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/15 "2016-07-20T22:55:13Z")

</div>

This is my code in the “Customize → `</head>`” section.  
The Link to an external site (not discourse site) doesn’t work.

The links should open [https://example.com/index.html](https://example.com/index.html), but it opens [https://example.com/forum/index.html](https://example.com/forum/index.html)

I found a [thread](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/43) with this bug, but it’s closed. Maybe @eviltrout can help.

```html
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.topic;
        if(!showExtraInfo) {
            return helper.h('div#header-links', [
                helper.h('a', {
                    href:'https://example.com/index.html', 
                    text:'Tracks'
                }),
                helper.h('a.active', {
                    href:'https://example.com/forum', 
                    text:'Forum'
                })
            ]);
        }
});
</script>

```

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年七月20日 23:03 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/16 "2016-07-20T23:03:06Z")

</div>

That’s odd, I just checked and as long as I include `https://` any external links work fine for me, in both the `home-logo:after` and `header-icons:before` locations.

---

<div class="post-metadata">

### Author: ![polusok](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/polusok/32/106741_2.png) [@polusok](https://meta.discourse.org/u/polusok)
#### Post date: [2016年七月21日 09:42 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/17 "2016-07-21T09:42:56Z")

</div>

My links are showing all the time. How to make it hidden if i’m on topic page and there is text on center?

Both variants doesn’t work

> [@Yuun](#):
>
> const showExtraInfo = helper.attrs.minimized;  
> if(!showExtraInfo) {

> [@BenRoe](#):
>
> const showExtraInfo = helper.attrs.topic;  
> if(!showExtraInfo) {

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年七月21日 23:44 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/18 "2016-07-21T23:44:57Z")

</div>

Ah, that’s because the header icons widget doesn’t have a property that can be accessed that shows when topic info is being displayed (attrs.minimized for home-logo, attrs.topic for header). That’s a good point, I’d forgotten about that.

But maybe you can just use the `home-logo:after` decoration from the first post and reposition the links to be near the search bar anyway, right? Just fiddled around with a bit and wasn’t having much luck, but could just be failing at css. 🙂

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [2016年七月22日 00:13 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/19 "2016-07-22T00:13:22Z")

</div>

Okay, here we are. Try using `header-buttons:before` and `helper.attrs.topic`, that seems to be working okay.

Sometimes I might jump the gun a bit, so let me know if there are any issues. 🙂

…not that I can necessarily do anything about them, I just like to be _in the know._

---

<div class="post-metadata">

### Author: ![MikesCafe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikescafe/32/188727_2.png) [@MikesCafe](https://meta.discourse.org/u/MikesCafe)
#### Post date: [2017年五月25日 15:22 UTC](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284/20 "2017-05-25T15:22:45Z")

</div>

Any chance of writing a new summary on this? Tried getting it together but failed… ☹

[下一頁](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284.md?page=2)