此篇用来记录博客美化,防止遗忘,随时补充更新,部分内容来自网络,只是收藏整合。
有什么不懂的+我V : creater8888
component/aside.php 左边导航栏
component/comments.php 评论区
component/footer.php 底部版权、音乐播放器之类
component/header.php 页面头,没啥要改的
component/headnav.php 顶部导航
component/say.php 时光机动态
component/sidebar.php 右侧栏目
component/third_party_comments.php 3.3.0新增,第三方评论
css/ 博客CSS,一般不要改
fonts/ 博客字体,一般不要改
img/ 图像,一般不要改
js/ js文件,一般不要改
lang/ 语言文件
libs/Content.php 文章内容
libs/... 一般不要改
usr/ 另一个语言文件?
404.php 404界面
archive.php 整合
booklist.php 书单
cross.php 时光机
files.php 归档
functions.php 配置界面的东西
guestbook.php 留言板
index.php 首页
links.php 友链
page.php 文章页面整合
post.php 文章输出
handsome/post.php
内php echo Content::exportPayForAuthors(); ?>
(大概在95行左右)添加以下内容<!--版权声明开始-->
<div class="entry-content l-h-2x">
<div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
<span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div>
<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
<span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
</div>
</div>
<!--版权声明结束-->
handsome主题直接把下面的CSS代码添加到[font color="red"]开发者设置→自定义CSS[/font]
保存就可以了。也可以添加到[font color="red"]handsome/assets/css/handsome.min.css[/font]
文件最后面保存,开了CDN的记得刷新缓存。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 6px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #30B07F;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
- 使用
AliceStyle
美化插件,插件设置-字体美化,输入想要的字体链接。 打开Handsome主题设置界面,找到“开发者设置”选项在以下两项中加入对应内容即可,字体效果见本站。
自定义CSS
body {font-family: 'ZCOOL XiaoWei';}
自定义输出head头部的HTML代码
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" />
另一种【站酷快乐体】
自定义CSS:font-family: 'ZCOOL XiaoWei';
Google Fonts API:https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe
/* 网站加载完成提示开始 */
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
message: "为了网站的正常运行,请不要使用广告屏蔽插件,谢谢!<br >" + kaygb_referrer(),
title: "网站加载完成",
type: "success",
autoHide: !1,
time: "3000"
})
/* 网站加载完成提示结束 */
删除/usr/theme/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>
添加一下代码到开发者设置 ->自定义css
中:
/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}
/*这是优化底部栏的css,应该不会影响没开启炫酷透明功能时候的主题,如果有问题就删除下面这行即可*/
.wrapper {
padding: 11px;
}
将下列代码修改成自己的,分别填写到handsome设置外观 -> 开发者设置 ->博客底部左/右侧信息
中即可。
<div class="github-badge">
<a href="./" title="©2021 Creater">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">Creater</span>
</a>
</div>
|
<div class="github-badge">
<a href="http://www.beian.miit.gov.cn" target="_blank" title="渝ICP备 2021002293号">
<span class="badge-subject">渝ICP备</span><span class="badge-value bg-green">2021002293号</span>
</a>
</div>
<!-- 博客底部右侧信息 -->
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
|
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
本站效果只展示了分类
找到主题目录下的componet/aside.php
文件,找到如下分类、页面及友链的代码,剪切至图四中红框位置,之后去博客后台管理,外观设置 -> 页面元素设置 ->左侧边栏元素控制 -> 不显示即可。




