前言
Handsome主题
在复杂中,保持简洁。 一款精心打磨后的typecho
主题
介绍
Handsome
主题已有一年多了,这款主题论售后还是更新都很好,而且也主题本身也不贵。如果你是小白或者第一次使用这个模板,那一定要仔细看好了作者写的使用文档
本文博主整理了几种美化样式,希望有喜欢的~
美化
1. 头像呼吸光环和鼠标悬停旋转放大
.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;
}
}
2. 左侧文章图标和评论头像鼠标悬停旋转
.img-circle {
transition: all 0.3s;
}
.img-circle:hover {
transform: rotate(360deg);
}
3. 文章内打赏图标跳动
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
4. 彩色标签云
js为标签随机添加上预先定义的颜色,每次刷新都会进行换色:
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
如果主题中启用了pjax
,还需要将上面代码添加到pjax
回调函数中
5. 首页文章列表悬停上浮
.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);
}
6. 首页文章列表头图悬停放大并将超出范围隐藏
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
7. 文章内头图和文章图片悬停放大并将超出范围隐藏
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
8. 右侧列表导航栏图标颜色
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
9. 点击空白区域隐藏歌曲列表
主题中原来是必须重新点击耳机图标才能将歌曲列表隐藏,感觉有点累,而且此时再点击闲言碎语会将两个元素重叠。设置之后可以点击空白区域将歌曲列表隐藏,由于本文主旨是尽量不修改源码,所以实现的方式较为繁琐。先添加css:
.musicPlayerHiden {
display: none;
}
然后添加js代码:
document.body.onclick = function () {
document.querySelector(".skPlayer-list").classList.add("musicPlayerHiden");
}
document.querySelector(".skPlayer-list-switch").onclick = function (e) {
document.querySelector(".skPlayer-list").classList.remove("musicPlayerHiden");
document.querySelector(".skPlayer-list").onclick = function (e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancalBubble = true;
}
}
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancalBubble = true;
}
}
10.文章标题居中
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
目前小站就改了这些,如果后面再修改再添加感谢西瓜博客提供了大部分代码
复制弹窗效果
关于我页面时间轴记录
js动态标题
春节倒计时
首页左侧博主介绍
将以下代码添加至后台-外观-初级设置-博主的介绍。这段代码可添加至网站任意位置
<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;
}
文章页面添加百度收录查询
在主题 functions.php 文件最下方新增
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1)
{echo "百度已收录";
}
else
{echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录!\" target=\"_blank\"
href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
}
第二步:在主题 post.php 文件想显示的地方增加
<!--百度收录-->
<li class="meta-categories"><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>
<span class="sr-only"><?php _me("百度收录") ?>:</span> <span class="meta-value"><?php echo
baidu_record() ?></span></li>
首页添加翻转动画
引入js(命名为wow.js)(可在模板设置添加(自定义输出head))
<script src="目录/wow.js"></script>
(function() {
var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
Util = (function() {
function Util() {}
Util.prototype.extend = function(custom, defaults) {
var key, value;
for (key in defaults) {
value = defaults[key];
if (custom[key] == null) {
custom[key] = value;
}
}
return custom;
};
Util.prototype.isMobile = function(agent) {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
};
Util.prototype.createEvent = function(event, bubble, cancel, detail) {
var customEvent;
if (bubble == null) {
bubble = false;
}
if (cancel == null) {
cancel = false;
}
if (detail == null) {
detail = null;
}
if (document.createEvent != null) {
customEvent = document.createEvent('CustomEvent');
customEvent.initCustomEvent(event, bubble, cancel, detail);
} else if (document.createEventObject != null) {
customEvent = document.createEventObject();
customEvent.eventType = event;
} else {
customEvent.eventName = event;
}
return customEvent;
};
Util.prototype.emitEvent = function(elem, event) {
if (elem.dispatchEvent != null) {
return elem.dispatchEvent(event);
} else if (event in (elem != null)) {
return elem[event]();
} else if (("on" + event) in (elem != null)) {
return elem["on" + event]();
}
};
Util.prototype.addEvent = function(elem, event, fn) {
if (elem.addEventListener != null) {
return elem.addEventListener(event, fn, false);
} else if (elem.attachEvent != null) {
return elem.attachEvent("on" + event, fn);
} else {
return elem[event] = fn;
}
};
Util.prototype.removeEvent = function(elem, event, fn) {
if (elem.removeEventListener != null) {
return elem.removeEventListener(event, fn, false);
} else if (elem.detachEvent != null) {
return elem.detachEvent("on" + event, fn);
} else {
return delete elem[event];
}
};
Util.prototype.innerHeight = function() {
if ('innerHeight' in window) {
return window.innerHeight;
} else {
return document.documentElement.clientHeight;
}
};
return Util;
})();
WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
function WeakMap() {
this.keys = [];
this.values = [];
}
WeakMap.prototype.get = function(key) {
var i, item, j, len, ref;
ref = this.keys;
for (i = j = 0, len = ref.length; j < len; i = ++j) {
item = ref[i];
if (item === key) {
return this.values[i];
}
}
};
WeakMap.prototype.set = function(key, value) {
var i, item, j, len, ref;
ref = this.keys;
for (i = j = 0, len = ref.length; j < len; i = ++j) {
item = ref[i];
if (item === key) {
this.values[i] = value;
return;
}
}
this.keys.push(key);
return this.values.push(value);
};
return WeakMap;
})());
MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
function MutationObserver() {
if (typeof console !== "undefined" && console !== null) {
console.warn('MutationObserver is not supported by your browser.');
}
if (typeof console !== "undefined" && console !== null) {
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
}
}
MutationObserver.notSupported = true;
MutationObserver.prototype.observe = function() {};
return MutationObserver;
})());
getComputedStyle = this.getComputedStyle || function(el, pseudo) {
this.getPropertyValue = function(prop) {
var ref;
if (prop === 'float') {
prop = 'styleFloat';
}
if (getComputedStyleRX.test(prop)) {
prop.replace(getComputedStyleRX, function(_, _char) {
return _char.toUpperCase();
});
}
return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
};
return this;
};
getComputedStyleRX = /(\-([a-z]){1})/g;
this.WOW = (function() {
WOW.prototype.defaults = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true,
callback: null
};
function WOW(options) {
if (options == null) {
options = {};
}
this.scrollCallback = bind(this.scrollCallback, this);
this.scrollHandler = bind(this.scrollHandler, this);
this.resetAnimation = bind(this.resetAnimation, this);
this.start = bind(this.start, this);
this.scrolled = true;
this.config = this.util().extend(options, this.defaults);
this.animationNameCache = new WeakMap();
this.wowEvent = this.util().createEvent(this.config.boxClass);
}
WOW.prototype.init = function() {
var ref;
this.element = window.document.documentElement;
if ((ref = document.readyState) === "interactive" || ref === "complete") {
this.start();
} else {
this.util().addEvent(document, 'DOMContentLoaded', this.start);
}
return this.finished = [];
};
WOW.prototype.start = function() {
var box, j, len, ref;
this.stopped = false;
this.boxes = (function() {
var j, len, ref, results;
ref = this.element.querySelectorAll("." + this.config.boxClass);
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box);
}
return results;
}).call(this);
this.all = (function() {
var j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box);
}
return results;
}).call(this);
if (this.boxes.length) {
if (this.disabled()) {
this.resetStyle();
} else {
ref = this.boxes;
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
this.applyStyle(box, true);
}
}
}
if (!this.disabled()) {
this.util().addEvent(window, 'scroll', this.scrollHandler);
this.util().addEvent(window, 'resize', this.scrollHandler);
this.interval = setInterval(this.scrollCallback, 50);
}
if (this.config.live) {
return new MutationObserver((function(_this) {
return function(records) {
var k, len1, node, record, results;
results = [];
for (k = 0, len1 = records.length; k < len1; k++) {
record = records[k];
results.push((function() {
var l, len2, ref1, results1;
ref1 = record.addedNodes || [];
results1 = [];
for (l = 0, len2 = ref1.length; l < len2; l++) {
node = ref1[l];
results1.push(this.doSync(node));
}
return results1;
}).call(_this));
}
return results;
};
})(this)).observe(document.body, {
childList: true,
subtree: true
});
}
};
WOW.prototype.stop = function() {
this.stopped = true;
this.util().removeEvent(window, 'scroll', this.scrollHandler);
this.util().removeEvent(window, 'resize', this.scrollHandler);
if (this.interval != null) {
return clearInterval(this.interval);
}
};
WOW.prototype.sync = function(element) {
if (MutationObserver.notSupported) {
return this.doSync(this.element);
}
};
WOW.prototype.doSync = function(element) {
var box, j, len, ref, results;
if (element == null) {
element = this.element;
}
if (element.nodeType !== 1) {
return;
}
element = element.parentNode || element;
ref = element.querySelectorAll("." + this.config.boxClass);
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
if (indexOf.call(this.all, box) < 0) {
this.boxes.push(box);
this.all.push(box);
if (this.stopped || this.disabled()) {
this.resetStyle();
} else {
this.applyStyle(box, true);
}
results.push(this.scrolled = true);
} else {
results.push(void 0);
}
}
return results;
};
WOW.prototype.show = function(box) {
this.applyStyle(box);
box.className = box.className + " " + this.config.animateClass;
if (this.config.callback != null) {
this.config.callback(box);
}
this.util().emitEvent(box, this.wowEvent);
this.util().addEvent(box, 'animationend', this.resetAnimation);
this.util().addEvent(box, 'oanimationend', this.resetAnimation);
this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
return box;
};
WOW.prototype.applyStyle = function(box, hidden) {
var delay, duration, iteration;
duration = box.getAttribute('data-wow-duration');
delay = box.getAttribute('data-wow-delay');
iteration = box.getAttribute('data-wow-iteration');
return this.animate((function(_this) {
return function() {
return _this.customStyle(box, hidden, duration, delay, iteration);
};
})(this));
};
WOW.prototype.animate = (function() {
if ('requestAnimationFrame' in window) {
return function(callback) {
return window.requestAnimationFrame(callback);
};
} else {
return function(callback) {
return callback();
};
}
})();
WOW.prototype.resetStyle = function() {
var box, j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box.style.visibility = 'visible');
}
return results;
};
WOW.prototype.resetAnimation = function(event) {
var target;
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
target = event.target || event.srcElement;
return target.className = target.className.replace(this.config.animateClass, '').trim();
}
};
WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
if (hidden) {
this.cacheAnimationName(box);
}
box.style.visibility = hidden ? 'hidden' : 'visible';
if (duration) {
this.vendorSet(box.style, {
animationDuration: duration
});
}
if (delay) {
this.vendorSet(box.style, {
animationDelay: delay
});
}
if (iteration) {
this.vendorSet(box.style, {
animationIterationCount: iteration
});
}
this.vendorSet(box.style, {
animationName: hidden ? 'none' : this.cachedAnimationName(box)
});
return box;
};
WOW.prototype.vendors = ["moz", "webkit"];
WOW.prototype.vendorSet = function(elem, properties) {
var name, results, value, vendor;
results = [];
for (name in properties) {
value = properties[name];
elem["" + name] = value;
results.push((function() {
var j, len, ref, results1;
ref = this.vendors;
results1 = [];
for (j = 0, len = ref.length; j < len; j++) {
vendor = ref[j];
results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
}
return results1;
}).call(this));
}
return results;
};
WOW.prototype.vendorCSS = function(elem, property) {
var j, len, ref, result, style, vendor;
style = getComputedStyle(elem);
result = style.getPropertyCSSValue(property);
ref = this.vendors;
for (j = 0, len = ref.length; j < len; j++) {
vendor = ref[j];
result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
}
return result;
};
WOW.prototype.animationName = function(box) {
var animationName;
try {
animationName = this.vendorCSS(box, 'animation-name').cssText;
} catch (_error) {
animationName = getComputedStyle(box).getPropertyValue('animation-name');
}
if (animationName === 'none') {
return '';
} else {
return animationName;
}
};
WOW.prototype.cacheAnimationName = function(box) {
return this.animationNameCache.set(box, this.animationName(box));
};
WOW.prototype.cachedAnimationName = function(box) {
return this.animationNameCache.get(box);
};
WOW.prototype.scrollHandler = function() {
return this.scrolled = true;
};
WOW.prototype.scrollCallback = function() {
var box;
if (this.scrolled) {
this.scrolled = false;
this.boxes = (function() {
var j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
if (!(box)) {
continue;
}
if (this.isVisible(box)) {
this.show(box);
continue;
}
results.push(box);
}
return results;
}).call(this);
if (!(this.boxes.length || this.config.live)) {
return this.stop();
}
}
};
WOW.prototype.offsetTop = function(element) {
var top;
while (element.offsetTop === void 0) {
element = element.parentNode;
}
top = element.offsetTop;
while (element = element.offsetParent) {
top += element.offsetTop;
}
return top;
};
WOW.prototype.isVisible = function(box) {
var bottom, offset, top, viewBottom, viewTop;
offset = box.getAttribute('data-wow-offset') || this.config.offset;
viewTop = window.pageYOffset;
viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
top = this.offsetTop(box);
bottom = top + box.clientHeight;
return top <= viewBottom && bottom >= viewTop;
};
WOW.prototype.util = function() {
return this._util != null ? this._util : this._util = new Util();
};
WOW.prototype.disabled = function() {
return !this.config.mobile && this.util().isMobile(navigator.userAgent);
};
return WOW;
})();
}).call(this);
在footer.php(主题/component/footer.php)(前添加)
<script>
wow = new WOW({
animateClass: 'animated',
});
wow.init();
</script>
在Content.php(主题/libs/Content.php)改
第1077
$html .= '<div class="panel wow animated flipInX">';
第1083
<div class="panel wow animated flipInX"><div class="index-post-img"><a href="{$parameterArray['linkUrl']}"><img {$imageHtml}
盒子模式改进
/*盒子改进*/
@charset "utf8";
/*Modifi-css for handsome 4.5.x*/
/*main*/
.entry-content{background-color:transparent}.panel-small .post-meta{padding:25px 30px 15px 25px!important}.panel-small .pos50t-meta{padding-left:25px;padding-right:25px}.b-light{border-color:#bbb4}.tip:before{margin-top:0!important}.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small{transition:all .2s;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2)!important}.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover{box-shadow:1px 1px 5px 2px rgba(0,0,0,0.3)!important}.list-group-item{background-color:rgba(255,255,255,.35)}.thumb-lg{width:130px}#widget-tabs-4-comments .list-group-item,#tag_toc,#post-panel,#sidebar,#post-content{background-color:transparent!important}#alllayout.app-aside-folded .tooltip{display:none!important}.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}.standpage,aside,aside *{transition:all .3s}.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.3)}.wrapper-md article,.wrapper-md>#comments{border-radius:5px;overflow:hidden}.bg-auto:before{bottom:51px}@media screen and (min-width:992px){aside.col.w-md.b-l{background-color:rgba(255,255,255,.2)}aside.col.w-md.b-l:hover{background-color:#fff}}header.wrapper-md{background-color:rgba(246,248,248,.93)!important}.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:5px}.index-post-img,.index-post-img-small{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a{transition:all .2s}.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small{transform:scale(1.05)}#footer>.wrapper{background-color:rgba(237,241,242,.2)}.streamline{margin-left:20px;padding-right:10px}.streamline .comment-body{position:relative}.streamline .comment-body .m-l-lg:before{background-color:rgba(255,255,255,.3);content:" ";position:absolute;width:calc(100%+10px);height:calc(100%+20px);top:-10px;left:0;z-index:-1;border-radius:2px;box-shadow:0 0 2px 2px rgba(0,0,0,.125)}aside.col.w-md.no-border-xs{transition:all .3s}.visible-xs-inline{display:inline-block!important}@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}}.tocify-item{background-color:rgba(255,255,255,.2.5)}.tocify-item.active{color:#7266ba;font-weight:700}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}#kotori:hover{left:0;bottom:0}#kotori.hidekotori{left:-110px;bottom:-110px}@media screen and (max-width:767px){#kotori{display:none}.blog-post>.panel:hover .index-post-img .item-thumb{transform:none!important}}.index-post-title a:hover{color:#2ebaae}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;border-top-color:#ddd;padding-top:10px}.max-img{max-height:400px}.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}.lg-backdrop{background-color:rgba(0,0,0,.8)}.skPlayer-name{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}html.fancybox-enabled{overflow-y:auto}.fancybox-bg{background-color:rgba(0,0,0,.95)}.fancybox-arrow:after{background-color:rgba(0,0,0,.8)}.blog-post .post-meta.wrapper-lg{padding-top:15px}.share,.yellow,.red,.lblue,.green{background-position-y:50%}.timeline .tl-date{color:#fff;text-shadow:0 0 4px #000}body.modal-open{overflow-y:auto;padding-right:0!important}.reply2view{background-color:transparent;border:solid 1px #bbb}#content{transition:all .3s}.OwO .OwO-logo{height:28px}#tag_toc.fixed #toc{width:100%}.page-navigator .next a,.page-navigator .prev a{height:31px}.page-navigator>li:last-child>a,.page-navigator>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}#tooltip-1{width:0;height:0;overflow:hidden}.tooltip-2{width:0;height:0;border:0}.item-thumb-small{background-position:left}
/*experimental modify 2018-07-19*/
@media screen and (min-width:1200px){.sticky{position: absolute;top: 10px;left: 15px}.panel .item-thumb{height:300px}#post-panel .blog-post{position:relative}#post-panel .panel{overflow:hidden}#post-panel .panel .post-meta{position:relative;margin-top:-300px;height:300px;padding-top:133px!important;padding-bottom:0!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel .post-meta,#post-panel .panel-small .post-meta{border-radius:5px}#post-panel .panel .post-meta *,#post-panel .panel-small .post-meta *{color:#fff!important}#post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2{text-align:center;text-shadow:0 0 3px #fff}#post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div{transition:all .3s;transform:translateY(-10px);opacity:0}#post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted{position:absolute;bottom:20px}#post-panel .panel .post-meta>.line{position:absolute;bottom:40px;width:740px}#post-panel .panel-small .post-meta>.line{position:absolute;bottom:40px;width:350px}#post-panel .panel .post-meta>.summary{position:absolute;bottom:60px;width:740px}#post-panel .panel-small .post-meta>.summary{position:absolute;bottom:60px;width:350px}#post-panel .panel-small{display:inline-block;height:300px;width:calc(50% - 10px);margin-right:20px}#post-panel .panel-small:nth-child(2n){margin-right:0}#post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small{height:100%;width:100%}#post-panel .panel-small .post-meta{position:absolute;height:300px;width:calc(50% - 10px);padding:133px 20px 0 20px!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{background-color:rgba(0,0,0,.6)}#post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div{opacity:1;transform:translateY(0)}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{padding-top:80px!important}#post-panel .ahover{display:block;position:absolute;top:0;left:0;right:0;bottom:0}.blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small{filter:blur(3px)}}header.bg-light.wrapper-md{margin-top:30px;background-color:transparent!important;border:0;text-align:center;text-shadow:0 0 3px #000}header.wrapper-md *{color:#fff}header.wrapper-md h1{font-size:32px}header.wrapper-md h1{font-weight:bold!important}
/*links*/
.link-main{padding:50px 0 50px 20px;text-align:center}.link-main h3{margin-top:0}.link-main .item{display:inline-block;letter-spacing:0;margin-right:20px;margin-bottom:20px;width:289px;height:240px;font-size:14px;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.35);border:1px solid #e1e8ed;transition:background .2s}.link-main .link-bg{position:relative;height:90px;padding:0 1em;background-color:#777}.link-main .link-bg .bg:before{display:block;content:"";position:absolute;left:0;height:100%;width:100%;background:rgba(0,0,0,.5)}.link-main .link-bg .link-avatar{position:absolute;bottom:-50px;border:4px solid #FFF;border-radius:100%;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.5)}.link-main .link-bg .link-avatar img{border-radius:100%}.link-main .avatar{display:block;object-fit:cover}.link-main .bg,.link-main .link-bg{background-repeat:no-repeat;background-position:center;background-size:cover;display:block}.link-main .bg{position:absolute;top:0;bottom:0;left:0;right:0;filter:blur(1.5px);background-color:#fff}.link-main .meta{padding:.9em 1em;text-align:right}.link-main .info{color:#525766;padding:0 1em 1em}.link-main .info .name{font-weight:600;font-size:16px}@media screen and (max-width:330px){.link-main{padding:50px 0 50px 0}.link-main .item{margin-right:0}}.link-main .item:hover{background:rgba(255,255,255,1)}.link-main .item:hover .bg{filter:blur(0.1px)}
/*comments*/
#comments pre code{display:inline}.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}.hideContent{background-color:transparent;padding:10px 0}
.agent {display: inline-block;margin-left: 5px;padding: 0 3px;border-radius: 2px;color: #58666e;font-size: 12px;opacity: .8}
/*img*/
img[mw400]{max-width:400px!important;width:100%}.mw400{max-width:400px}
修复透明模式下目录树BUG
/* 开发者设置——自定义css里面添加这个即可*/
#toc {
background: rgba(255, 255, 255, 0.3);
}
博主前端不精,美化代码全部来源于网络!如有侵权,请联系站长删除
请问您博客评论界面上的每个人的那个浏览器系统IP那个怎么弄呀 感觉好炫酷
插件,之前文章有发
我刚刚翻了一下默认和教程里面的没找到,,
1.头像呼吸 貌似在handsome6.0里面对头图也会起作用
我想知道页面上像你一样右侧有一个自定义样式的按钮怎么搞出来的
handsome自带的
大佬,我想问一下,像你现在这篇文章标题handsome美化 魔改,是怎么弄成居中的呀?
https://blog.qqiyu.cn/397.html#10.%E6%96%87%E7%AB%A0%E6%A0%87%E9%A2%98%E5%B1%85%E4%B8%AD
懂了懂了,我看了下你的源代码,原来我说的那个文章标题,是盒子模式改进那串代码实现的OωO
这个我看了,这个应该是指文章内标题吧,而且还只能二号标题居中,不是指这篇文章的标题吧 ::quyin:look::
怎么像你这样弄个背景随机图片的
https://v1.qqiyu.cn
api有,是handsome后台改还是需要改文件啊
外观设置
看看
看看大佬
萌新来看看大佬的教程
拿走了,hh
拿走了就拿走吧,反正你还得回来哈哈哈