建议收藏备忘,本文涉及代码操作的地方皆有注释,以便后期修改
这本教程所用方法仅适于Handsome主题,其他主题未尝试
自定义
评论打卡
打卡
是一个 记录 与 互动 的巧妙设计。看到网上有部分站长在自己的博客中加入了 评论打卡 这一功能,个人觉得还不错,于是决定动手魔改一下。
下面是本站引入了 一键评论打卡 功能的实现过程,请有需要的站长按需"食用",先看前、后效果:
⚠️ 注意:本教程仅在 Handsome 主题下通过测试,其它平台请自行 DIY 。
第一步:打开 Handsome 主题目录下的 component/comments.php 文件,找到并删除如下内容:
<div class="comment-form-comment form-group">
<label class="padder-v-sm" for="comment"><?php _me("评论") ?>
<span class="required text-danger">*</span></label>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO padder-v-sm"></div>
<?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
<div class="secret_comment" id="secret_comment" data-toggle="tooltip"
data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
<label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
<div class="secret_comment_check">
<label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
<input type="checkbox" id="secret_comment_checkbox">
<i></i>
</label>
</div>
</div>
<?php endif; ?>
</div>
接着在相同位置,加入以下 HTML 代码:
<div class="comment-form-comment form-group">
<label for="comment"><?php _me("评论") ?>
<span class="required text-danger">*</span></label>
<span class="required text-danger">(请使用真实邮箱地址,方便及时接收评论回复!)</span>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴!访客卡!请上车的乘客系好安全带,现在是:')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
<div class="secret_comment" id="secret_comment" data-toggle="tooltip"
data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
<label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
<div class="secret_comment_check">
<label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
<input type="checkbox" id="secret_comment_checkbox">
<i></i>
</label>
</div>
</div>
</div>
第二步:在后台 --> 设置外观 --> 开发者设置 --> 自定义JavaScript 加入以下代码:
function addNumber(a) {
var b = (new Date).toLocaleDateString()
var c = (new Date).toLocaleTimeString()
var length = document.getElementById("comment").value.length;
if (length > 0) {
document.getElementById("comment").focus()
document.getElementById("comment").value += '\n' + a + b + c
} else {
document.getElementById("comment").focus()
document.getElementById("comment").value += a + b + c
}
}
第三步:在后台 --> 设置外观 --> 开发者设置 --> 自定义CSS 加入以下代码:
/*一键评论打卡css代码*/
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}
此时,已完成所有所需步骤,刷新网页即可看到新的评论效果!
首页头像转动并放大
.thumb-lg{
width:130px;
}
.avatar{
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
}
.avatar:hover{
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#aside-user span.avatar{
animation-timing-function:cubic-bezier(0,0,.07,1)!important;
border:0 solid
}
#aside-user span.avatar:hover{
transform:rotate(360deg) scale(1.2);
border-width:5px;
animation:avatar .5s
}
头像呼吸光环
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
文章内打赏图标跳动
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
首页文章版式圆角化
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
首页文章版式阴影化
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
图片抖动效果
img:hover {
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
自定义滚动条滑块
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
width: 3px;
height: 16px;
background-color: rgba(255,255,255,0);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: rgba(255,255,255,0);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
文章标题居中
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
自定义鼠标样式
body {
cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url('鼠标指针图片链接'), auto;
}
复制成功提示
复制成功提示
使用方法:
复制下面代码到 handsome主题>设置外观>开发者设置>自定义 JavaScript
/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创,转载请注明出处!<br> 本文作者:小小孩子们<br>原文链接:"+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "5000"
})
}}
/* 复制成功提示代码结束 */
Handsome底部页脚标签
- 添加自定义css
添加代码至后台>自定义 CSS
/*页脚标签样式*/
.github-badge {
display: inline-block;
border-radius: 2px;
text-shadow: none;
font-size: 10px;
color: #fff;
line-height: 13px;
background-color: #ABBAC3;
margin-bottom: 3px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4D4D4D;
padding: 2px 2px 2px 3px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.github-badge .badge-value {
display: inline-block;
padding: 2px 3px 2px 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.github-badge .bg-brightgreen {
background-color: #4c1 !important;
}
.github-badge .bg-green {
background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
background-color: #dfb317 !important;
}
.github-badge .bg-zise {
background-color:#F08080 !important;
}
.github-badge .bg-orange {
background-color: #fe7d37 !important;
}
.github-badge .bg-red {
background-color: #e05d44 !important;
}
.github-badge .bg-blue {
background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
background-color: #9f9f9f !important;
}
- 选择显示位置
打开Handsome主题设置>博客底部左侧信息添加以下代码
<a class="github-badge">
<span class="badge-subject">Copyright</span>
<span class="badge-value bg-brightgreen">XXX</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn">
<span class="badge-subject">鲁ICP备</span>
<span class="badge-value bg-red">2021028951号</span>
</a>
打开 Handsome主题设置>博客底部右侧信息添加以下代码
<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
<span class="badge-subject">Themes</span>
<span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
<span class="badge-subject">Powered</span>
<span class="badge-value bg-orange">Typecho</span>
</a>
- 删除多余代码
位置在125-140行之间
删除usr/themes/handsome/component/footer.php中以下代码
Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
href="https://www.ihewro.com/archives/489/">handsome</a>
© <?php echo date("Y"); ?> Copyright
点击飘出二十四字核心价值观
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
})
更换HarmonyOS字体
1.安装AliceStyle插件
2.下载HarmonyOS字体-HarmonySanc
这是官方开放开发文档,大家可以自行下载,不过我已经将.ttf文件上传到jsdeliver上了,大家最后引用一下就可以了!
3.开启插件并使用字体
jsdeliver储存云端字体Sanc地址
此处内容需要评论回复后(审核通过)方可阅读。
转自小屁的博客
博主介绍打字效果
<span class="text-muted text-xs block"> <div id="chakhsu"></div> <script> var chakhsu = function (r) { function t() { return b[Math.floor(Math.random() * b.length)]} function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n } function i() { var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } var l = "", o = ["这里填写介绍" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>
插件推荐
AliceStyle 一款超强大的handsome美化插件,还支持后台美化
Sitemap 生成sitemap的插件,自带百度推送
InvalidLinks handsome友链失效检查
Copyright 利用自定义字段功能灵活地在文章或独立页面尾部显示版权小尾巴。
33 条评论
体验
滴!访客卡!请上车的乘客系好安全带,现在是:2021/12/22上午1:07:25
滴!访客卡!请上车的乘客系好安全带,现在是:2021/12/11下午4:01:35
滴!访客卡!请上车的乘客系好安全带,现在是:2021/11/27下午2:56:54
滴!浏览功勋卡
小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小小孩子们
滴!访客卡!请上车的乘客系好安全带,现在是:2021/11/8下午5:41:43
字体字体
字体字体
666
小小小小小孩子
滴!访客卡!请上车的乘客系好安全带,现在是:2021/10/20下午4:16:43
666666666666666666
很棒很棒
取个字体
西皮狐妖
滴!访客卡!请上车的乘客系好安全带,现在是:Sat Oct 02 2021 10:30:43 GMT+0800 (GMT+08:00)
我已经把你的网站链接加到我的网站了,你也加一下我的
我没找到你的友情链接页面在哪里
刚刚发一版,你再看一下
为啥你的友链还得注册才能 ::BZ:22_yiwen:: 访问
改过了
看到了,看到了,麻烦你去 https://www.xxhzm.cn/links.html 下面评论一下你的网站信息,我没在友链页面找到
搞错了,我友链数据是调接口获取的,接口加权限了,我重新改一下
666
其实你发一遍就可以的
我在你的网站逛了一个小时,兜兜转转忘了
666
感谢分享OωO
6666
我来了OωO借鉴一下
欢迎欢迎