icarus，就试着更换了主题，发现还真挺漂亮的，于是就在做一个主题吧，哪天审美又疲劳了，再换回来呗。F:\blog\themes\icarus\source\js下，新建clicklove.js，写入以下代码。!function(e,t,a){
function n(){
c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
o(),
r()
}
function r(){
for(var e=0;e<d.length;e++)
d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");
requestAnimationFrame(r)
}
function o(){
var t="function"==typeof e.onclick&&e.onclick;
e.onclick=function(e){
t&&t(),i(e)
}
}function i(e){
var a=t.createElement("div");
a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
}
function c(e){
var a=t.createElement("style");a.type="text/css";
try{
a.appendChild(t.createTextNode(e))
}
catch(t){
a.styleSheet.cssText=e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function s(){
return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
}
var d=[];
e.requestAnimationFrame=function(){
return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){
setTimeout(e,1e3/60)
}
}(),
n()
}
(window,document);
layout.ejs，找到F:\blog\themes\icarus\layout\layout.ejs,添加：<script src="js/clicklove.js"></script>
widgets:
-
type: toc
position: left
toc： true
---
tags:
categories:
toc： true
---
_config.yml中开启画廊功能：plugines:
gallery: true
widget字样，例如下面有，分别有：左（lift），右（right），隐藏（false）。左右栏固定，不随着滑轮滑动。
sidebar:
# left sidebar settings
left:
# Whether the left sidebar is sticky when page scrolls
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: true
# right sidebar settings
right:
# Whether the right sidebar is sticky when page scrolls
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: true
# Widget name
type: category
# Where should the widget be placed, left or right
position: left
-
# Widget name
type: tagcloud
# Where should the widget be placed, left or right
position: false
-
# Widget name
type: recent_posts
# Where should the widget be placed, left or right
position: false
-
# Widget name
type: archive
# Where should the widget be placed, left or right
position: false
-
# Widget name
type: tag
# Where should the widget be placed, left or right
position: lift
comment字样，添加如下：comment:
type: valine
app_id: 你的id
app_key: 你的key
notify: false
verify: false
placeholder:
donate:
-
# Donation entry name
type: alipay
# Qrcode image URL
qrcode: '/images/alipay.jpg'
-
# Donation entry name
type: wechat
# Qrcode image URL
qrcode: '/images/wechatpay.jpg'
#-
# Donation entry name
#type: paypal
# Paypal business ID or email address
#business: ''
# Currency code
#currency_code: USD
#-
# Donation entry name
#type: patreon
# URL to the Patreon page
#url: ''
search
search
type： insight
F:\blog\themes\icarus\includes\helpers\layout.js，第24行开始修改如下：+代表增加，-代表删除 const widgets = hexo.extend.helper.get('get_config').bind(this)('widgets');
- return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+ if (this.page.layout !== 'post') {
+ return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+ }
+ if (position === 'left') {
+ return widgets.filter(widget => widget.hasOwnProperty('position') && (widget.type === 'toc' || widget.type === 'profile'));
+ } else {
+ return []
+ }
layout/common/widget.ejs修改第五行如下： <% function side_column_class() {
switch (column_count()) {
case 2:
- return 'is-4-tablet is-4-desktop is-4-widescreen';
+ return 'is-4-tablet is-4-desktop is-3-widescreen';
case 3:
layout/layout.ejs修改如下-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
<%- partial('common/navbar', { page }) %>
<% function main_column_class() {
switch (column_count()) {
case 1:
return 'is-12';
case 2:
- return 'is-8-tablet is-8-desktop is-8-widescreen';
+ return 'is-8-tablet is-8-desktop is-9-widescreen';
source/css/style/styl,在不同屏幕下的大小 .is-2-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
+ .is-3-column .container
+ max-width: screen-widescreen - gap
+ width: screen-widescreen - gap
@media screen and (min-width: screen-fullhd)
+ .is-3-column .container
+ max-width: screen-fullhd - 2 * gap
+ width: screen-fullhd - 2 * gap
.is-2-column .container
max-width: screen-widescreen - 2 * gap
width: screen-widescreen - 2 * gap
layout/widget/toc.ejs，增加column-left is-sticky类，在第28行-<div class="card widget" id="toc">
+<div class="card widget column-left is-sticky" id="toc">
includes/helpers/config.js，修改第33行 return defaultValue;
} else {
const property = readProperty(specs, configName);
- return property === null ? null : property[descriptors.defaultValue];
+ const result = property === null ? null : property[descriptors.defaultValue];
+ return (configName === 'toc' && this.page.layout === 'post' && result === null) ? true : result;
}
layout/widget/profile.ejs
- <nav class="level is-mobile">
+ <nav class="level menu-list is-mobile" style="margin-bottom:1rem">
<div class="level-item has-text-centered is-marginless">
- <div>
+ <a href="<%- url_for('/archives/') %>">
<p class="heading">
archive 和 tagcloud。layout/widget/archive.ejs
-<div class="card widget">
+<div class="card widget is-hidden-mobile">
layout/widget/recent_posts.ejs
<div class="card widget is-hidden-mobile">
<div class="card-content">
layout/common/article.ejs，在第50行修改如下： <div class="content">
<%- index && post.excerpt ? post.excerpt : post.content %>
</div>
+ <% if (!index && post.layout === 'post' && post.copyright !== false) { %>
+ <ul class="post-copyright">
+ <li><strong>本文标题：</strong><a href="<%= post.permalink %>"><%= page.title %></a></li>
+ <li><strong>本文作者：</strong><a href="<%= theme.url %>"><%= theme.author %></a></li>
+ <li><strong>本文链接：</strong><a href="<%= post.permalink %>"><%= post.permalink %></a></li>
+ <li><strong>发布时间：</strong><%= post.date.format("YYYY-MM-DD") %></li>
+ <li><strong>版权声明：</strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！
+ </li>
+ </ul>
+ <% } %>
<% if (!index && post.tags && post.tags.length) { %>
+.post-copyright
+ font-size: 1rem
+ letter-spacing: 0.02rem
+ word-break: break-all
+ margin: 2.5rem 0 0
+ padding: 1rem 1rem
+ border-left: 3px solid #FF1700
+ background-color: #F9F9F9
_config.yml中，找到busuanzi
busuanzi: true
layout/common/footer.ejs文件，找到<span id="busuanzi_container_site_uv">，在下方添加： <% if (busuanzi) { %>
<br>
- <span id="busuanzi_container_site_uv">
- <%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %>
- </span>
+ <span id="busuanzi_container_site_uv">来访<span id="busuanzi_value_site_uv"></span>0人</span>
+ <span id="busuanzi_container_site_pv">总访问<span id="busuanzi_value_site_pv"></span>0次</span>
<% } %>
font Awesome，里面的图标只有600多个，而且都是黑白的，并且有的时候还加载不出来（墙的原因），所以我换做用阿里巴巴矢量图标库。下载代码，下载到本地。iconfont.css，添加到F:\blog\themes\icarus\source\css。F:\blog\themes\icarus\layout\widget\profile.ejs,添加一行代码，引入iconfont.css
<% for (let name in socialLinks) {
let link = socialLinks[name]; %>
+ <link rel="stylesheet" href="/css/iconfont.css">
<a class="level-item button is-white is-marginless" target="_blank" title="<%= name %>" href="<%= url_for(typeof(link) === 'string' ? link : link.url) %>">
<% if (typeof(link) === 'string') { %>
<%= name %>
<% } else { %>
<i class="<%= link.icon %>"></i>
<% } %>
iconfont.css查看。例如：
Github:
icon: iconfont icon-git
url: 'https://github.com/DAQ121'
.js文件，添加代码。
- 如果使用的是font awesome图标库的话，就添加<i class="fas fa-guidang"></i>,如果使用的是阿里云图标库的话，就添加<i class="iconfont icon-guidang"></i>，注意，要添加在<h3></h3>内部。
style.styl，添加两行代码。 .menu-list li ul
margin-right: 0
+ .menu-list a
+ transition: background-color 0.3s ease-in-out
.menu-list a.level
display: flex
.has-text-centered figure.image
margin: auto
/themes/icarus/layout/common/footer.ejs，在合适位置添加以下代码<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("12/28/2018 12:49:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
cnpm install hexo-generator-feed --save
#RSS订阅
plugin:
- hexo-generator-feed
#Feed.Atom
feed:
type: atom
path: rss.xml
limit: 0
hub:
content: 'true'
order_by: -date
rss
RSS:
icon: fas fa-rss
url: /rss.xml