204 lines
8.6 KiB
HTML
204 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cn">
|
||
|
||
<head>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>评论置顶</title>
|
||
<link rel='stylesheet' href='/css/light.css'>
|
||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||
<link rel="stylesheet" href="/css/normalize.css">
|
||
<link rel="stylesheet" href="/css/remixicon.css">
|
||
<link rel="stylesheet" href="/css/uikit.min.css">
|
||
<link rel="stylesheet" href="/css/nprogress.min.css">
|
||
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
||
<link rel="stylesheet" href="/css/barrager.css">
|
||
<script src="/js/jquery.min.js"></script>
|
||
<script src="/js/jquery.barrager.js"></script>
|
||
<script src="/js/jquery.scrollUp.min.js"></script>
|
||
<script src="/js/pjax.js"></script>
|
||
|
||
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
||
|
||
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
||
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
||
<meta name="template" content="Ying" />
|
||
</head>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="main">
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="head_author_img load-memos-editor">
|
||
<img src="https://avatars.githubusercontent.com/u/94612053" class="blog-img" width="80" height="80" alt="优世界" />
|
||
</div>
|
||
<div class="site-description">
|
||
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
||
<nav class="nav social uk-visible@m">
|
||
<ul class="flat">
|
||
|
||
|
||
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
||
|
||
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
||
|
||
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
||
|
||
|
||
</ul>
|
||
<div class="yiyandes">风吹云散，云卷云舒</div>
|
||
</nav>
|
||
</div>
|
||
<nav class="nav">
|
||
<ul class="flat">
|
||
<li class="active"><a href="https://usj.cc/">首页</a></li>
|
||
<li class="active"><a href="https://usj.cc//about">关于</a></li>
|
||
<li class="active"><a href="https://usj.cc//says">留言</a></li>
|
||
<li class="active"><a href="https://usj.cc//archives">归档</a></li>
|
||
<li class="active"><a href="https://usj.cc//links">友链</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
|
||
|
||
<div id="pjax-container">
|
||
<article style="margin-bottom: 3.5em;">
|
||
<h1 class="post-title" itemprop="name headline">评论置顶</h1>
|
||
<div class="meta">
|
||
作者: 小赵同学 浏览: 字数: 610 分类:
|
||
|
||
<a href="%e6%95%99%e7%a8%8b">教程</a>
|
||
|
||
</div>
|
||
<div class="post-content" itemprop="articleBody">
|
||
<h2 id="前言">前言</h2>
|
||
<p>昨天在休息的时候，看到Jdeal大佬写的一篇文章</p>
|
||
<p>走心评论上线（https://www.jdeal.cn/385.html）</p>
|
||
<p>走心评论其实就是把博客站点历史中出现的评论</p>
|
||
<p>通过查找该评论的coid值，而把评论展示在指定的位置，可以是单页模版，也可以是任意位置</p>
|
||
<p>比较好奇，问Jdeal大佬要了一份代码，最终花了一点时间把一直想做但没做的留言墙实现了</p>
|
||
<p>效果请看：https://usj.cc/about</p>
|
||
<h2 id="继续摸索">继续摸索</h2>
|
||
<p>其实一直蛮想给主题做评论置顶这个功能的</p>
|
||
<p>曾在去年九月份的时候问过油油大佬，只有通过魔改typecho才能实现这个功能</p>
|
||
<p><img src="/pics/2023/02/952995278.png" alt=""></p>
|
||
<p>昨晚睡觉前，突然灵光一现，可否通过走心评论的思路，再把评论置顶整出来呢</p>
|
||
<p>通过测试是可以的，但是代码太烂，不放出来了，主要讲一下思路</p>
|
||
<h2 id="思路剖析">思路剖析</h2>
|
||
<p>1.在评论区前面留出评论置顶的区域，用于写样式</p>
|
||
<p><strong>注意：其实此思路本不是本质意义上的评论置顶，只是将需要置顶的评论展示在最前面</strong></p>
|
||
<p>2.使用typecho的程序的内置方法 <code>$this->fields->你的自定义字段</code>;</p>
|
||
<p>在文章嵌入自定义短代码</p>
|
||
<p><img src="/pics/2023/02/2046574950.png" alt=""></p>
|
||
<p>对应的值填写你需要评论置顶的评论的coid</p>
|
||
<p><img src="/pics/2023/02/3504246702.png" alt=""></p>
|
||
<p>然后在 post.php 将 <code>$this->fields->top_comment</code> 赋值给变量</p>
|
||
<p>上述步骤请参考jdeal大佬的走心评论写法</p>
|
||
<p>这样就可以实现评论置顶了，代码很简单</p>
|
||
<p>因为时间紧迫的问题，暂时没有写出样式，只是实现了基本功能</p>
|
||
<p>后面还需要花时间修样式，暂时就不放截图了</p>
|
||
<p>需要此功能的朋友可以通过这个方法实现评论置顶</p>
|
||
<h2 id="停更通知">停更通知</h2>
|
||
<p>因为学业备考，博客将不再更新，咱们6月见！</p>
|
||
|
||
</div>
|
||
<div class="post-tags" style="margin-top: -30px;">
|
||
<nav class="nav tags">
|
||
<ul class="flat">
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</article>
|
||
<hr class="uk-divider-icon">
|
||
<div id="comments" class="comments-area">
|
||
|
||
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://unpkg.com/@waline/client@v3/dist/waline.css"
|
||
/>
|
||
<div id="waline"></div>
|
||
<script src="https://cdn.jsdelivr.net/npm/@waline/client"></script>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
$(document).ready(function () {
|
||
|
||
var currentPath = "\/post\/1091\/";
|
||
console.log(currentPath);
|
||
|
||
fetchCommentsAndCreateBarrager(currentPath, {
|
||
looper_time: 3000,
|
||
defaultAvatar: 'static/default-avatar.png',
|
||
defaultInfo: 'No comment',
|
||
defaultLink: '#',
|
||
close: true,
|
||
speed: 6,
|
||
color: '#fff',
|
||
old_ie_color: '#000000'
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="footer">
|
||
<nav class="nav" style="clear: both;">
|
||
© 2019 - 2024
|
||
<br>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
||
<br>
|
||
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
|
||
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
||
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
|
||
</a>提供CDN加速服务
|
||
<br>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/js/iconfont.js"></script>
|
||
<script src="/js/lightgallery.umd.min.js"></script>
|
||
<script src="/js/uikit.min.js"></script>
|
||
<script src="/js/EasyLazyload.min.js"></script>
|
||
<script src="/js/view-image.min.js"></script>
|
||
<script src="/js/main.js"></script>
|
||
<script src="/js/mypjax.js"></script>
|
||
<script src="/js/nprogress.js"></script>
|
||
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/@waline/client"></script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
if (document.querySelector("#waline")) {
|
||
Waline.init({
|
||
el: '#waline',
|
||
serverURL: 'https://waline.usj.cc',
|
||
lang: "zh-cn",
|
||
imageUploader: false,
|
||
search: false,
|
||
copyright: false,
|
||
reaction: [
|
||
'https://s2.loli.net/2023/09/24/EhqxZ6DFIJojGNa.gif',
|
||
'https://s2.loli.net/2023/09/24/qmf5As3evWNXwGQ.gif',
|
||
'https://s2.loli.net/2023/09/24/ueWLPkmYw75x4cs.gif',
|
||
'https://s2.loli.net/2023/09/24/nsC1OGoBKfa8Hel.gif',
|
||
'https://s2.loli.net/2023/09/24/VKuBXqR91TPHnyc.gif',
|
||
'https://s2.loli.net/2023/09/24/2OmAWPeulq4ta8T.gif'
|
||
],
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|
||
|