ロゴとテキストを連動させる

サポート
1

こんにちは。

Discourseインスタンスのロゴの横にテキストを追加したいと考えており、このトピックがその件で役立ちました。

しかし、テキストにリンクが設定されていません。ロゴと同じように、テキストをフォーラムのURLにリンクするにはどうすればよいですか？

この件についてご指導いただけると幸いです。

2

このサイトでのやり方は、テキストを含む横長のロゴを配置することのようです。そのようにするのはどうでしょうか？

「いいね！」 2
3

基本的に、サイト設定で指定されているとおりにDiscourseのデフォルトロゴが表示され、その後ろにテキストを追加するために:afterコンテンツが追加されます。そのため、テキストはCSSから取得されます。

コードは以下のとおりです。

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "ロゴの後のテキスト";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after {
    display:none;
}

スクリプトは以下のとおりです。

$(document).ready(function() {
	$(window).scroll(function(){
		checkScroll()
    }); 

	function checkScroll() {
		var y = $(window).scrollTop();		
		if (y > 55) {
            document.getElementById("main").classList.add('no-text');
        } else {
            document.getElementById("main").classList.remove('no-text');
        }
	}
	checkScroll();
});

そして、この後ろのテキストにもフォーラムリンクを設定したいのです。（ロゴにはDiscourseの意図どおりウェブサイトへのリンクが設定されています）

4

まず、最初のCSS行にタイプミスがあります（「:」が2回書かれています）。
次に、ロゴを含む実際のリンクを対象にするようにセレクターを変更すると、次のようになります。

.d-header .title a:after {

これにより、テキストが<a>タグ内に配置され、リンクも表示されます。

image

このサイトでの実装方法を見ると、テキストを含む大きなロゴを使用しているようです。それはいかがでしょうか？

奇妙なことに、Robertも関連トピックで同じ質問をしましたが、返信はありませんでした :upside_down_face:

「いいね！」 1
5

理解が正しければ… これで役立ちますか？ :slightly_smiling_face:

これはロゴの後にこのHTMLを追加します <a>After logo text</a>

ヘッダー

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('home-logo:after', helper => {
    return helper.h('a.after-logo', {
      href:'/',
      text: 'After logo text'
    });
  });
</script>
「いいね！」 2
6

携帯電話で見栄えが悪くなります。小さい画面では CSS でテキストを非表示にできますが、ロゴは常に表示したいです。

7

これは完璧です。@Donさん、ありがとうございます。

「いいね！」 1
8

このユースケースでは、携帯電話で別のロゴを使用する方が良いのではないでしょうか？サイト設定の「ブランディング」の下に mobile logo という設定があります。

yoursite/admin/site_settings/category/branding

「いいね！」 1
9

おっしゃる通りです。こんな方法があるとは知りませんでした。古株なので、新しい機能をあまり試していませんでした。ありがとうございます。

なるほど、これで納得がいきました。

「いいね！」 3
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.