一直用的emlog默认模板，看着文章页面有点空，觉得缺点什么，现在默认的时尚就是页面必须得带有二维码呀！
就开始一直在网上找代码，也找不到合适的，或者说像我看不懂的不会操作；
突然灵光一闪想着用deepseek写个代码试试，于是就得到了这个傻瓜操作，直接嵌入emlog文章页面的办法：
打开这个文件：
emlog运行目录下：/content/templates/default/echo_log.php
页尾添加二维码
如果要添加到页尾，也就是这个位置
则找到文件底部这行代码：
<nav class="neighbor-log"><?php neighbor_log($neighborLog) ?></nav>
将如下代码复制在前面，则有图示效果：
<!-- 二维码生成代码起始-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="container">
<div class="date">
<!-- 二维码显示区域 -->
<div id="qrcodeCanvas"></div>
</div>
<p class="date">
本文永久地址：<?php echo URL::log($logid); ?>
</p>
</div>
<script>
$(document).ready(function() {
// 获取当前页面URL
const currentUrl = window.location.href;
// 在URL显示区域展示当前URL
$('#urlDisplay').text(currentUrl);
// 生成100x100像素的二维码
$('#qrcodeCanvas').qrcode({
width: 100, // 宽度100px
height: 100, // 高度100px
text: currentUrl, // 内容为当前URL
render: "canvas" // 使用Canvas渲染
});
});
</script>
<!-- 二维码生成代码结束 -->页头添加
如果想要将二维码放置在标题这个地方，呈现这个效果：
就找到这行代码：
<hr class="bottom-5" />
将以下代码复制到前面：
<!-- 二维码生成代码起始-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="container">
<p class="date">
本文永久地址：<?php echo URL::log($logid); ?>
</p>
<div class="date">
<!-- 二维码显示区域 -->
<div id="qrcodeCanvas"></div>
</div>
</div>
<script>
$(document).ready(function() {
// 获取当前页面URL
const currentUrl = window.location.href;
// 在URL显示区域展示当前URL
$('#urlDisplay').text(currentUrl);
// 生成100x100像素的二维码
$('#qrcodeCanvas').qrcode({
width: 100, // 宽度100px
height: 100, // 高度100px
text: currentUrl, // 内容为当前URL
render: "canvas" // 使用Canvas渲染
});
});
</script>
<!-- 二维码生成代码结束 -->为了整体页面的美观度，将二维码放在标题下的话，可以将本文放在二维码上面，而如果将二维码放在文章末尾，可以让二维码在文本上面，只需要将'p'标签与二维码显示区域调换位置即可。
示范页面
以下就是为了自己以后方便理解，特此将deepseek写的示范页面和代码放在最后了。
示范展示地址：http://blog.vaike.cn/pages/qc.html
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当前页面二维码生成器</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #fff;
}
.container {
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
padding: 40px;
text-align: center;
max-width: 500px;
width: 100%;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #fdbb2d;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.description {
font-size: 1.1rem;
margin-bottom: 30px;
line-height: 1.6;
opacity: 0.9;
}
.qr-container {
display: flex;
justify-content: center;
margin: 0 auto 25px;
background: white;
border-radius: 12px;
padding: 15px;
width: 180px;
height: 180px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
#qrcodeCanvas {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
}
canvas {
border-radius: 8px;
}
.url-display {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 12px;
margin: 25px 0;
word-break: break-all;
font-size: 0.95rem;
line-height: 1.5;
}
.instructions {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
margin-top: 25px;
text-align: left;
}
.instructions h3 {
margin-bottom: 15px;
text-align: center;
color: #fdbb2d;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 10px;
line-height: 1.5;
}
.footer {
margin-top: 30px;
font-size: 0.85rem;
opacity: 0.7;
}
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
.container {
padding: 30px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>当前页面二维码生成器</h1>
<p class="description">扫描下方二维码即可在移动设备上打开此页面</p >
<div class="qr-container">
<!-- 二维码显示区域 -->
<div id="qrcodeCanvas"></div>
</div>
<div class="url-display" id="urlDisplay">
当前页面URL将显示在这里
</div>
<div class="instructions">
<h3>使用说明</h3>
<ul>
<li>二维码已自动生成当前页面的URL</li>
<li>使用手机相机或任何二维码扫描应用扫描</li>
<li>扫描后即可在手机浏览器中打开此页面</li>
<li>二维码尺寸：150×150像素</li>
</ul>
</div>
<p class="footer">纯前端生成 | 无需网络请求 | 基于jQuery.qrcode</p >
</div>
<script>
$(document).ready(function() {
// 获取当前页面URL
const currentUrl = window.location.href;
// 在URL显示区域展示当前URL
$('#urlDisplay').text(currentUrl);
// 生成150x150像素的二维码
$('#qrcodeCanvas').qrcode({
width: 150, // 宽度150px
height: 150, // 高度150px
text: currentUrl, // 内容为当前URL
render: "canvas" // 使用Canvas渲染
});
});
</script>
</body>
</html>