基于Hexo和Github的炫酷个人博客（基础篇）
基于Hexo和Github的炫酷个人博客（进阶篇）
网页底部加上浏览量
- 打开/themes/next/layout/_partials/footer.swig文件，在copyright加上如下代码：
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
本地查看浏览量会异常，出现百万访问，这是正常的。当放在远程服务器上，显示是正常的。
本文没有实现在底部显示，而是实现在侧边栏实现。
添加热度
- 进入LeanCloud官网，进行账号注册。登录后，进入控制台，创建应用，应用名为Hexo如下图所示：
- 创建应用后，点击存储，创建Class，Class命名为Counter，操作如下图所示：
-
查看AppID和AppKey，如下图所示：
-
打开/themes/next/layout/_macro/post.swig，command+F搜索leancloud-visitors-count，在图片位置加入℃，如下图所示
-
-编辑主题配置文件，搜索leancloud_visitors，将其值设为：ture，将AppID和AppKey粘贴到相应位置：
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: ture
app_id: app_id
app_key: app_key
效果图如下图所示：
网站底部字数统计
- 安装hexo插件，切换到根目录：
npm install hexo-wordcount --save - 在/themes/next/layout/_partials/footer.swig末尾添加代码：
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
添加网页顶部进度加载条
- 编辑主题配置文件，ctrl+F搜索pace，将其值改为ture就可以了，选择一款你喜欢的样式。
# Progress bar in the top during page loading.
pace: ture
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal
添加来必力云跟帖功能 -参考基础篇参考链接（本文未实现，不好总结）
底部隐藏由Hexo强力驱动、主题–NexT.Mist
- 打开/themes/next/layout/_partials/footer.swig，注释掉相应代码。
添加jiathis分享
-编辑主题配置文件，将jiathis改为ture即可
# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
jiathis: ture
##uid: Get this uid from http://www.jiathis.com/
#add_this_id:
-效果如下图所示：
博文置顶
- 修改hexo-generator-index插件，把node_modules/hexo-generator-index/lib/generator.js中代码替换为：
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};
- 文章添加Top值，值越大，越靠前：(在文章前面添加top字段)
---
title: Hexo-NexT主题配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
---
修改字体大小
编辑/themes/next/source/css/_variables/base.styl，ctrl+F搜索$font-size-base，修改为你想要的大小：
添加DaoVoice在线联系
效果如下，参考参考链接。
添加侧栏推荐阅读
- 编辑主题配置文件，如下配置即可：
Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
CSDN: https://csdn
Github: https://xxx
在文章底部增加版权信息
- 在目录Blog/themes/next/layout/_macro/，添加文件 my-copyright.swig，内容如下
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功！"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}
- 在目录/themes/next/source/css/_common/components/post/下添加文件my-post-copyright.styl，添加以下代码：
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
- 在/themes/next/source/css/_common/components/post/添加文件my-post-copyright.styl，文件内容如下：
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
- 修改/themes/next/layout/_macro/post.swig，在如图位置添加以下代码：
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
- 在/themes/next/source/css/_common/components/post/post.styl文件最后加入下面的代码;
@import "my-post-copyright"
- 在Markdown文章中加入copyright : ture：
---
title: Hexo-NexT主题配置
date: 2018-10-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
copyright: ture
---
-配置根目录下的_config.yml文件，配置为：
- 效果图如下所示：
Hexo博客添加站内搜索
- NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。下面介绍Local Search的安装吧。
- 安装 hexo-generator-search
npm install hexo-generator-search --save - 安装 hexo-generator-searchdb
npm install hexo-generator-searchdb --save - 编辑站点配置文件，添加以下内容
search: path: search.xml field: post format: html limit: 10000 - 编辑主题配置文件，设置Local searchenable为ture
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: ture
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
效果如下：
添加外链网易云音乐
打开网页网易云音乐，注册并登陆你的账号号，点击右上角进入我的主页，选择你喜欢的歌曲或者歌单。点击生成外链播放器。
复制上面生成html代码，粘贴在你想放置的位置。如侧边栏。
设置网站log
- 在图标网站找一张你喜欢的图标（大：32x32 小：16x16），图标网站：easyicon或者阿里巴巴矢量图标库。将下载下来的小图和中图放在/themes/next/source/images，将默认的两张图片替换掉。命名和默认的一样也可以自己定义：
-修改主题配置文件，如果你自定义了图片名字，需要做修改：
页面桃心效果和蜘蛛网效果
- 实现点击出现桃心效果，点击这里将代码copy到/themes/next/source/js/src里面新建的love.js中，然后打开\themes\next\layout_layout.swig文件,在末尾（在前面引用会出现找不到的bug） ，引用love.js
- 蜘蛛网效果只需要在页面中引入js即可，js代码
! function() {
//封装方法，压缩之后减少文件大小
function get_attribute(node, attr, default_value) {
return node.getAttribute(attr) || default_value;
}
//封装方法，压缩之后减少文件大小
function get_by_tagname(name) {
return document.getElementsByTagName(name);
}
//获取配置参数
function get_config_option() {
var scripts = get_by_tagname("script"),
script_len = scripts.length,
script = scripts[script_len - 1]; //当前加载的script
return {
l: script_len, //长度，用于生成id用
z: get_attribute(script, "zIndex", -1), //z-index
o: get_attribute(script, "opacity", 0.5), //opacity
c: get_attribute(script, "color", "0,0,0"), //color
n: get_attribute(script, "count", 99) //count
};
}
//设置canvas的高宽
function set_canvas_size() {
canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
//绘制过程
function draw_canvas() {
context.clearRect(0, 0, canvas_width, canvas_height);
//随机的线条和当前位置联合数组
var e, i, d, x_dist, y_dist, dist; //临时节点
//遍历处理每一个点
random_lines.forEach(function(r, idx) {
r.x += r.xa,
r.y += r.ya, //移动
r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
//从下一个点开始
for (i = idx + 1; i < all_array.length; i++) {
e = all_array[i];
//不是当前点
if (null !== e.x && null !== e.y) {
x_dist = r.x - e.x, //x轴距离 l
y_dist = r.y - e.y, //y轴距离 n
dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
d = (e.max - dist) / e.max,
context.beginPath(),
context.lineWidth = d / 2,
context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
context.moveTo(r.x, r.y),
context.lineTo(e.x, e.y),
context.stroke());
}
}
}), frame_func(draw_canvas);
}
//创建画布，并添加到body中
var the_canvas = document.createElement("canvas"), //画布
config = get_config_option(), //配置
canvas_id = "c_n" + config.l, //canvas id
context = the_canvas.getContext("2d"), canvas_width, canvas_height,
frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
window.setTimeout(func, 1000 / 45);
}, random = Math.random,
current_point = {
x: null, //当前鼠标x
y: null, //当前鼠标y
max: 20000
},
all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
get_by_tagname("body")[0].appendChild(the_canvas);
//初始化画布大小
set_canvas_size(), window.onresize = set_canvas_size;
//当时鼠标位置存储，离开的时候，释放当前位置信息
window.onmousemove = function(e) {
e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
}, window.onmouseout = function() {
current_point.x = null, current_point.y = null;
};
//随机生成config.n条线位置信息
for (var random_lines = [], i = 0; config.n > i; i++) {
var x = random() * canvas_width, //随机位置
y = random() * canvas_height,
xa = 2 * random() - 1, //随机运动方向
ya = 2 * random() - 1;
random_lines.push({
x: x,
y: y,
xa: xa,
ya: ya,
max: 6000 //沾附距离
});
}
all_array = random_lines.concat([current_point]);
//0.1秒后绘制
setTimeout(function() {
draw_canvas();
}, 100);
}();
配置评论系统
- 评论系统可以选择来必力或者Valine，但是前者容易被墙，所以现在选择后者。
- Valine 是一款基于Leancloud的快速、简洁且高效的无后端评论系统
- 特性
快速安全
无后端实现
MarkDown 全语法支持
轻量易用(~15kb gzipped)
配置方法
登录Leancloud，没有账户选择新建账户。参照上面获取LeanCloud统计中获取APP ID和APPKey
打开主题配置文件: themes/next/_config.yml
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 在这里说点什么吧... # comment box placeholder
avatar: identicon # 评论表头样式 /mm/identicon/monsterid/wavatar/retro/hide
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
注：其他相关配置和邮件提醒方式可查看Valline详细配置官网
下面开始修改默认样式
- 首先下载 Valine.min.js并把下载好的文件放到文件夹 themes/next/source/js/src。
- 然后打开文件themes/next/layout/_third-party/comments/valine.swig, 按照如下修改
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
- <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
+ <script src="/js/src/Valine.min.js"></script>
<script type="text/javascript">
var GUEST = ['nick','mail','link'];
var guest = '{{ theme.valine.guest_info }}';
guest = guest.split(',').filter(item=>{
return GUEST.indexOf(item)>-1;
});
new Valine({
av: AV,
el: '#comments' ,
verify: {{ theme.valine.verify }},
notify: {{ theme.valine.notify }},
appId: '{{ theme.valine.appid }}',
appKey: '{{ theme.valine.appkey }}',
placeholder: '{{ theme.valine.placeholder }}',
avatar:'{{ theme.valine.avatar }}',
guest_info:guest,
pageSize:'{{ theme.valine.pageSize }}' || 10,
});
</script>
{% endif %}
打开刚刚下载的Valine.min.js文件, 找到class=“vsubmit”>回复代码, 更换为class=“vsubmit”>提交 , 这样文字就修改了
侧栏加入已运行时间
- 首先, 在/themes/next/layout/_custom/sidebar.swig, 加入以下代码
<div id="days"></div>
</script>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("07/12/2018 15:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
注：切记要将上面的Date按照一样的格式改成自己的时间
然后还要修改/themes/next/layout/_macro/sidebar.swig
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
+ {% include '../_custom/sidebar.swig' %}
</div>
{% endif %}
- {% include '../_custom/sidebar.swig' %}
- 如果你还想修改样式, 打开/themes/next/source/css/_custom/custom.styl
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}
效果如下：
添加Top阅读排行页面
- 基于Leancloud的文章阅读量进行文章排行, 所以前提是在主题配置文件中, 配置了Leancloud的相关配置
- 新建排行榜页面,在dos输入
hexo new page "top" - 接着在语言翻译文件中加上菜单 top, 文件位置/themes/next/languages/zh_Hans.yml
menu:
top: /top/ || signal
接着在语言翻译文件中加上菜单 top, 文件位置：/themes/next/languages/zh_Hans.yml
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
top: 文章阅读排行
- 编辑第一步新建top页面生成的index.md文件
---
title: 文章阅读排行
comments: false
date: 2018-12-07 11:14:02
---
<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("app_id", "app_key");</script>
<script type="text/javascript">
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit(1000);
query.find().then(function (todo) {
for (var i=0;i<1000;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<a href='"+"https://www.titanjun.top"+url+"'>"+title+"</a>"+"<br />"+"<font color='#555'>"+"阅读次数："+time+"</font>"+"<br /><br />";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>
必须将里面的里面的app_id和app_key替换为你的主题配置文件中的值，必须替换里面博客的链接，1000是显示文章的数量.
效果如下：
文章摘要图片
-
文章摘要是指每篇文章在页面上显示的那部分内容，也就是阅读全文之前的文章内容, 进入文章后图片自动隐藏
-
修改主题配置文件/themes/next/_config.yml
excerpt_description: false
auto_excerpt:
enable: false
- 在文件中添加如下代码:/themes/next/layout/_macro/post.swig
{% if is_index %}
{% if post.description and theme.excerpt_description %}
{{ post.description }}
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="{{ url_for(post.path) }}">
{{ __('post.read_more') }} »
</a>
</div>
<!--/noindex-->
{% elif post.excerpt %}
{{ post.excerpt }}
{% if post.image %}
<div class="out-img-topic">
<img src={{ post.image }} class="img-topic" />
</div>
{% endif %}
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
{{ __('post.read_more') }} »
</a>
</div>
<!--/noindex-->
即添加如下代码：
- 为了防止有的图片宽度不够导致风格不够统一，页面不美观，需要在/themes/next/source/css/_custom/custom.styl中添加
// 自定义的文章摘要图片样式
img.img-topic {
width: 100%;
}
最后编辑有这需求的相关文章时, 在Front-matter（文件最上方以—分隔的区域）加上一行：
image: url # 图片的链接地址
本机出现bug显示不了。
QQ群 959706394，可以交流各种java知识，并且群文件学习资源共享。培训班课程，慕课网实战视频分享。
基于Hexo和Github的炫酷个人博客（基础篇）
基于Hexo和Github的炫酷个人博客（进阶篇）
已经实现，但未总结的功能（可以查看参考链接）
- SEO优化
- 关键词优化
- hexo各种插件的下载
- hexo图片插件
- hexo压缩打包插件
参考链接：以下排名不分先后
NexT主题配置个性化设置
Valine - 一款快速、简洁且高效的无后端评论系统
hexo+next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景
https://blog.csdn.net/lzy98/article/details/81140704
HEXO SEO 高级优化
hexo高阶教程：想让你的博客被更多的人在搜索引擎中搜到吗？
Hexo-NexT配置超炫网页效果
Hexo博客搭建及NexT主题个性化设置
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
