ロゴリンクの宛先を変更

サポート
1

グループごとに独自のカテゴリを持つサイトを持っています。これらのカテゴリを、グループ所有者のロゴでブランド化したいという要望があります。

各カテゴリには、以下のようなコードが含まれています。

.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

問題は、ロゴをクリックするとカテゴリページではなく、サイトのホームページに移動してしまう点です。これは、以下のコードで（ほぼ）解決されています。

<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // ベース URL への移動を防止
    event.preventDefault();
    
    // div の ID からアクティブなカテゴリを取得
    div = $("body[class*='category-']")[0];

    // category- で始まるクラスからスラッグを抽出
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // href をスラッグ URL に設定
    document.location = "/c/" + slug + "/";
  })
});
</script>

カテゴリページでもトピックページでもロゴをクリックすれば、カテゴリページに移動します。やったね！

しかし、ロゴとヘッダーの下端のわずかな隙間をクリックすると、カテゴリページではなくホームページに移動してしまいます。どちらの動作になるかを区別するのは非常に困難です。Chrome の下部の URL にマウスを合わせても、どこに移動するかに関わらず、サイトのホームページの URL しか表示されません。

（ホームページへのリンクを追加するために、Custom Header Links を使用しました。これが上記の動作とは無関係だと考えています。）

また、カテゴリごとのカテゴリはグループメンバーにのみ表示されるため、サイト自体を共有することができません。

2

おそらく、#site-text-logo を含むリンクのわずかな部分をクリックされているのではないでしょうか？

構造は div.title a #site-text-logo のようになっており、#site-text-logo 自体にはクリックが検知されますが、それを囲む a タグには検知されていないようです。

JS 内で .title a リンクに対して event.preventDefault(); を実行するか、あるいは CSS で .title a {pointer-events: none;} を試してみてください。

3

お疲れ様です。本当に感謝しています。Postgres の重複キーの問題を解決するのは確かに頼もしいですが、CSS は最もシンプルなものでしか意味がなく、JavaScript の構文もやっと理解できる程度です。

でも待って。

全くの余談ですが、妻の Kanban サイトでサイトロゴをクリックすると TODO カテゴリに移動するようにしました。これには、ホームページを任意の URL に設定できるテーマコンポーネント を作成しました。実装は以下の通りです：

<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

もしかしたら、こんな風にやるべきでしょうか？ただ、どのカテゴリのホームページをリマップしたいのかをどうやって判断すればよいか分かりません。カテゴリ ID の配列を持つサイト設定にするのはどうでしょう？現在のカテゴリを取得し、それがサイト設定の配列に含まれているかどうかを確認する方法は、Google で調べればできそうだと思います。

編集：ふむ、でも <script type="text/javascript"> 内で現在のページのカテゴリをどうやって特定し、setDefaultHomepage を選択的に変更すればよいのか分かりません。

これは簡単そうに思えますか？

でも元の解決策に戻りましょう

それは正しそうですが、だからといって確証があるわけではありません。

私の推測では、何らかの理由で <h1> は正しい動作をするのに、<a> がサイトホームに移動してしまうのではないかということです。

私は原始人のようなものです。それが何を意味するかよく分かりません。すでに JavaScript 内にそれに似たようなコードがいくつかあります。新しい $(document).ready(function() { を作成すべきでしょうか？それとも、既存のコードに $(".title #site-text-logo").click(function(event){ を追加するのでしょうか？

私が試したものは何も変わらないようでした。

こちらは少し理解できましたし、以下のように実装しました：

/* ロゴ付近の小さな領域がホームにリンクしないようにする */
.title a {pointer-events: none;}

これで何かが変わりました！ロゴのどこをクリックしても何も起きなくなったので、成功したことが分かります。