Hexo站点建设之——主题升级

发表于 分类于 ， 阅读时长 ≈ 2 分钟

一 为何要升级

  1. 主仓库已从 iissnan 名下 迁移至 theme-next 组织
  2. theme-next版本已经从5.1.4 升级到了7.1.1(可能包含一些新的功能)
  3. 插件之间的依赖变弱
  4. 旧版本编译文件过多时编译时间变长

二 主题升级

2.1 升级说明文档

2.2 安装新主题库

git clone https://github.com/theme-next/hexo-theme-next themes/next-v7.1.1

主题clone到本地后
theme-v7.1.1-clone

2.3 将_config.yml下的theme替换为刚下载的主题


2.4 配置_config.yml下的导航菜单

2.5 配置_config.yml导航菜单数字统计

2.6 配置_config.yml主题样式

2.7 配置_config.yml社交账号

2.8 配置_config.yml友情链接

2.9 配置_config.yml头像

注：

  • url：头像的存储位置
  • rounded：true——圆形头像,false——默认形状
  • opacity:头像的透明度(0-完全透明，1-完全不透明)
  • rotated:鼠标放在头像上时是否旋转

2.10 配置_config.yml字数、阅读时长统计

2.10.1 使用hexo-wordcount字数统计

post_wordcount:                                                
    item_text: true 
    wordcount: true
    min2read: true
    totalcount: true

2.10.2 使用hexo-symbols-count-time统计

  1. 安装依赖库文件

     npm install hexo-symbols-count-time --save

  2. 在主目录下的配置_config.yml 

     symbols_count_time:
     symbols: true
     time: true
     total_symbols: true
     total_time: true
     exclude_codeblock: false

  3. 在主题目录下配置_config.yml 

     symbols_count_time:
     separated_meta: true
     item_text_post: true
     item_text_total: false
     awl: 4
     wpm: 275
     suffix: mins.

2.11 配置_config.yml打赏设置

2.12 配置_config.yml高亮代码设置

highlight_theme: normal

2.13 配置_config.yml评论

livere_uid: xxxxxxxxx

问题异常补充

themes\next-v7.1.1\layout\_third-party\comments\livere.swig

  • 注意事项

    window.livereOptions = {
    refer: 'pgzxc.github.io'+''
    };

2.14 配置_config.yml leancloud.cn

leancloud_visitors:
    #enable: false
    #app_id: #<app_id>
    #app_key: #<app_key>
    enable: true
    app_id: xoStNXjq2xNoDRjTltoOztdq-gzGzoHsz
    app_key: 6g89MPFNvTH2YHnKMAK1n1V8

2.14 配置_config.yml 搜索

local_search:
    enable: true

2.15 配置_config.yml网站脚注

local_search:
    enable: true

2.16 配置_config.yml版权声明

creative_commons:
    license: by-nc-sa
    sidebar: true
    post: true
    language:

2.17 配置_config.yml代码块

codeblock:                                                                                          
    border_radius: 2                                                                               
    copy_button:
        enable: true 
        show_result: true

2.18 配置_config.yml访问次数

busuanzi_count:
    enable: true
    total_visitors: true
    total_visitors_icon: user
    total_views: true
    total_views_icon: eye
    post_views: true
    post_views_icon: eye

2.19 配置_config.yml设置备案号

2.20 配置_config.yml note样式

note:
    style: simple
    icons: false
    border_radius: 3

2.21 配置_config.yml umeng统计

在\themes\next\layout\_third-party\analytics\cnzz-analytics.swig



{% if theme.cnzz_siteid %}
	

	
	

	{% endif %}

2.22 配置网站图片背景

2.22.1 位置

修改themes\next-v7.1.1\source\css\_custom\custom.styl

2.22.2 代码

.site-meta { 
    background: url(/images/title-image.gif); //天空的颜色，和我的眼镜是绝配
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;	
}

2.23 配置Title高度

2.23.1 位置

 themes\next-v7.1.1\source\css\_schemes\Pisces\_brand.styl

2.23.2 代码

.site-meta 
{
    padding: 80px 0;
}