カスタマイズで特定のHTMLタグを許可する方法

サポート
1

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!

2

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?

3

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:)

「いいね！」 5
4

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

5

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…

「いいね！」 1
6

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:

「いいね！」 3
8

@tshenry さん、こんにちは。

Discourse で GCSE を構築できた方法について、コードのサポートをお願いできますでしょうか。

ありがとうございます。

9

@yyhmsg さん、こんにちは。

GCSE の実装についてお手伝いいただけますでしょうか。

10

残念ながら、私はもう GCSE を使用していないため、あまりお手伝いできません。一時期は正常に動作させていましたが、全体的に Google からの移行を進め、Discourse のバージョンがいくつか更新される前に完全に削除しました。上記に投稿された方法は機能しましたが、無限スクロールの問題や Discourse の仕様変更に対応するために、かなり試行錯誤する必要がありました。

どのような対策を試されましたか？また、どのようなエラーや問題が発生していますか？

よりクリーンで簡単な選択肢として、管理をあまり必要としない方法としては、上部に Google 提供の検索ページ、あるいはご自身で用意した何らかのページへ移動するボタンを追加するという方法はいかがでしょうか。

「いいね！」 1
11

@yyhmsg、

コードを実装しました。検索ボックスを作成するためにいくつかの CSS 変更を加えました。しかし、「検索」オプションをクリックすると、デフォルトで Discourse 検索に移動してしまい、Google 検索には移動しません。ここでつまずいています。

12

設定は完了しているが、検索ユーティリティが誤っている場合、クエリパラメータ名を変更する必要があるかもしれません。両方が q= にならないようにするためです。

queryParameterName String クエリパラメータ名です。例えば、q（デフォルト）や query などです。これは URL に埋め込まれます（例：Example Domain

したがって、GCSE 側では qr= のような別の queryParameterName を使用するように設定する必要があります。その場合、検索を実行すると、Discourse が q= を期待しているため、GCSE だけが回答します。

13

@yyhmsg さん、こんにちは。

GCSE のオーバーレイテーマを使用しています。検索結果を別のページではなく、同じページに表示したいと考えています。Discourse では 2 ページ形式を使用できないためです。しかし、それでも検索ボタンを押すとクエリ文字列 “?search=search+term” が追加されてしまいます。

これでは「最新のトピックはありません」と表示されるだけで、検索結果が得られません。
何か見落としていることがあるでしょうか。

よろしくお願いいたします。

14

ご使用のコードと、可能であれば作業中のサイトへのリンクを示していただければ、最もお手伝いできると思います。

15

@yyhmsg さん、こんにちは。

私が作業しているウェブサイトは mpl.co です。
Google Meet などで画面共有しながらお話しできますでしょうか。ご都合の良いお時間を教えていただけますと幸いです。

よろしくお願いいたします。

16

残念ながら、私は医療従事者でスケジュールが忙しく、患者さんの間でこの種の作業に取り組めるのは数分間だけです。

例えば、このプラグインはいかがでしょうか：https://github.com/sylque/discpage。これを使えば、ページ内のすべての GCSE コードをそこに配置し、ヘッダーにそのページへのリンクボタンを置くことができます。かなりすっきりした方法だと思います。

17

@yyhmsg さん、ありがとうございます。こちらでも試してみます。ご提案いただき、ありがとうございました。