​ 前几天在刷酷安时,偶然看到一个人的博客,他的博客主题让我眼前一亮,我放弃了折腾好几天的Next主题,选择了更加青睐的Sakura主题。

我选择Sakura主题的理由:

  1. Next主题很好看,以黑白为主要配色,倾向于简洁风,集成了大量的第三插件,可玩性比较高,而且也是Hexo最受欢迎的主题,但是主题用的人多了难免与别人撞主题,其次是Next主题的动态背景在PC端很流畅,但是到了移动端就出现了明显的卡顿。
  2. Sakura是基于WordPress主题Sakura修改成Hexo的主题。
  3. Sakura的大部分图片、JS、CSS等静态资源使用jsDeliver+github搭建的免费的CDN加速。
  4. Sakura特性(都是我觉得不错的特性)
    • 首页大屏视频
    • 首页随机封面
    • 图片懒加载(对于提高博客访问速度有很大帮助)
    • valine评论
    • fancy-box相册
    • pjax支持,音乐不间断
    • aplayer音乐播放器
    • 多级导航菜单(按现在大部分hexo主题来说,这也算是个特性了)
    • 完美适配移动端
    • 代码块仿MAC,可以全屏和一键复制
  5. 我认为Sakura目前的缺点
    • 适配的第三方插件较少
    • 主题文件夹下的代码比较混乱。
    • Front-matter选项太多了,虽然可以在\scaffolds\post.md预设模板
    • 每篇博客都要添加一个封面,否则封面会变成404图片,我写博客从来没有配图的习惯,于是我使用腾讯云的免费对象储存创建了一个储存桶用来作为图床。并且为每篇文章适配了封面图
  6. 综上所述我选择了Sakura主题

我的搭建过程:

1.重新创建Hexo文件夹

  1. 因为以前已经配置好了Hexo的必要条件,直接创建一个新文件夹,使用Git Bash Here安装Hexo

    hexo init
  2. 在作者的GitHub库下载ZIP文件,将ZIP直接解压在Hexo的根目录,替换原有文件,我只需要在作者配置好的站点配置文件和主题配置文件修改就行了。

2.使用jsDeliver+github搭建的免费的CDN加速。

  1. 首先了解什么是CDN(百度百科),简单来说就是提高网站相应速度

    ​ CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

    ​ 基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

  2. 如何.使用jsDeliver+github搭建的免费的CDN

    第一步:在GitHub创建一个名为CDN的公共仓库

    第二步:在电脑本地创建一个目录用来提交资源到GitHub的仓库(提前配置好git环境和ssh)

    git clone git@github.com:你的用户名/CDN.git

    第三步:在作者GitHub的CDN库下载ZIP文件,将文件解压到本地的CDN文件夹下

    第四步:复制需要的静态资源到本地git仓库中,提交到github仓库上

    //查看状态
    git status
    // 添加所有改动
    git add .
    //提交
    git commit -m '第N此提交'
    // 推送至远程仓库
    git push

    第五步:发布仓库,在自己的GitHub的CDN仓库点击release,发布的版本号自定义。

    第六步:通过jsDeliver引用资源

    //使用方法
    https://cdn.jsdelivr.net/gh/你的GitHub用户名/你的仓库名@发布的版本号/文件路径
    //比如:
    //加载JS
    https://cdn.jsdelivr.net/gh/leeyiding/CDN@1.3/js/jquery.js
    //加载图片
    https://cdn.jsdelivr.net/gh/leeyiding/CDN@1.3/img/custom/avatar.png

3.修改站点配置文件和主题配置文件,教程在GitHub官方文档

  1. 博客根目录下_config.yml文件配置

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

  3. 分类页和标签页配置

  4. 单页面配置(内容自行修改)

    • 留言板/source/comment/index.md

    • 番组计划页/source/bangumi/index.md

    • 友链页/source/link/index.md

4.添加其他插件

  1. hexo-douban

    这是一个爬取豆瓣主页书单,影集,游戏集的插件

    食用方法:

    第一步:安装插件

    npm install hexo-douban --save

    第二步:创建三个名称分别为books、movies、games的页面

    hexo new page books
    hexo new page movies
    hexo new page games

    第二步:将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

    douban:
      user: mythsman
      builtin: false
      book:
        title: 'This is my book title'
        quote: 'This is my book quote'
      movie:
        title: 'This is my movie title'
        quote: 'This is my movie quote'
      game:
        title: 'This is my game title'
        quote: 'This is my game quote'
      timeout: 10000 
    • user: 你的豆瓣ID.打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的URL大概是这样:”https://www.douban.com/people/xxxxxx/“ ,其中的”xxxxxx”就是你的个人ID了。
    • builtin: 是否将生成页面的功能嵌入hexo shexo g中,默认是false,另一可选项为true(1.x.x版本新增配置项)。
    • title: 该页面的标题.
    • quote: 写在页面开头的一段话,支持html语法.
    • timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

    需要注意的是,通常大家都喜欢用hexo d来作为hexo deploy命令的简化,但是当安装了hexo douban之后,就不能用hexo d了,因为hexo doubanhexo deploy的前缀都是hexo d

    $ hexo douban -h
    Usage: hexo douban
    
    Description:
    Generate pages from douban
    
    Options:
      -b, --books   Generate douban books only
      -g, --games   Generate douban games only
      -m, --movies  Generate douban movies only

    如果配置了builtin参数为true,那么除了可以使用hexo douban命令之外,hexo ghexo s也内嵌了生成页面的功能。

  2. hexo-helper-live2d插件

    第一步:安装插件

    npm install --save hexo-helper-live2d

    第二步:输入以下命令,下载相应的模型,将 packagename 更换成模型名称即可,更多模型选择请点击此处,各个模型的预览请访问原作者的博客

    npm install packagename

    第三步:打开站点目录下的 _config.yml 文件,添加如下代码

    live2d:
        enable: true
        scriptFrom: local
        model: 
            use: live2d-widget-model-haruto #模型选择
        display: 
            position: right  #模型位置
            width: 150       #模型宽度
            height: 300      #模型高度
        mobile: 
            show: false      #是否在手机端显示

结语

​ 以上就是我添加Sakura主题的全过程,基本上是重新搭建博客,前前后后折腾了两天时间,不过看着最后的改造结果,感觉非常欣慰。

​ 此篇水文到此结束!!!!!!!!!!!!!

Comments | NOTHING