How To Allow Certain HTML tags in Customization

I’m trying to add the google custom search engine to the header of our discourse forum. I put in the javascript to the head tag and then in the body there is something like <gcse:search linkTarget="_self"></gcse:search> - which will show the google custom search engine.

When I put this in and save it however, it doesn’t show up on the site. I imagine it is being removed by some sort of html filter? (and I should add that by “doesn’t show up” I mean the code itself, not just that the javascript isn’t loading somehow - when I surround it with <!-- -->, the code passes through, but obviously doesn’t work).

Is there a way to get this to pass through?

Thanks!

Looking at this it apparently strips gcse - so I get:

<search linktarget=\"_self\"><\/search>

Which doesn’t load anything

Instead of <gcse:search linkTarget="_self"></gcse:search> it strips out the : and the /gcse

I tried <gcse\:search><\/gcse\:search> but then I get <gcse search> (no : ) and </gcse> (no : or search)

Is there another way to get a variable to pass through the customization editor so that I can get it to show up?

This is just a proof of concept, so you’ll have to play around with it to see how/if it can work for your needs. Try adding this to the </head> tab of a theme:

<script type="text/discourse-plugin" version="0.8.18">
    api.decorateWidget('header-contents:after', helper => {
        return helper.rawHtml(`<gcse:search linkTarget="_self"></gcse:search>`);
    });
</script>

(Edit: improved the answer a little after having more time to look at it :slightly_smiling_face:)

That’s awesome - Thanks! Works perfectly. Both versions seemed to work the same, but I went with your current edit.

Actually I may have spoke a little too soon… It’s fairly intermittent when it will show up. I had both versions of your script in so I thought this newer one was working (and it did once - minus putting the search bar on top of the menu, etc. - lower half of the header).

The first script appears to work on the front page only if I put in at the body close section - then it shows up at the top of the page oddly.

I’d like to try to get it right below the header bar on top on every page.

Instead of ‘header-contents:after’ - is there a ‘body-contents:before’? that I could try. I went through the api docs, but couldn’t find anything that showed such a declaration…

Sure, if you change it from header-contents:after to just header:after, that should do the trick. You will need to style it with CSS to get it exactly how you want it, but that should get you on track :slightly_smiling_face:

안녕하세요 @tshenry,

discourse에서 GCSE를 구축하신 방법에 대한 코드를 공유해 주실 수 있을까요?

감사합니다.

yyhmsg님, 안녕하세요.

GCSE 구현에 대해 도움을 주실 수 있을까요?

안타깝게도 저는 더 이상 gcse를 사용하지 않기 때문에 많은 도움을 드리기 어렵습니다. 한동안 잘 작동했지만, 결국 구글 서비스 전반에서 손을 뗀 후 discourse의 여러 버전 전부터 이를 제거했습니다. 위에 게시된 방법은 작동했지만, 무한 스크롤 문제와 discourse의 변경 사항 사이에서 꽤 많이 조정해야 했습니다.

지금까지 무엇을 시도해 보셨으며, 어떤 오류나 문제가 발생했나요?

관리 부담이 적고 더 깔끔하며 쉬운 방법으로는, 상단에 구글이 호스팅하는 검색 페이지나 여러분이 원하는 다른 위치로 이동하는 버튼을 단순히 포함하는 것이 있을 수 있습니다.

@yyhmsg,

코드를 구현했습니다. 검색 상자를 만들기 위해 CSS를 몇 가지 수정했습니다. 하지만 검색 옵션을 클릭하면 기본적으로 Discourse 검색으로 이동할 뿐, Google 검색으로 이동하지 않습니다. 여기에서 막혔습니다.

설정은 되어 있는데 검색이 잘못된 검색 유틸리티로 가고 있다면, querysearchparameter를 변경해야 합니다. 이렇게 하면 두 서비스 모두 q=를 사용하지 않게 됩니다.

queryParameterName String 쿼리 파라미터 이름입니다. 예를 들어 q(기본값) 또는 query입니다. 이 값은 URL에 포함됩니다(예: Example Domain).

따라서 gcse는 qr=와 같이 다른 queryParameterName을 사용하도록 설정해야 합니다. 그러면 검색을 제출할 때 discourse는 q=를 기대하므로 gcse만 응답하게 됩니다.

yyhmsg님 안녕하세요,

GCSE용 Overlay 테마를 사용 중인데, 검색 결과를 다른 페이지가 아니라 현재 페이지에 표시하고 싶습니다. Discourse에서는 두 가지 페이지 형식을 동시에 사용할 수 없기 때문입니다. 하지만 여전히 검색 버튼이 쿼리 문자열 "?search=search+term"을 추가하고 있습니다.
이로 인해 “No Latest Topics”(최근 주제 없음) 메시지가 표시되고 검색 결과가 나오지 않습니다.
무엇을 놓치고 있는지 알려주시면 감사하겠습니다.
감사합니다.

사용 중인 코드와, 가능하다면 작업 중인 사이트의 링크를 보여주시면 가장 큰 도움이 될 것입니다.

@yyhmsg 님, 안녕하세요.

제가 작업 중인 웹사이트는 mpl.co 입니다.
화면을 공유하기 위해 Google Meet 등으로 연결할 수 있을까요? 편하신 시간을 알려주세요.

감사합니다.

불행히도 그럴 수 없습니다. 저는 환자 간격이 짧은 바쁜 일정을 소화하는 의료 제공자라, 이런 작업을 할 수 있는 시간이 환자를 돌보는 사이에 단 몇 분뿐입니다.

혹시 이 플러그인을 제안해 드릴까요 - GitHub - sylque/discpage: A Discourse plugin to create static pages and attach discussions to headings · GitHub - 페이지 내부의 gcse 코드를 전체적으로 넣고, 헤더에 해당 페이지로 연결되는 버튼만 두는 방식입니다. 꽤 깔끔해 보일 것 같습니다…

@yyhmsg 감사합니다, 제 쪽에서 시도해 보겠습니다. 조언해 주셔서 감사합니다.