現在、イベントのOneboxはあまり良くありません。基本的に、通常のトピックOneboxと変わらず、日付、時刻、説明などが含まれていません（回避策としてトピックタイトルに含めない限り）。
当サイトからのイベントの例はこちらです。
カレンダーでクリックすると表示される新しい（そして素晴らしい）カードをイベント用にフックして、それらをOneboxとして提供することは可能でしょうか？例えば：
これはまったく実現不可能かもしれませんが、イベント投稿のメタデータを変更して、特に内部で重要なイベント情報を強調するような方法でOneboxできるようにすることは可能でしょうか。
投票は残り0票ですが、それでもあなたの投票をさせていただきます:wink:、これによりイベントのプロモーションがさらに輝くでしょう。
@chapoi / @j.jaffeux これについて考えていました。
ここで必要な根本的な変更は、適切なイベントURLを導入することだと思います。これにより、それらを使用してワンボックス化できます。そして、ワンボックス化する代わりに：
https://SITE/t/slug/123
次のようにワンボックス化します。
https://SITE/event/slug/1234
これは少しパンドラの箱を開けることになります（ただし、良い意味で）。
コンテキストメニューをいじっていて、カレンダーに追加 をカードに直接配置した方が良いのではないかと思いました。他の項目はほとんど管理用のものですが、これは全ユーザー向けの機能であり、UIで目立つように配置するのに適しているでしょう。
イベント投稿では、「カレンダーに追加」オプションを目立つ場所に配置しています。管理者の外観メニューからアクセスできるテーマのJavaScriptヘッダーにこれを追加できます。
<script>
(() => {
const eventInfoSelector = ".event-header .event-info";
const submenuButtonSelector = "button.fk-d-menu__trigger.discourse-post-event-more-menu-trigger";
const menuContentSelector = ".fk-d-menu__inner-content";
const addToCalendarSelector = "li.add-to-calendar > button";
// テキストとアイコンをホバー時に黒く保つためのインラインCSSを追加
const style = document.createElement("style");
style.innerHTML = `
.btn.btn-icon-text.custom-add-to-calendar-btn,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover {
color: black !important;
}
.btn.btn-icon-text.custom-add-to-calendar-btn svg,
.btn.btn-icon-text.custom-add-to-calendar-btn:hover svg {
fill: black !important;
}
`;
document.head.appendChild(style);
// DOM内の要素を待機するためのヘルパー
const waitForElement = (selector, timeout = 3000) => {
return new Promise((resolve, reject) => {
const el = document.querySelector(selector);
if (el) return resolve(el);
const observer = new MutationObserver(() => {
const found = document.querySelector(selector);
if (found) {
observer.disconnect();
resolve(found);
}
});
observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => {
observer.disconnect();
reject();
}, timeout);
});
};
const createAddToCalendarButton = async () => {
const eventInfo = document.querySelector(eventInfoSelector);
if (!eventInfo || eventInfo.querySelector(".custom-add-to-calendar-btn")) return;
const button = document.createElement("button");
button.className = "btn btn-icon-text custom-add-to-calendar-btn";
button.title = "Add to calendar";
button.innerHTML = `
<svg class="fa d-icon d-icon-file svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="#file"></use>
</svg>
<span class="d-button-label">Add to calendar</span>
`;
// 左寄せのためのインラインスタイル
button.style.display = "inline-flex";
button.style.justifyContent = "flex-start";
button.style.marginLeft = "0";
button.style.marginBottom = "4px";
button.style.backgroundColor = "#f0f0f0";
button.style.borderRadius = "6px";
button.style.transition = "transform 0.2s";
button.style.cursor = "pointer";
// クリックロジック：メニューを開き、元のカレンダーに追加をトリガー
button.addEventListener("click", async () => {
const submenuButton = document.querySelector(submenuButtonSelector);
if (!submenuButton) return;
submenuButton.click(); // メニューを開く
let menuContent;
try {
menuContent = await waitForElement(menuContentSelector, 2000);
} catch {
return;
}
const originalButton = menuContent.querySelector(addToCalendarSelector);
originalButton?.click();
});
// event-infoに挿入
if (eventInfo.firstElementChild) {
eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
} else {
eventInfo.appendChild(button);
}
};
// DOM変更の監視（Emberセーフ）
const observer = new MutationObserver(() => createAddToCalendarButton());
observer.observe(document.body, { childList: true, subtree: true });
// 初回試行
createAddToCalendarButton();
})();
</script>