以下代码复制粘贴到开发者设置 -> 自定义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> 本文作者:Creater<br>原文链接:"+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "5000"
})
}}
/* 复制成功提示代码结束 */
/*防止12*/
document.onkeydown = function() {
if (window.event && window.event.keyCode == 123) {
layer.msg("o(*Q▽Q*)o求求惹,不要在扒孩子惹呜呜呜...");
event.keyCode = 0;
event.returnValue = false
}
};
以下代码复制粘贴到开发者设置 -> 自定义JavaScript中
即可。
/* 复制文章自动带版权开始 */
document.body.addEventListener('copy', function (e) {
if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
setClipboardText(e);
notie({
type: 'info',
text: '商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。',
autoHide: true
})
}
});
function setClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
event.preventDefault();
var htmlData = ''
+ '著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权,非商业转载请注明出处!<br>'
+ '本博转载文章版权及解释权归原作者所有,博主只是勤劳的搬运工!<br>'
+ '作者:Creater QQ:664423077<br>'
+ '链接:' + window.location.href + '<br>'
+ '来源:https://www.creater.ltd/<br><br>'
+ window.getSelection().toString();
var textData = ''
+ '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权,非商业转载请注明出处!\n'
+ '本博转载文章版权及解释权归原作者所有,博主只是勤劳的搬运工!\n'
+ '作者:Creater QQ:664423077\n'
+ '链接:' + window.location.href + '\n'
+ '来源:https://www.creater.ltd/\n\n'
+ window.getSelection().toString();
clipboardData.setData('text/html', htmlData);
clipboardData.setData('text/plain',textData);
}
}
/* 复制文章自动带版权结束 */
替换主题默认下的sj文件里的图片,路径为:
usr/themes/handsome/assets/img/sj
替换之后,清除一下浏览器的缓存文件。
- Crisp账户
注册Crisp账户,并添加网站信息,注册地址[https://app.crisp.chat/]
- 获取Crisp代码
后台--网站设置--显示整合--HTML
中复制代码
- 代码插入
开发者设置--自定义输出head头部的HTML代码
Typecho安装完后,默认后台路径为 xxx.com/admin
,存在安全隐患,为了提高博客安全,将默认路径修改为自己的。
- 修改根目录
admin
文件夹名称为自定义的。 - 打开根目录下的
config.inc.php
文件,找到以下代码 - 修改admin为自己想要的名称。
复制一下代码到初级设置 -> 博主介绍
修改o = ["www.creater.ltd" ]
为你想要展示内容即可。
<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 = ["www.creater.ltd" ].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>
复制一下代码到开发者设置 ->之定义css
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
更换/usr/themes/handsome/usr/img/sj2/
中的图片即可
- 效果
- 右下广告位效果
- 复制以下代码到
开发者设置 -> 自定义JavaScript
:
<!--恋爱记时-->
function lovexhjSitetime() {
window.setTimeout("lovexhjSitetime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth()+1
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
// 时间设置
var t1 = Date.UTC(2017, 04, 29, 0, 0, 00)
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
var diff = t2 - t1
var diffYears = Math.floor(diff / years)
var diffDays = Math.floor((diff / days) - diffYears * 365)
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
diffMinutes * minutes) / seconds)
document.getElementById("lovexhjSitetime").innerHTML = "我们已经在一起<br />" + diffYears + "年" + diffDays + "天" +
diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
}
lovexhjSitetime()
- 复制以下代码到
开发者设置 -> 全局右侧边栏广告位
:
<aside class="widget_text sidebar-widget widget_custom_html fadeInUp">
<div class="textwidget custom-html-widget">
<div id="lovexhj" style="width: 100%; height: 100px; text-align: center; font-size: 1rem;">
<div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
<!-- 左边的头像 -->
<img src="http://www.creater.ltd:8888/down/GSETwuw8qSZA" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 中间的图片 -->
<img src="https://cdn.jsdelivr.net/gh/L-20021213/picture@latest/2020/09/18/lovelogo%20.gif" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 右边的头像 -->
<img src="http://www.creater.ltd:8888/down/AfrRVVqoHHYF" alt="love" style="width: 60px; border-radius: 50%;">
</div>
<p id="lovexhjSitetime" style="font-size: 0.8rem; margin-top: 16px; background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;">我们相恋了104天14小时47分钟19秒啦</p> </div>
</div>
</aside>
将以下代码放在主题的handsome/component/footer.php
中的之前即可。
- 效果
<script type="text/javascript">
/* 鼠标特效 */
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();
});
});
});
</script>
- 效果
主题目录下的post.php
文件中的适当地方加入以下代码。
<!--生成当前文章标签-->
标签:<?php $this->tags(',', true, 'no tag'); ?>
比如我是放在第86行:
- 效果
打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS
即可
/*
* 文章一二三四级标题美化
*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}
- 下载源码,放在网站根目录,然后直接访问即可
有什么不懂的+我V : creater8888
73 条评论
感谢分享
感谢分享
好滴欢迎来访
厉害,想要鼠标右键的菜单~
想要右键自定义 感谢博主分享OωO
抱歉。现在才看到消息,第十五条有代码,复制一下就额可以啦
牛逼
客气了
学习了
感谢分享,请问有木有关于其他装饰修改的文章,比如手机显示背景,颜色 ,特效之类的,开发文档太简单,小白看不懂。。,谢谢啦
比如说你想要啥效果,我可以给你写
来评论一下
|´・ω・)ノ
我想用审核里面的代码
你说的哪一个
测试邮件回复
感谢分享~
感谢来访ヾ(≧∇≦*)ゝ
博主 左侧导航 关于自己 关于本站 有趣文案 如何实现的
我第二十条加上了,你来看下
就是一个内嵌网站,等我把源码发给你
谢谢
|´・ω・)ノ
牛逼
测试评论查看内容
测试评论查看内容
1
1151
123456
111