So, post-vdom’ing of the header, this old code: {{#unless showExtraInfo}} Join us! About SiH {{/unless}} 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 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' }) ]); } }); 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. :sweat: Thanks in advance, generous stranger. :slight_smile: 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?

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.

Ah, well this worked: 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' }) ]); } }); 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. :slight_smile: 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. >.>

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. :slight_smile:

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.

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?

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.

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.

I haven’t played around with it much, but this should get you started: 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!' }), ]); } }); div#test-links { display: inline; float: left; }

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?

Adding header links post vdom upgrade

תמיכה

codinghorror (Jeff Atwood) 26 באפריל,‏ 2016,‏ 11:50pm 2

Probably something @eviltrout can advise on tomorrow.

נושא		תגובות	צפיות
Adding links to Discourse header Product Support	16	5982	13 בספטמבר,‏ 2016
Help us test the new header code! Feature performance	27	11370	11 במאי,‏ 2016
Use decorateWidget to add text link to header Development	5	752	22 בדצמבר,‏ 2023
Create hyperlink from home logo Product Support	2	260	26 ביוני,‏ 2024
Links into the header block Development	1	896	3 באוגוסט,‏ 2022

Adding header links post vdom upgrade

נושאים קשורים