第一步：替换 CSS 样式
在主题的 <b:skin><![CDATA[ ... ]]></b:skin> 中，找到原本的 /* 版权声明卡片 */ 相关的样式代码，替换为以下优化后的 CSS：
在主题的 <b:skin><![CDATA[ ... ]]></b:skin> 中，找到原本的 /* 版权声明卡片 */ 相关的样式代码，替换为以下优化后的 CSS：
代码展示
/* 版权声明卡片（Flex 左右排版） */
.copyright-box {
margin-top: 2.5rem;
padding: 1.25rem;
border-radius: 0.5rem;
background-color: var(--color-surface-gray);
border: 1px solid var(--color-border);
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.copyright-main {
flex: 1;
min-width: 0;
}
.copyright-box h4 {
font-weight: 700;
color: var(--color-text-main);
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.copyright-box ul { list-style: none; padding: 0; margin: 0; color: var(--color-text-light); font-size: 0.8125rem; }
.copyright-box li { margin-bottom: 0.25rem; }
.copyright-box a { color: inherit; text-decoration: none; word-break: break-all; }
.copyright-box a:hover { color: var(--color-primary); }
.copyright-notice {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border);
font-style: italic;
}
/* 右侧二维码区域 */
.copyright-qrcode {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-align: center;
background-color: #ffffff;
padding: 0.5rem;
border-radius: 0.375rem;
border: 1px solid var(--color-border);
}
html.dark .copyright-qrcode {
background-color: #262626;
}
.copyright-qrcode img {
display: block !important;
width: 84px !important;
height: 84px !important;
margin: 0 0 0.35rem 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.copyright-qrcode span {
font-size: 0.6875rem;
color: var(--color-text-light);
white-space: nowrap;
}
/* 移动端手机访问时，隐藏扫码框以节省屏幕空间 */
@media (max-width: 640px) {
.copyright-qrcode { display: none; }
}
第二步：替换 HTML 结构代码
在主题 XML 中向下搜索 <!-- 版权声明 -->，找到原本的 <div class='copyright-box'>...</div> 区域，替换为以下代码：
代码展示
<!-- 版权声明与右侧自动生成二维码 -->
<div class='copyright-box'>
<div class='copyright-main'>
<h4>
<svg fill='none' height='16' stroke='currentColor' style='color:var(--color-primary);' viewBox='0 0 24 24' width='16'><path d='M12 8c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3zm0 14c-5.523 0-10-4.477-10-10S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg> 版权声明
</h4>
<ul>
<li><strong>发布作者：</strong> 元章</li>
<li><strong>文章链接：</strong> <a expr:href='data:post.url'><data:post.url/></a></li>
<li class='copyright-notice'>
除特别注明外，本站所有文章均为原创，转载请注明出处。
</li>
</ul>
</div>
<div class='copyright-qrcode'>
<img expr:alt='"扫码阅读：" + data:post.title.escaped' expr:src='"https://api.qrserver.com/v1/create-qr-code/?size=90x90&margin=0&data=" + data:post.url' height='84' loading='lazy' width='84'/>
<span>手机扫码阅读</span>
</div>
</div>
特点与效果说明：
1.自动化生成：通过 expr:src 动态将当前文章链接 data:post.url 传递给轻量二维码接口，生成当前文章专属二维码。
2.零 JS 依赖：纯 HTML + CSS 实现，拥有固定的 width/height 和 loading='lazy' 懒加载，不会引起页面布局抖动（CLS = 0）。
3.自适应响应式：电脑端在右侧精致展示；手机端屏幕空间有限会自动隐藏，保持移动端清爽。
实测对Google Blogger主题网站来说有点拖速度！
实测对Google Blogger主题网站来说有点拖速度！
不过，可以在HTML自动生成网页地址二维码的功能，是可以实现的。