HEXO使用

记录HEXO使用

HEXO添加点击爱心效果
  1. /themes/next/source/js/src下新建文件clicklove.js,接着把下面的代码拷贝粘贴到clicklove.js文件中
1
!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);
  1. \themes\next\layout\_layout.swig文件末尾添加

    1
    2
    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/src/clicklove.js"></script>
添加不蒜子网站计数及修复

NexT主题相关

1
由于七牛云回收不蒜子测试域名,导致不蒜子更改了域名,以下域名是修改过的

找到站点的themes/next/layout/_partials目录下的footer.swig文件插入代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} &mdash; {#
#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

<!-- 插入网站计数 -->
<div>
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

总访问量 <span id="busuanzi_value_site_pv"></span> 次&nbsp&nbsp&nbsp
访客数<span id="busuanzi_value_site_uv"></span>人次
</div>

{% if theme.footer.custom_text %}
<div class="footer-custom">{#
#}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
添加阅读进度显示

NexT主题相关

找到站点的/blog/themes/next目录下的_config.yml文件修改代码如下

1
2
3
4
5
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true

# Scroll percent label in b2t button.
scrollpercent: true
添加社交外链

NexT主题相关

找到站点的/blog/themes/next目录下的_config.yml文件搜索social模块添加内容如下

1
2
3
4
social:
豆瓣: https://www.douban.com/people/176248529/ || douban
网易云: https://music.163.com/#/user/home?id=73195716 || music
GitHub: https://github.com/bwensun || github

这里需要注意的是,网上很多教程都是在social icon上面加图标,我试了无效,正解是以双竖线分割后面填写icon名称,这样可以生效,具体选择什么样的图标,可以登录fontawesome查看图标

添加音乐外链

NexT主题相关

访问网易云音乐,选择你喜欢的音乐,点击生成外链播放器,复制外联播放器代码

修改 blog\themes\next\layout\_macro的sidebar.swig文件,添加刚刚复制的外链代码

值得注意的是,这个功能会在打开网页时直接播放,有些音乐在网易云中是无法生成外链播放器的

设置背景

NexT主题相关

把你挑选的背景图片命名为放在blog\themes\next\source\images里在blog\themes\next\source\css_custom文件的custom.styl首部添加如下内容

1
2
3
4
body {
background:url(/images/图片名称);
background-attachment: fixed;
}

值得注意的是,直接部署在github上的项目首次加载会慢的离谱,也许会是一分多钟

添加评论系统Valine

添加之前请先确认主题是否支持,NEXT主题是支持的

Valine评论系统真的很好用,非常轻量,支持头像,emoji表情还有markdown语法,速度也很快,推荐

  1. 注册Leancloud账号

    1. LearnCloud注册
  2. 配置Leancloud

    1. 创建应用
    2. 创建Class
  3. 修改主题配置文件

    打开站点的/blog/themes/next目录下的_config.yml文件,搜索valine

    enable属性设置为true表示开启,将appidappkey填入主题配置文件,verify表示用户评论会先出现校验吗进行校验,avatar为头像的风格

    这里是retro,更多配置项可以见:配置项

    以下是我的配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 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: false # mail notifier , https://github.com/xCss/Valine/wiki
    verify: true # Verification code
    placeholder: 说点什么吧... # comment box placeholder
    avatar: retro # gravatar style
    guest_info: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
修改字体

NexT主题相关

字体修改在/themes/hexo-theme-next/source/css/_variables下的custom.styl文件中

1
2
$font-family-headings = Georgia, sans // 标题,修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif // 修改成你期望的字体族
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
新细明体:PMingLiU 
细明体:MingLiU
标楷体:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软正黑体:Microsoft JhengHei
微软雅黑体:Microsoft YaHei

装Office会多出来的一些字体:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei

苹果电脑中的字体:
华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
丽黑 Pro:LiHei Pro Medium
丽宋 Pro:LiSong Pro Light
标楷体:BiauKai
苹果丽中黑:Apple LiGothic Medium
苹果丽细宋:Apple LiSung Light

字体大小在/themes/hexo-theme-next/source/css/_variables下的base.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Font Weight
$font-weight-lighter = 200
$font-weight-light = 300
$font-weight-normal = 400
$font-weight-bold = 600
$font-weight-bolder = 700


// Font size
$font-size-base = 14px
$font-size-base = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
$font-size-small = $font-size-base - 2px
$font-size-smaller = $font-size-base - 4px
$font-size-large = $font-size-base + 2px
$font-size-larger = $font-size-base + 4px


// Headings font size
$font-size-headings-step = 2px
$font-size-headings-base = 24px
$font-size-headings-base = unit(hexo-config('font.headings.size'), px) if hexo-config('font.headings.size') is a 'unit'
$font-size-headings-small = $font-size-headings-base - $font-size-headings-step
$font-size-headings-smaller = $font-size-headings-small - $font-size-headings-step
$font-size-headings-large = $font-size-headings-base + $font-size-headings-step
$font-size-headings-larger = $font-size-headings-large + $font-size-headings-step

hexo默认字体不错,只是英文字体不是很好看

相关

  1. Hexo博客之改字体