これは、redditish テーマでも動作しますか？
このテーマコンポーネントに関連して、レート制限の問題を経験した方はいらっしゃいますか？
「いいね！」 1
画像を表示できる投稿を取得するためにカテゴリトピックを追加することは可能かどうか分かりません。カスタムHTMLを使用して独自のコードを作成しましたが、効果がないため、お願いします！
html
<head>
<style>
.topic-list {
list-style: none;
padding: 0;
}
.topic-list-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.topic-list-item img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
}
.topic-list-item a {
text-decoration: none;
font-size: 16px;
color: #333;
}
.topic-list-item a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="topic-list-container">
<h2>最新ゲーム投稿</h2>
<ul class="topic-list" id="topic-list">
<!-- ここでの投稿はJavaScriptで動的にレンダリングされます -->
</ul>
</div>
<script>
// データを取得して投稿をレンダリング（最大5件）
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // JSONデータを解析
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// 投稿の配列を取得し、最大5件に制限
const topics = data.topic_list.topics.slice(0, 5); // 最初の5件のみ取得
topics.forEach(topic => {
// リストアイテムを作成
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// 画像要素を作成
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // 画像がない場合はプレースホルダー画像を使用
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // 画像クリックで投稿に遷移
};
// タイトル要素を作成
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // タイトルクリックで投稿に遷移
title.textContent = topic.title;
// 画像とタイトルをリストアイテムに追加
listItem.appendChild(image);
listItem.appendChild(title);
// リストアイテムをリストコンテナに追加
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
まず、このコンポーネントが本当に気に入っています。素晴らしい仕事をしていただきありがとうございます！
トップコントリビューターとそのタイムスケールに関するチャッターに気づきましたが、毎月トップユーザーにしたいと思っています。これを達成した人はいますか？
ジョーより
period パラメータに monthly の値を設定することで可能になるはずです。これは元の投稿のパラメータリストにはありませんでしたが、現在更新されています！
「いいね！」 2
このコンポーネントで最新の投稿を取得できません。
変更したコードは表示されますが、他のカテゴリをクリックすると消えてしまいます。
このコンポーネントがJSやリフレッシュをサポートしてくれることを強く願っています。なぜなら、私が書いたコードコンポーネントは最新の投稿コンテンツを取得できず、機能しないからです。そのため、手動で作成しました。更新されることを願っています。tc-right-sidebarに埋め込んだ後、切り替えると利用できなくなりました。私も新米コーダーなので、この機能が更新されることを切に願っています。どうか、どうか、どうか、どうかお願いします。
HTML+JS
// DOMが完全に読み込まれてからコードを実行することを保証
document.addEventListener("DOMContentLoaded", () => {
// サイドバーコンテナを取得
const sidebar = document.querySelector(".tc-right-sidebar");
// サイドバーコンテナが見つかったか確認
if (!sidebar) {
console.error("Sidebar container .tc-right-sidebar not found!");
return;
}
// おすすめコンテンツを追加
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>最新ゲーム投稿</h2> <!-- アイコンとタイトルを追加 -->
</div>
<ul class="recommendation-list">
<!-- デフォルトのプレースホルダーコンテンツ -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Placeholder Image 1">
</a>
</li>
</ul>
</div>
</div>
`;
// データを動的にロード
fetchTopics();
// テーマ変更を監視
observeThemeChanges();
});
/**
* 指定されたAPIからトピックデータを取得
*/
async function fetchTopics() {
try {
// APIデータをリクエスト
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Data retrieval failed");
}
const jsonData = await response.json();
// 最初の4つのトピックデータを抽出
const topics = jsonData.topic_list.topics.slice(0, 4).map(topic => ({
id: topic.id,
title: topic.title,
slug: topic.slug,
image_url: topic.image_url || "https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg",
}));
// ページにレンダリング
renderTopics(topics);
} catch (error) {
console.error("Error fetching data:", error);
}
}
/**
* おすすめコンテンツをページにレンダリング
* @param {Array} topics - トピックデータ
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // プレースホルダーコンテンツをクリア
.custom-sidebar {
padding: 10px;
background-color: #fff; /* 白背景 */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* タイポ修正: "23x" から "23px" へ */
margin-bottom: 10px;
color: #333; /* タイトルは黒 */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* 固定幅 */
height: 156px; /* 固定高さ、一貫性を保つ */
object-fit: cover; /* 画像コンテンツのアスペクト比を維持 */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.recommendation-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
topics.forEach(topic => {
const link = `https://www.justnainai.com/t/${topic.slug}/${topic.id}`;
const image = topic.image_url;
const listItem = document.createElement("li");
listItem.className = "recommendation-item";
// おすすめアイテムのHTMLを作成
listItem.innerHTML = `
<a href="${link}" title="${topic.title}" target="_blank">
<img src="${image}" alt="${topic.title}">
</a>
`;
recommendationList.appendChild(listItem);
});
}
CSS
.custom-sidebar {
padding: 10px;
background-color: #fff; /* 白背景 */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* タイポ修正: "23x" から "23px" へ */
margin-bottom: 10px;
color: #333; /* タイトルは黒 */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* 固定幅 */
height: 156px; /* 固定高さ、一貫性を保つ */
object-fit: cover; /* 画像コンテンツのアスペクト比を維持 */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.recommendation-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
Ember Component (https://guides.emberjs.com/v5.5.0/upgrading/current-edition/glimmer-components/ を参照。例は Plugin および Theme component を参照) にすると、個別の Theme Component で追加し、Ember Component 名で参照できるようになります。
これにより、同じシステムを使用する Bars (https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216) でも動作するようになります。
(注: Theme Component と Ember Component を混同しないでください。1つの Theme Component には複数の Ember Component を含めることができます)
「いいね！」 2
この問題を解決できましたか？すべてのイベントを、イベントが含まれているカテゴリに関係なく、すべてのカテゴリに表示したいと考えています。
「いいね！」 2
残念ながら、そうではありません。
その場合、ホームページだけにサイドバーを表示する方法は何かありますか？
サンドボックス環境でこれを試していたのですが、カレンダーブロックをカテゴリページに表示できると便利ですし、使用するカレンダーを指定できるとさらに良いと思います。
イベントカテゴリがあり、そこにカレンダーがあります（最終的にはグループによるアクセス制限がかかります）。しかし、制限されているグループのメンバーが、イベントへの参加を促すためにプラットフォーム上のどこからでも今後のイベントリストを見られるようにしたいのです。
グループベースの制限がどうなるかはわかりません。まだテスト段階です。
しかし、一般カテゴリを見ると、右側のサイドバーブロックに「今後のイベントはありません」と表示されます。しかし、「すべて表示」をクリックすると、イベントカレンダーに移動し、1週間後のテストイベントが表示されます。
ロバートのテーマコンポーネントを確認しましたか？
必要であれば予算があれば、カレンダーイベントをサイドバーや好きな場所に入れるテーマコンポーネントを作成できるかもしれません。
「いいね！」 1
Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab で修正版を共有しました。レイアウトはサイドバー用ではありませんが、私のHomepage Blocksコンポーネント用です。それでも、ロジックはどのブロックレイアウトフレームワークでも機能するはずです。
「いいね！」 3
私たちにとっては、最新ページやホットページに適切なブロックを表示するだけで十分です。リポジトリをフォークし、ルートが指定されていない場合のデフォルトの動作を変更しました。これを行うには、javascripts/connectors/before-list-area/tc-right-sidebar.js ファイルを変更し、最後の行を次のように変更します。
// ルートが指定されていない場合は、「最新」または「ホット」ページにのみ表示します
return [\"discovery.latest\", \"discovery.hot\"].includes(currentRouteName);
Discourse は初めてなので、この変更のメンテナンスにどれくらいの手間がかかるかはわかりませんが、様子を見てみましょう。
「いいね！」 1
show_in_routes 設定で discovery.latest と discovery.hot を使用してみましたか？理論的にはコンポーネントをフォークする必要がなくなるはずです。
これでうまくいったようです 
ありがとうございます！
「いいね！」 1
すみません、何が間違っているのかわかりませんが、サイドバーをページに表示させることができません。
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
皆さん、こんにちは。
このコンポーネントを使用したことがある方、またはカスタムコンテンツを使用して画像のハイパーリンク付きマーキーを作成したことがある方はいらっしゃいますか？
イベントページや記事ページにリンクされた画像の一定のマーキーを持つ小さなセクションを設けたかったのです。
よろしくお願いします。
ジョー
カテゴリ内のトピックについて、「任意のトピック」とすることは可能ですか？
1つのカテゴリ内に7〜8個のトピックを作成し、その中から2〜3個を右側の「サイドバー」に表示したいのですが、可能でしょうか？
このサイドバーを固定して、スクロールしても表示されたままにすることは可能ですか（左側のナビゲーション／カテゴリー列のように）？
「いいね！」 3