> ## Documentation Index
> Fetch the complete documentation index at: https://nmem.guoxudong.io/llms.txt
> Use this file to discover all available pages before exploring further.
# 来自社区
> 阅读社区文章与 X 原帖，看看大家如何用 Nowledge Mem 搭建自己的知识地图。
export const CommunityTweet = ({id, author, handle, locale = "en"}) => {
const mount = useRef(null);
const [status, setStatus] = useState("loading");
useEffect(() => {
const host = mount.current;
let disposed = false;
let generation = 0;
let timer;
if (!window.__communityXWidgets) {
window.__communityXWidgets = new Promise((resolve, reject) => {
if (window.twttr?.widgets) {
resolve(window.twttr);
return;
}
const script = document.createElement("script");
script.src = "https://platform.twitter.com/widgets.js";
script.async = true;
const timeout = setTimeout(() => {
script.remove();
reject(new Error("X widgets timed out"));
}, 15000);
script.onload = () => {
clearTimeout(timeout);
if (window.twttr?.widgets) resolve(window.twttr); else reject(new Error("X widgets unavailable"));
};
script.onerror = () => {
clearTimeout(timeout);
script.remove();
reject(new Error("X widgets unavailable"));
};
document.head.appendChild(script);
});
window.__communityXWidgets.catch(() => {
delete window.__communityXWidgets;
});
}
const widgets = window.__communityXWidgets;
let theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
const render = () => {
const version = ++generation;
clearTimeout(timer);
setStatus("loading");
const target = document.createElement("div");
host.replaceChildren(target);
const current = () => !disposed && generation === version;
timer = setTimeout(() => {
if (current()) setStatus("unavailable");
}, 20000);
widgets.then(twitter => {
if (!current()) return;
return twitter.widgets.createTweet(id, target, {
theme,
lang: locale === "zh" ? "zh-cn" : "en",
dnt: true,
width: 550
});
}).then(element => {
if (!current()) return;
clearTimeout(timer);
setStatus(element ? "ready" : "unavailable");
}).catch(() => {
if (!current()) return;
clearTimeout(timer);
setStatus("unavailable");
});
};
render();
const observer = new MutationObserver(() => {
const next = document.documentElement.classList.contains("dark") ? "dark" : "light";
if (next !== theme) {
theme = next;
render();
}
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return () => {
disposed = true;
clearTimeout(timer);
observer.disconnect();
host.replaceChildren();
};
}, [id, locale]);
return ;
};
经验分享 · 不是一节课
大家如何用 Nowledge Mem 搭建自己的知识地图。
阅读完整的经验文章，或看看大家在 X 上的日常分享。
写过自己的搭建方式或使用经验？分享到 X，就有机会被收录。 · 回到学习 → Essentials