yimo-resource-blog/marketing/source-code-community-article-richtext.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>