Custom Header Links

これは一般的に真実であり、CSSは何かを隠すための安全な方法ではありません。なぜなら、賢い人は何らかの理由でページのソースを見る可能性があるからです…しかし、私たちはクローラーにJavaScriptなしのビューを提供しているので、その場合、テーマによって追加されたコンテンツは通常インデックスに登録されません。

「いいね!」 3

プレビューが機能しません

「いいね!」 3

プレビューリンクを更新しました。これで動作するはずです!

「いいね!」 3

このコンポーネントを使用して、実際のURLの代わりにjavascript:script('function');でJavaScriptを呼び出すことは可能ですか?

(ほぼ機能しているように見えますが、CSP違反が発生しています。)


追加編集:
機能させることができました。もし他に誰かが疑問に思うことがあるなら、URLの代わりにコンポーネントのUIで#を使用し、イベントリスナーを使用してJavaScript関数を呼び出しました。

他の人はもっと良い方法を知っている可能性が高く、もし知っていればその知識を共有してくれることを願っています!

「いいね!」 2

ヘッダーリンクのフォントスタイルとサイズを調整したいのですが、それを可能にする正しいCSSを教えていただけますか?よろしくお願いします!

「いいね!」 2

@brentoshiro 様、プロパティはスタイリングに必要なものによって異なりますが、リンクの選択方法は以下のようになります。

すべてのヘッダーリンクをスタイリングする場合:


.custom-header-links .headerLink a {
    font-size: 1rem; // お好みのフォントサイズに置き換えてください
    color: #96b67b; // var(--tertiary) のような変数も使用できます
    font-style: italic; // オプション: normal, italic, oblique
}

特定のリンクをスタイリングする場合
リンクは、リンクのタイトル(ダッシュで区切り、小文字にする)を使用してアクセスできます。「Privacy」の場合は以下のようになります。

.custom-header-links .headerLink.privacy-custom-header-links a:hover {
    color: red;
}

または、タイトル属性を使用してリンクのタイトルを入力します。

.custom-header-links .headerLink a[title='Our Privacy Policy'] {
    color: purple;
}

ホバー時のスタイルを追加するには、a タグの後に :hover を追加するだけです:


.custom-header-links .headerLink a:hover {
    color: var(--primary-low);
}
「いいね!」 2

こんにちは、リンクを左寄せ/右寄せではなく中央揃えにすることは可能ですか?

「いいね!」 1

これは本当に素晴らしいですね。グループごとに異なるヘッダーリンクのリストを許可するには、どのくらいの追加作業が必要になるか疑問に思っています。私たちのサイトにはスタッフと学生がおり、各グループに異なるプライマリリンクをヘッダーで提供できればと思っています。

「いいね!」 3

これを実現するには、各グループを異なるテーマにし、各テーマでこのテーマコンポーネントの独自のコピーを使用します。

これは、2つのグループのうち1つが非常に静的(または少なくとも小さい)場合、または少なくとも動的なグループが1つしかない場合にうまく機能します。スタッフグループがそれに最適のようです。

次に、学生リンクをサイトのデフォルトテーマにし、スタッフメンバーにはスタッフリンクを手動で設定します(UIまたはRailsコンソール経由)。

「いいね!」 6

私もまさにこのことを尋ねようとしていたところでした。ログイン画面に表示されることにようやく気づきました。

私の場合は、ヘッダー名は同じままですが、リンクの 1 つが毎月変更されます。リンクを非表示にするためにコードを使用してヘッダーを非表示にすることは可能ですか?たとえば、あなたの例を使用すると、次のようになります。

Customer Support
私のリンクは 2022-customer-support/26903 です。次に customer-support-july などとなります。

したがって、customer-support-june を非表示にすれば問題なく機能しますが、毎月更新する必要があります。「FAQ」を非表示にするだけの場合とは異なり、また /26903 を CSS コードに追加できないため、この特定のリンクを非表示にすることはできません。ただし、ページを公開することで回避できる可能性がありますか?他に方法がない場合、これはまったく問題ではありません。労力はかかりませんが、忘れてしまうことが保証されます。

「いいね!」 2

こんにちは。テキストの翻訳は可能かどうか、お伺いしたく存じます。コンポーネントに翻訳キーが含まれている場合は、それらを含めることも可能でしょうか? :slight_smile:

「いいね!」 2

デフォルトでログインしていないユーザーに表示されない理由は何ですか?

無視してください。何らかの理由で、コンポーネントをテーマに適用しても表示されません。代わりに、コンポーネントをテーマに追加する必要があります。

「いいね!」 1

UTF-8アイコンの使用

リンクアンカーとしてUTF-8アイコンを使用できることに注意してください。

この場合、他のヘッダーのドロップダウンアイコンに合わせるために、次のCSSを試すことができます。

.custom-header-links .headerLink {
    margin-top: -1px;
}
.custom-header-links .headerLink a {
    padding: 3px 10px;
    color: var(--primary-low-mid);
    font-size: var(--font-up-5);
    font-weight: bold;
}
.custom-header-links .headerLink:hover {
    background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
    color: var(--primary-medium);
}

これは次のようなことを行います。

image

image

「いいね!」 1

このコンポーネントをインストールしてリンクを追加しましたが、表示されませんでした。

言語を入力すると、サイトにリンクが表示されなくなることがわかりました。当初は必要ありませんでしたが、完全性のために「blank」を追加しました。 「blank」を「en」に変更しても、表示されませんでした。値を完全に削除すると、私の場合は問題が解決しました。理由はわかりませんが、同様の問題を抱えている人がいる場合に役立つかと思い、言及しておきます。

「いいね!」 2

私も先日、それに引っかかってしまいました。

デフォルトの例を変更して、より直感的にできないか検討してみます。

「いいね!」 2

デフォルト設定からロケールを削除しました: UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub

これにより、サイトがどのロケールに設定されていても、デフォルトが表示されるはずです。@packman@JammyDodger、ありがとうございました!

「いいね!」 2

最後のアップグレード後にリンクが消えました(PC、Ubuntu、Brave)
確認していただけますか?

@cmdntdspinoff topic を参照してください。おそらく、これにより解決される管理 | アップグレードの下で Discourse のアップグレードが利用可能です。

「いいね!」 1

最近、カスタムリンクが3つのデフォルトリンクに置き換わってしまいました。プレビューでは機能します。

これはホスティングサイトです。テーマが変更されて、カスタムヘッダーリンクで認識されなくなった可能性があります。確認して、また報告します。

クワック!プラグインをさまざまなテーマでプレビューしましたが、すべて機能しました。ログアウトしても機能しました。ブラウザを切り替えても機能しました。これはシュレーディンガーの猫の強い匂いがします。

「いいね!」 1