说明
关于handsome主题的一些美化和修改统一记录,方便以后快速查找
主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码
<!--浏览器动态标题开始-->
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
document.title = '(●—●)喔哟,崩溃啦!';
clearTimeout(titleTime);
}
else {
document.title = '(/≧▽≦/)咦!又好了!' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>
<!--浏览器动态标题结束-->
在模板目录的
header.php
文件中引入layer资源文件代码
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
主题设置 - 开发者设置 - 自定义JavaScript 中添加以下代码
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接!');};
将以下
JS
代码放在post.php
的文章内页php
<!--复制代码自带版权说明-->
<script>
document.body.addEventListener('copy', function (e) {
if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
setClipboardText(e);
// alert('商业转载请联系作者获得授权,非商业转载请注明出处哦~\n谢谢合作~(。・`ω´・)');
}
});
function setClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
event.preventDefault();
var htmlData = ''
+ '著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。<br>'
+ '作者:<?php $this->author() ?><br>'
+ '链接:' + window.location.href + '<br>'
+ '来源:<?php $this->options->siteUrl(); ?><br><br>'
+ window.getSelection().toString();
var textData = ''
+ '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。\n'
+ '作者:<?php $this->author() ?>\n'
+ '链接:' + window.location.href + '\n'
+ '来源:<?php $this->options->siteUrl(); ?>\n\n'
+ window.getSelection().toString();
clipboardData.setData('text/html', htmlData);
clipboardData.setData('text/plain',textData);
}
}
</script>
<!--复制代码自带版权说明-->
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}
@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;
}
}
如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:
@keyframes light {
from {
box-shadow: 0 0 4px #f00;
}
to {
box-shadow: 0 0 16px #f00;
}
}
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.img-square {
transition: all 0.3s;
}
.img-square:hover {
transform: rotate(360deg);
}
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
主题设置 - 开发者设置 - 自定义CSS添加以下代码
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
主题设置 - 开发者设置 - 自定义输出body 尾部的HTML代码
<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>
在主题的
functions.php
文件中添加以下代码
//加载耗时
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime() );
$timestart = $mtime[1] + $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime() );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display ) {
echo $r;
}
return $r;
}
然后在/usr/themes/handsome/component/sidebar.php
中添加以下代码
<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>
后台 - 设置外观 - 初级设置 - 博客介绍添加以下代码
<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>
1:先去除
/usr/themes/handsome/component/footer.php
中原有版权信息,将注释 之前的代码替换即可
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
<footer id="footer" class="app-footer" role="footer">
<div class="wrapper bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo(); ?>
</span>
<span class="text-ellipsis"> <?php
$this->options->BottomleftInfo(); ?></span>
</div>
<!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->
2:将以下代码添加至 后台-开发者设置-博客底部右侧信息(左侧类似)。
<div class="github-badge">
<a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="京ICP备18051114号-1">
<span class="badge-subject">京ICP备</span><span class="badge-value bg-black">18051114号-1</span></a>
</div>
| <div class="github-badge">
<a rel="license" 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 rel="license" 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>
3:将以下代码添加至 后台-开发者设置-自定义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-brightgreen {
background-color: #4DC820 !important;
}
.github-badge .bg-orange {
background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
background-color: #8833D7 !important;
}
.github-badge .bg-firebrick {
background-color: #EE2C2C !important;
}
.github-badge .bg-blue {
background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
background-color: #9F9F9F !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;
}
主题内置了四种图标库
iconfont
iconfont图标:https://www.iconfont.cnfontello
fontello图标:https://fontello.com/bootcss
自带的Glyphicons bootcss图标:https://v3.bootcss.com/components/feather
feather图标:https://feathericons.com/
前三种的方法都是class
,而第四种feather
的用法稍微有一点不一样
iconfont
和fotello
只支持主题文档中列出的图标,而Glyphicons
和feather
则支持的比较多。
前三种的用法:
{"name":"赞助","class":"glyphicon glyphicon-eye-open","link":"http://www.aichest.cn/start-page.html","target":"_self"},
{"name":"网络验证","class":"glyphicon glyphicon-globe","link":"http://www.aichest.cn/sfxt/","target":"_blank"},
{"name":"香港主机","class":"glyphicon glyphicon-cloud","link":"http://www.aichest.cn/vps/index.html","target":"_blank"}
而feather
图标则不同,上面的第二个属性为class
,而feather
替换了class
属性
{"name":"博客","feather":"hard-drive","link":"http://www.aichest.cn/","target":"_self"},
添加判断字段
在'网站根目录
/usr/themes/handsome/component/aside.php
第87行左右 $asideItemsOutput = "";
之下添加:
$asideSecondItemsOutput = "";
在第100-105行左右添加"status"
字段的判断,修改以下代码:
if (@$itemTarget){
$linkStatus = 'target="'.$itemTarget.'"';
}else{
$linkStatus = 'target="_blank"';
}
if (trim($itemFeather)!==""){
修改结果如下:
if (@$itemTarget){
$linkStatus = 'target="'.$itemTarget.'"';
}else{
$linkStatus = 'target="_blank"';
}
if (strtoupper($itemStatus) === 'SEC'){
if (trim($itemFeather)!==""){
$asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'"
class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>';
}else if (trim($itemClass)!==""){
$asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>';
}
}
else if (trim($itemFeather)!==""){
添加二级菜单输出
在125行左右<?php if (@!in_array('component',$this->options->asideSetting)): ?>
之上添加:
<?php if (@$asideSecondItemsOutput): ?>
<li>
<a class="auto">
<span class="pull-right text-muted">
<i class="fontello icon-fw fontello-angle-right text"></i>
<i class="fontello icon-fw fontello-angle-down text-active"></i>
</span>
<span class="nav-icon"><i data-feather="menu"></i></span>
<span><?php _me("更多") ?></span><!-- 默认图标与名称,可以随意修改 -->
</a>
<ul class="nav nav-sub dk">
<li class="nav-sub-header">
<a data-no-instant>
<span><?php _me("更多") ?></span>
</a>
</li>
<?php echo @$asideSecondItemsOutput ?>
</ul></li>
<?php endif; ?>
使用方法
在后台高级设置的左侧边栏导航填入即可。
{"name":"赞助","class":"glyphicon glyphicon-eye-open","link":"http://www.aichest.cn/start-page.html","target":"_self"},
{"name":"网络验证","class":"glyphicon glyphicon-globe","link":"http://www.aichest.cn/sfxt/","status":"sec","target":"_blank"},
{"name":"香港主机","class":"glyphicon glyphicon-cloud","link":"http://www.aichest.cn/vps/index.html","status":"sec","target":"_blank"}
插件地址:https://www.xcnte.com/archives/523/
Github:https://github.com/Xcnte/Code-Prettify-for-typecho
第 1 步:下载本插件,解压,放到
usr/plugins/
目录中;第 2 步:文件夹名改为
CodePrettify;
第 3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)
第 4 步:设置:选择主题风格,是否显示行号等。
第 5 步:修改(替换)
/usr/themes/handsome/assets/css/
下的handsome.min.css
文件
- 将
handsome.min.css
文件里的#post-content pre code
内容替换为#post-content pre code { position: relative; display: block; overflow-x: auto; margin: 4.4px 0.px .4px 1px; padding: 0; max-height: 500px; padding-left: 3.5em }
- 在
handsome.min.css
文件里末尾添加.page pre code { position: relative; display: block; overflow-x: auto; margin: 4.4px 0.px .4px 1px; padding: 0; max-height: 500px; padding-left: 3.5em } .page .code-toolbar pre code { position: relative; display: block; overflow-x: auto; margin: 4.4px 0.px .4px 1px; padding: 0; max-height: 500px; padding-left: 3.5em } .page pre { padding: 0; border-radius: 0; overflow: hidden }
- 在
handsome.min.css
文件里删除#post-content button #post-content pre:before code::-webkit-scrollbar-track-piece code::-webkit-scrollbar
- 添加
Pjax
回调函数
如果你的网站有开启Pjax
(handsome
主题默认开启)
请把以下代码添加到回调函数的地方,在你使用的主题设置里看看
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}
若插件里设置不显示行号,PJAX
函数要改为
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
其实很简单,用来
html
的iframe
标签
<iframe src="这里是内嵌的网页链接的地址" frameborder="0" width="100%" scrolling="yes" height="1000" leftmargin="0" topmargin="0">
</iframe>
使用方法
新建页面,名称随意,地址随意
然后内容填入上方代码,填入内嵌链接的地址,如果想在侧边栏中的页面分类中隐藏,只需在右边自定义模板下面的高级选项选择隐藏
。
复制下方代码添加至后台主题设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 即可
<script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>
首先在 后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码:
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}
打开主题目录的 component/comments.php
里面的 130行
到 145行
:
<div class="comment-form-comment form-group">
<label 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>
<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>
替换为以下代码:
<div class="comment-form-comment form-group">
<label for="comment"><?php _me("评论") ?> <span class="required text-danger">(请使用真实邮箱地址,方便接收评论回复)</span>
<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" 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>
在 后台-->设置外观-->开发者设置-->自定义CSS
加入以下代码:
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}
小图模式用
放大动画:
transform: scale(1.05);
动画速度:
transition: 0.6s;
/*首页文章列表获取焦点放大*/
.panel,
.panel-small{
cursor: pointer;
transition: all 0.6s;
}
.blog-post .panel:not(article):hover{
transform: scale(1.05);
}
.panel-small:hover{
transform: scale(1.05);
}
原贴:https://doge.uk/coding/useragent-modify.html
操作前请做好相应备份工作
此插件只适用于Handsome主题
,未对其它主题优化!!!
请先将插件置于Typecho的plugins目录下,且插件目录名应为UserAgent,注意大小写,否则将无法正常食用!!!
修改Handsome主题,component目录下的comments.php代码文件,大概第60~80行左右,
<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>
添加代码<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
修改后代码如下:
<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>
获取真实IP
Typecho开启CDN后,可能无法获取访客真实IP,只能取得CDN节点IP,为此可以在Typecho博客网站的根目录的config.inc.ph
p插入下面的代码:
//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = $list[0];
}
文件下载
蓝奏云 UserAgent-1.1.1:https://duibai.lanzoux.com/i3J6Ui61nud
蓝奏云 UserAgent-1.1.0:https://duibai.lanzoux.com/ix2DVi61oih
以上均博主百度找的并非本站原创持续更新