187 lines
13 KiB
HTML
187 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>南音源码库交流群｜富文本复制版</title>
|
||
</head>
|
||
<body style="margin:0;background:#eef5ff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;color:#172554;">
|
||
<div style="position:sticky;top:0;z-index:10;padding:14px;text-align:center;background:rgba(255,255,255,.96);border-bottom:1px solid #dbeafe;">
|
||
<button id="copyButton" type="button" style="border:0;border-radius:10px;padding:11px 26px;background:linear-gradient(135deg,#1685ff,#7357ee);color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(50,100,220,.22);">复制富文本正文</button>
|
||
<span id="copyStatus" style="margin-left:12px;color:#526581;font-size:14px;">已适配后台编辑器，复制后直接粘贴</span>
|
||
</div>
|
||
|
||
<main style="padding:28px 14px 60px;">
|
||
<article id="articleContent" style="box-sizing:border-box;max-width:760px;margin:0 auto;padding:34px 30px;background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(37,99,235,.10);font-size:16px;line-height:1.9;letter-spacing:.02em;">
|
||
<section style="margin:0 0 28px;padding:25px 24px;border-radius:16px;background:linear-gradient(135deg,#eef8ff,#f4efff);border:1px solid #dbeafe;text-align:center;">
|
||
<p style="margin:0 0 10px;color:#2563eb;font-size:14px;font-weight:700;letter-spacing:.12em;">南音源码库 · 社群招募</p>
|
||
<h2 style="margin:0 0 12px;color:#10235b;font-size:30px;line-height:1.35;font-weight:800;">南音源码库交流群，开放加入</h2>
|
||
<p style="margin:0;color:#526581;font-size:16px;">源码分享 ｜ 技术交流 ｜ 项目互助</p>
|
||
</section>
|
||
|
||
<p style="margin:0 0 18px;">做「南音源码库」这段时间，陆续认识了不少喜欢折腾项目、研究源码的朋友。</p>
|
||
<p style="margin:0 0 12px;">大家经常会问：</p>
|
||
<ul style="margin:0 0 22px;padding-left:24px;color:#33466b;">
|
||
<li style="margin:7px 0;">某个项目该怎么部署？</li>
|
||
<li style="margin:7px 0;">遇到报错应该从哪里排查？</li>
|
||
<li style="margin:7px 0;">有没有适合学习、练手或二次开发的源码？</li>
|
||
<li style="margin:7px 0;">有了项目想法，能不能找到人一起交流？</li>
|
||
</ul>
|
||
<p style="margin:0 0 18px;">一个人摸索当然可以，但很多时候，别人的一句提醒，就能帮你少走不少弯路。</p>
|
||
<p style="margin:0 0 26px;">所以，我准备建一个「南音源码库交流群」，把对源码、项目和技术感兴趣的朋友聚到一起。这里不追求人数多，只希望大家能真诚交流、互相帮助、一起进步。</p>
|
||
|
||
<h3 style="margin:30px 0 16px;padding-left:12px;border-left:5px solid #3978f6;color:#10235b;font-size:22px;line-height:1.4;">在群里可以聊什么？</h3>
|
||
|
||
<section style="margin:0 0 12px;padding:18px 20px;border-radius:12px;background:#f6f9ff;border:1px solid #e4edff;">
|
||
<p style="margin:0 0 5px;color:#2563eb;font-size:17px;font-weight:800;">01 源码分享</p>
|
||
<p style="margin:0;color:#455777;">分享值得学习和研究的开源项目、实用工具及项目资料，也欢迎大家交流自己的作品和使用体验。</p>
|
||
</section>
|
||
<section style="margin:0 0 12px;padding:18px 20px;border-radius:12px;background:#f8f6ff;border:1px solid #ebe5ff;">
|
||
<p style="margin:0 0 5px;color:#6d4ee8;font-size:17px;font-weight:800;">02 技术交流</p>
|
||
<p style="margin:0;color:#455777;">开发、部署、环境配置、报错排查、二次开发……遇到问题可以在群里讨论。会的朋友帮一把，不会的朋友一起研究。</p>
|
||
</section>
|
||
<section style="margin:0 0 12px;padding:18px 20px;border-radius:12px;background:#f6f9ff;border:1px solid #e4edff;">
|
||
<p style="margin:0 0 5px;color:#2563eb;font-size:17px;font-weight:800;">03 项目互助</p>
|
||
<p style="margin:0;color:#455777;">从需求分析、技术选型到功能实现和项目上线，都可以交流思路。毕业设计、个人项目和独立开发者项目也欢迎加入讨论。</p>
|
||
</section>
|
||
<section style="margin:0 0 24px;padding:18px 20px;border-radius:12px;background:#fff9ed;border:1px solid #ffebbd;">
|
||
<p style="margin:0 0 5px;color:#d48513;font-size:17px;font-weight:800;">04 资源更新</p>
|
||
<p style="margin:0;color:#455777;">「南音源码库」有新的源码、软件、教程或实用资源时，会在群里同步，方便大家及时了解。</p>
|
||
</section>
|
||
|
||
<h3 style="margin:30px 0 14px;padding-left:12px;border-left:5px solid #7957ed;color:#10235b;font-size:22px;line-height:1.4;">适合这些朋友加入</h3>
|
||
<ul style="margin:0 0 18px;padding-left:24px;color:#33466b;">
|
||
<li style="margin:7px 0;">正在学习编程，想找项目练手的同学</li>
|
||
<li style="margin:7px 0;">在做毕业设计、课程设计或个人项目的朋友</li>
|
||
<li style="margin:7px 0;">喜欢研究源码、部署项目和二次开发的开发者</li>
|
||
<li style="margin:7px 0;">独立开发者、技术博主和资源分享者</li>
|
||
<li style="margin:7px 0;">愿意交流经验、分享工具、帮助他人的朋友</li>
|
||
</ul>
|
||
<p style="margin:0 0 25px;">无论你是刚入门，还是已经有多年开发经验，只要愿意友好交流，都欢迎加入。</p>
|
||
|
||
<h3 style="margin:30px 0 14px;padding-left:12px;border-left:5px solid #f1b334;color:#10235b;font-size:22px;line-height:1.4;">一个小小的群约定</h3>
|
||
<p style="margin:0 0 10px;">为了让交流更舒服，希望大家共同遵守：</p>
|
||
<ul style="margin:0 0 28px;padding-left:24px;color:#33466b;">
|
||
<li style="margin:7px 0;">尊重他人，友好交流</li>
|
||
<li style="margin:7px 0;">提问时尽量说明环境、报错信息和已经尝试过的方法</li>
|
||
<li style="margin:7px 0;">不刷屏，不发无关广告，不频繁私聊骚扰群友</li>
|
||
<li style="margin:7px 0;">尊重原创与版权，不传播来路不明或存在风险的内容</li>
|
||
<li style="margin:7px 0;">分享不是义务，帮助值得感谢</li>
|
||
</ul>
|
||
|
||
<section style="margin:32px 0 24px;padding:24px;border-radius:16px;background:linear-gradient(135deg,#186ef2,#7054e8);color:#fff;text-align:center;">
|
||
<h3 style="margin:0 0 12px;font-size:24px;line-height:1.4;">如何加入？</h3>
|
||
<p style="margin:0 0 16px;color:#eef5ff;">扫描下方二维码，或添加微信「【填写微信号】」<br>备注「源码群」即可。</p>
|
||
<div style="margin:0 auto;padding:28px 15px;max-width:330px;border:2px dashed rgba(255,255,255,.75);border-radius:12px;background:rgba(255,255,255,.12);font-weight:700;">【在这里插入群二维码或个人微信二维码】</div>
|
||
</section>
|
||
|
||
<p style="margin:0 0 16px;">希望这个群不只是一个资源群，更是一个能认真讨论问题、分享经验、认识同路人的技术交流空间。</p>
|
||
<p style="margin:0 0 8px;">如果你也喜欢折腾源码、研究项目，欢迎加入「南音源码库交流群」。</p>
|
||
<p style="margin:0;color:#2563eb;font-size:18px;font-weight:800;">我们群里见。</p>
|
||
</article>
|
||
</main>
|
||
|
||
<div id="copySource" aria-hidden="true" style="position:fixed;left:-10000px;top:0;width:720px;background:#fff;color:#333;"></div>
|
||
|
||
<script>
|
||
const button = document.getElementById('copyButton');
|
||
const status = document.getElementById('copyStatus');
|
||
const copySource = document.getElementById('copySource');
|
||
|
||
// 仅使用 Quill 常见白名单标签，并避免 ul/li 间的空白文本节点。
|
||
// 圆点使用普通字符，防止编辑器把换行解析成额外的空列表项。
|
||
const quillHtml = [
|
||
'<p><strong style="color:#2563eb;">南音源码库 · 社群招募</strong></p>',
|
||
'<h2 style="color:#10235b;">南音源码库交流群，开放加入</h2>',
|
||
'<p><strong>源码分享 ｜ 技术交流 ｜ 项目互助</strong></p>',
|
||
'<p><br></p>',
|
||
'<p>做「南音源码库」这段时间，陆续认识了不少喜欢折腾项目、研究源码的朋友。</p>',
|
||
'<p>大家经常会问：</p>',
|
||
'<p>• 某个项目该怎么部署？</p>',
|
||
'<p>• 遇到报错应该从哪里排查？</p>',
|
||
'<p>• 有没有适合学习、练手或二次开发的源码？</p>',
|
||
'<p>• 有了项目想法，能不能找到人一起交流？</p>',
|
||
'<p><br></p>',
|
||
'<p>一个人摸索当然可以，但很多时候，别人的一句提醒，就能帮你少走不少弯路。</p>',
|
||
'<p>所以，我准备建一个「南音源码库交流群」，把对源码、项目和技术感兴趣的朋友聚到一起。这里不追求人数多，只希望大家能真诚交流、互相帮助、一起进步。</p>',
|
||
'<p><br></p>',
|
||
'<h3 style="color:#2563eb;">在群里可以聊什么？</h3>',
|
||
'<p><strong>01 源码分享</strong></p>',
|
||
'<p>分享值得学习和研究的开源项目、实用工具及项目资料，也欢迎大家交流自己的作品和使用体验。</p>',
|
||
'<p><strong>02 技术交流</strong></p>',
|
||
'<p>开发、部署、环境配置、报错排查、二次开发……遇到问题可以在群里讨论。会的朋友帮一把，不会的朋友一起研究。</p>',
|
||
'<p><strong>03 项目互助</strong></p>',
|
||
'<p>从需求分析、技术选型到功能实现和项目上线，都可以交流思路。毕业设计、个人项目和独立开发者项目也欢迎加入讨论。</p>',
|
||
'<p><strong>04 资源更新</strong></p>',
|
||
'<p>「南音源码库」有新的源码、软件、教程或实用资源时，会在群里同步，方便大家及时了解。</p>',
|
||
'<p><br></p>',
|
||
'<h3 style="color:#6d4ee8;">适合这些朋友加入</h3>',
|
||
'<p>• 正在学习编程，想找项目练手的同学</p>',
|
||
'<p>• 在做毕业设计、课程设计或个人项目的朋友</p>',
|
||
'<p>• 喜欢研究源码、部署项目和二次开发的开发者</p>',
|
||
'<p>• 独立开发者、技术博主和资源分享者</p>',
|
||
'<p>• 愿意交流经验、分享工具、帮助他人的朋友</p>',
|
||
'<p>无论你是刚入门，还是已经有多年开发经验，只要愿意友好交流，都欢迎加入。</p>',
|
||
'<p><br></p>',
|
||
'<h3 style="color:#d48513;">一个小小的群约定</h3>',
|
||
'<p>为了让交流更舒服，希望大家共同遵守：</p>',
|
||
'<p>• 尊重他人，友好交流</p>',
|
||
'<p>• 提问时尽量说明环境、报错信息和已经尝试过的方法</p>',
|
||
'<p>• 不刷屏，不发无关广告，不频繁私聊骚扰群友</p>',
|
||
'<p>• 尊重原创与版权，不传播来路不明或存在风险的内容</p>',
|
||
'<p>• 分享不是义务，帮助值得感谢</p>',
|
||
'<p><br></p>',
|
||
'<h3 style="color:#2563eb;">如何加入？</h3>',
|
||
'<blockquote>扫描下方二维码，或添加微信「【填写微信号】」，备注「源码群」即可。</blockquote>',
|
||
'<p><strong>【在这里插入群二维码或个人微信二维码】</strong></p>',
|
||
'<p><br></p>',
|
||
'<p>希望这个群不只是一个资源群，更是一个能认真讨论问题、分享经验、认识同路人的技术交流空间。</p>',
|
||
'<p>如果你也喜欢折腾源码、研究项目，欢迎加入「南音源码库交流群」。</p>',
|
||
'<p><strong style="color:#2563eb;">我们群里见。</strong></p>'
|
||
].join('');
|
||
|
||
copySource.innerHTML = quillHtml;
|
||
|
||
function fallbackCopy() {
|
||
const selection = window.getSelection();
|
||
const range = document.createRange();
|
||
range.selectNodeContents(copySource);
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
const copied = document.execCommand('copy');
|
||
selection.removeAllRanges();
|
||
if (!copied) throw new Error('copy failed');
|
||
}
|
||
|
||
button.addEventListener('click', async () => {
|
||
try {
|
||
const html = quillHtml;
|
||
const text = copySource.innerText;
|
||
if (navigator.clipboard && window.ClipboardItem) {
|
||
const item = new ClipboardItem({
|
||
'text/html': new Blob([html], { type: 'text/html' }),
|
||
'text/plain': new Blob([text], { type: 'text/plain' })
|
||
});
|
||
await navigator.clipboard.write([item]);
|
||
} else {
|
||
fallbackCopy();
|
||
}
|
||
status.textContent = '已复制，可以粘贴到编辑器了';
|
||
status.style.color = '#16815b';
|
||
button.textContent = '复制成功';
|
||
} catch (error) {
|
||
try {
|
||
fallbackCopy();
|
||
status.textContent = '已复制，可以粘贴到编辑器了';
|
||
status.style.color = '#16815b';
|
||
button.textContent = '复制成功';
|
||
} catch (fallbackError) {
|
||
status.textContent = '自动复制失败，请拖选正文后按 Ctrl+C';
|
||
status.style.color = '#c43b4c';
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|