カテゴリとタグのボタンを削除する

これらの2つのボタンを簡単に削除する方法はありますか?質問の理由は、Discourseが新規ユーザーにとって少し圧倒的であるという意見を(このサイトで)読んだことがあるからです。カテゴリボタンは、カテゴリタブがすぐそこにあるため少し冗長に感じますし、経験豊富なユーザーはサイドメニューを使ってタグで検索できるからです。私はその機能を気に入っていますが、私の意見では、少し「ごちゃごちゃ」させてしまいます。

CSSタグを見つけて非表示にできることは承知していますが、このタスクを達成するための、よりハック的でない方法があるかどうか疑問に思っていました。おそらく、ユーザーがプラットフォームに慣れたときに自分でそれらをオンにできるようにする機能があれば良いでしょう。

「いいね!」 2

Discourse には、「カテゴリ」または「タグ」ボタンを UI からグローバルに削除または切り替えるための、組み込みの非 CSS 設定はありません。

「いいね!」 1

私のコミュニティのためにそのアイデアをメモしておきます。ありがとうございます!

「いいね!」 1

これらのボタンは検索機能を提供するという点に注意してください。カテゴリやタグが大量にある場合に便利かもしれません。

(私はボタンはそのままにし、サイドメニューからタグセクションを非表示にしました。長くて扱いにくくなるか、表示するデフォルトのタグを指定する必要があるかのどちらかになるため、私はえこひいきをしたくありませんでした :sweat_smile:

CSS
// サイドバーからタグリストを抑制して表示を簡素化
.sidebar-section[data-section-name="tags"] {
 display: none
}
「いいね!」 2

知りませんでした…ありがとうございます

私は、Donの簡単なコンポーネントを使って、匿名ユーザー(ログインしていないユーザーや訪問者)に対してデフォルトでサイドバーを完全に非表示にすることを選択しました。ここで見つけられます (Don、ありがとう)

携帯電話を持っている人なら誰でも、メニューや設定が必要な場合はハンバーガーボタンを探すことを知っているだろうし、私にはサイドバーがない方がUIはずっと分かりにくく、恐ろしく見えます(少なくとも最初は)。最終的に、人々がインターフェースに慣れる(またはメンバーになる)と、サイドバーを発見するでしょう。

とにかく…

これら2つのボタンを消すために見つけ出した秘訣はこれです。

.category-breadcrumb {
display: none
}

これが正しいやり方でなければ、遠慮なく訂正してください

私の意見では、機能性を損なうことなくUIが少しすっきりします

アンディ

追記:

モバイルでは、これらのボタンがデフォルトで消えることに気づいたので、開発者はこれらのボタンが表示されなくても世界が終わるとは思わなかったようです

「いいね!」 2

カテゴリページの上部には、モバイルでパンくずリストのドロップダウンセレクタが表示されます。

また、FKB Social のような一部のテーマのモバイルのディスカバリー(/latestなど)ページでも表示されます。

「カテゴリタブがすぐそこにあるから」という理由で削除したとのことですが、ナビゲーションピルボタンのことを指していると仮定すると、それをクリックしてカテゴリページに移動し、目的のカテゴリを探す必要があります。目的の場所へ直接移動するには、カテゴリドロップダウンから選択する方がはるかに直感的です。特にサブカテゴリを探している場合はなおさらです。また、あなたのサイトでは現在、ユーザーはどのようにタグナビゲーションを行っているのでしょうか?

「いいね!」 2

そして、元のパスを置き換えるために作成したこのクソスクリプト

<script>
document.addEventListener('DOMContentLoaded', function() {
   
    const updateLinks = () => {
        document.querySelectorAll('a[href*="/l/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
        document.querySelectorAll('a[href*="/l/hot"]').forEach(link => {
            link.href = 'https://segredin.com/hot';
        });
        document.querySelectorAll('a[href*="/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
    };
    
    const ocultarElementos = () => {
        // 必要に応じて要素を非表示にするコードをここに追加
    };

    const applyStylesToPosts = () => {
        // 投稿のスタイリングロジックをここに追加
        // 例: document.querySelectorAll('.post').forEach(post => { ... });
    };
    
    const replaceTextNodes = (node) => {
        node.childNodes.forEach(child => {
            if (child.nodeType === Node.TEXT_NODE) {
                child.textContent = child.textContent
                    .replace(/-E-/gi, ' & ')
                    .replace(/-/g, ' ');
            } else {
                replaceTextNodes(child);
            }
        });
    };

    const processTags = () => {
        document.querySelectorAll('.discourse-tag.box').forEach(tag => {
            replaceTextNodes(tag);
        });
        document.querySelectorAll('#sidebar-section-content-tags .sidebar-section-link-content-text').forEach(tag => {
            replaceTextNodes(tag);
        });
    };
 
    const TITLES = {
    "home": "Segredin - Desabafo Anônimo e Contos",
    "hot": "Segredin - Tópicos Populares"
};

const HOMEPAGE_URLS = [
    "https://segredin.com/", 
    "https://segredin.com"
];

const HOT_PAGE_URLS = [
    "https://segredin.com/hot",
    "https://segredin.com/hot/"
];

const getCurrentPageType = () => {
    const currentUrl = window.location.href;
    
    // /hot ページかどうかを確認
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "hot";
    }
    
    // ホームページかどうかを確認
    if (HOMEPAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "home";
    }
    
    return null;
};

const getDesiredTitle = () => {
    const pageType = getCurrentPageType();
    return pageType ? TITLES[pageType] : null;
};

const enforceTitle = () => {
    const desiredTitle = getDesiredTitle();
    if (!desiredTitle) return;
    
    if (document.title !== desiredTitle) {
        document.title = desiredTitle;
    }
};

const startTitleObserver = () => {
    const titleObserver = new MutationObserver(enforceTitle);
    const titleElement = document.querySelector('title');
    if (titleElement) {
        titleObserver.observe(titleElement, {
            childList: true,
            subtree: true,
            characterData: true
        });
    }
    return titleObserver;
};

const monitorUrlChanges = (titleObserver) => {
    let lastUrl = window.location.href;
    setInterval(() => {
        if (window.location.href !== lastUrl) {
            lastUrl = window.location.href;
            const pageType = getCurrentPageType();
            if (pageType) {
                enforceTitle();
                titleObserver.disconnect();
                startTitleObserver();
            } else {
                titleObserver.disconnect();
            }
        }
    }, 300);
};

const mainObserver = new MutationObserver(() => {
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    enforceTitle();
});

    // 初期実行
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    
    const titleObserver = startTitleObserver();
    monitorUrlChanges(titleObserver);
    
    mainObserver.observe(document.body, { 
        childList: true, 
        subtree: true 
    });

    document.addEventListener('page:changed', () => {
        processTags();
        enforceTitle();
    });
});
</script>

これは一時的に動作しますが、今後このコードを改善する予定です

ちなみに、結果は次のとおりです。

もしこれがナビゲーションピルボタンであれば、その通りです。

すみません、何と呼べばいいのか分かりませんでした。

同意します。

しかし…新規ユーザーはどこに行きたいか知っているでしょうか?彼らはサブカテゴリーを探しているでしょうか?

サイドバーメニューでしょうか?

初めて利用するユーザーは、特定のタグを探すことを知っているでしょうか?

もしかしたら、私の考え方が間違っているのかもしれません。私は、自分のインスタンスを初めて利用するユーザーの視点から見ようとしていますが、数年間Discourseフォーラムを利用してから自分で立ち上げたため、それが難しいです。

もしかすると、私の特定の状況の別のユニークな点が、Discourse全般では一般的ではないのかもしれません。私はライブイベント(スポーツイベントの取材)を行っています。イベントで人々が近づいてきて、ウェブ上で私を見つける方法について詳しく知りたいと思うことがよくあります。放送中も、フォーラムを見つけるように勧めています。フォーラムにリンクするQRコード付きの看板やステッカーを設置しています。

これらの人の中には、若くて携帯電話の操作に慣れている人もいれば、携帯電話を持っていても電話が鳴ったときに電話に出ることさえほとんどできない高齢者もいます。私は、両方のグループがフォーラムをじっと見つめて、次に何をすべきかわからないのを見たことがあります。これは特にDiscourseの問題ではなく、私のYouTubeチャンネルでも同じことを見かけます。

サミーさん、ありがとうございます。あなたのコードを勉強しています。

(それがどう機能するかを理解できたら :thinking: :face_with_monocle: :confused: :joy: )テーマの head セクションにこのようなものを挿入できると推測しています。

「いいね!」 1

最終的に、上記で説明したようにCSSを使用してカテゴリボタンとタグボタンを削除しないことにしました。なぜなら、ユーザーがカテゴリをクリックした後、カテゴリ一覧表示に戻る方法がなかったからです。最近、これが解決策になるかもしれないテーマコンポーネントを見つけました。

「いいね!」 1