皆さん、こんにちは。
人事チームは、以下のようなカテゴリリストの代わりに、カテゴリボックスを採用することにしました。
ただし、Revolut のコミュニティページのように、最新トピックをカテゴリの下部に表示することも希望しています。
既存の設定か CSS を用いてこのように実現できるか検討中ですが、うまくいきません。
ご提案があれば、ぜひ教えてください。
Try to work with components
You can use: categories-and-latest-topics
In this mode, there is a connection and categories and recent topics.
<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>
<div class='column categories'>
{{categories-only categories=categories}}
</div>
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
Next, you override: categories-only
<script type='text/x-handlebars' data-template-name='components/categories-only'>
The contents of the file...
</script>
Perhaps from this file it is necessary to move the box with the categories, or to do simply to change the css.
Options think very many.
Useful material
Another option is to simply structure your category directly
Then just change the css, which is even easier. )
Ideally I would prefer to do it like you have suggested, however, there isnt a way to display categories in a grid layout and have the latest topics below. 
I suggest building a static header customization if your categories do not change much. Then you could have whatever layout you like above the topic list.
これまでにいくつかのサイトで、これまたは同様のものを実装してきました。これをテーマの <head> セクションに追加すると、すべてのカテゴリがホームページの上部（および /latest、これはホームページと同じと仮定）に表示されます。
その後、必要なことは、このレイアウトを好きなように構築するための CSS を追加することだけです。これは、API や Handlebars テンプレートの使用についての良い入門となります。
<script type="text/discourse-plugin" version="0.8">
const ajax = require('discourse/lib/ajax').ajax;
api.registerConnectorClass('below-site-header', 'custom-homepage', {
setupComponent(args, component) {
component.set('hostname', window.location.hostname);
api.onPageChange((url, title) => {
if (url == "/" || url == "/latest"){
$('html').addClass('show-custom-homepage'); // ホームページを表示
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // カテゴリ一覧を取得
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // ホームページを非表示
$('html').removeClass('show-custom-homepage');
component.set('displayCustomHomepage', false);
}
});
}
});
</script>
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/custom-homepage'>
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper">
<div class="wrap wrap-category-boxes">
<div class="homepage-category-boxes">
{{#each categoryName as |c|}}
<a href="/c/{{c.slug}}" class="box">
<div class="homepage-category-box">
{{#if c.uploaded_logo}}
<div class="category-image-wrapper">
<img class="homepage-category-image" src="{{c.uploaded_logo.url}}" />
</div>
{{/if}}
<h2>{{#if c.read_restricted}}<i class="fa fa-lock"> </i>{{/if}}{{c.name}}</h2>
<p>{{c.description}}</p>
</div>
</a>
{{/each}}
</div>
</div>
</div>
{{/if}}
</script>
It looks very nice. How I can to add Font Awesome 5 instead of images? Many thanks!
Hello,
Thank you for this code snippet! I am working on a project where I need to do some things on this principle (not necessarily categories) and I would like to put this directly in the plugin that I develop.
I know where to put the template handlebars, but I can not find the folder / file where to put the javascript. Could you tell me how to proceed?
Thank you,
Thymotep
I love this idea! Looking forward to test such a theme component or plugin
はい、エラーが発生していました！ご報告ありがとうございます。上記の投稿のコードを修正しました。
JavaScript で strict mode を有効にしたため、categoryName = []; を宣言する必要があります。その行を let categoryName = []; に変更することで修正されました。
このトリックを行うコンポーネントへのGitHubリンクは404です。
わかりました。hbsをDiscourseに追加できるものとして機能させる方法を見つける必要があります。コンポーネントのファイルとしてこれを使用する必要があると思いますが、それに関するチュートリアルを作成する必要がありますか？
簡単なテーマのチュートリアルを見ましたが、それが正しい方向でしょうか？
以前やったことがないので、答えがわかりません。テーマ開発者のチュートリアルは、確かに良い出発点になるでしょう。
そのページで**「Mounting widgets」**を検索すると、ページの別の場所にウィジェットを表示する例が見つかるはずです。
この howto トピックも例として役立つかもしれません。
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
成功したらお知らせします。それまでの間、Airテーマを適用しましたが、かなり満足しています。それでも、カテゴリトピックの下に最新の投稿を表示したいと思っています。
かつて25年前にmsvc++プログラマーでしたが、PlayストアでリリースされたFlutterアプリを構築することに成功しました。しかし、オープンソースAPIは私にとって簡単ではありません。どうなるか見てみましょう。可能な時にアップデートを投稿します。
成功しましたか？同じことをしたいのですが、簡単な方法があるのか、それともテーマを掘り下げて時間を費やす必要があるのか疑問に思っています。
デスクトップのカテゴリページスタイル「ボックスとサブカテゴリ」設定を使用してテーマコンポーネントを作成し、ボックスの下にコードを追加しました。現在、サイト全体の最新トピックを一覧表示する方法を調べています。
<script type="text/x-handlebars" data-template-name="/connectors/category-boxes-after-boxes/mwp">
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
問題は、これが単純に「すべて既読です」と表示されることです。
諦めました。今はほとんど標準的なものを使っています。