安装并优化 NexT 主题

前面已经搭建好了个人博客,接下来就是装饰一下自己的网站,毕竟是属于自己的地盘,还是想让它精美一些,一方面自己能看着舒服,给自己坚持写博客添加一些动力;另一方面,精美的博客界面是给读者的第一印象,好的界面可以吸引更多的人访问,下面介绍 NexT 主题(GitHub 评分最高)

一、安装 NexT 主题

  • 有两种方式可以进行安装,一种是安装稳定版本(已经不再维护),一种是安装最新版本,这里我们安装最新版本,执行下面的命令:

    $ cd your-local-blog-site
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next
    
  • 完成以后,打开 /themes 文件夹,可以看到其中有 next 文件夹,这样主题就安装成功了

二、启用主题

首先说明,现在有两个配置文件,名称都是 _config.yml ;其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

  • 打开 站点配置文件, 找到 theme 字段,并将其值更改为 next

  • 验证:

    hexo clean # 清除缓存
    hexo g
    hexo s
    # 可以看到: Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
    # 打开对应的网址,就可以看到主题已经变成 next 了
    
  • 推送到远程:【后面的操作,只要是推送到远程仓库,都可以执行下面的命令

    hexo clean # 清除缓存,选做
    hexo g -d
    
  • 这样就可以在自己的站点看到安装好的 next 主题了【有可能需要登上半分钟,并清除浏览器缓存】

三、远程仓库上备份本地文件【可选】

  • 因为站点实际上是部署在本地的,现在在 GitHub 上只有一些静态文件,一旦本地文件丢失挥着损坏,就要重新搭建网站,甚至文章也会丢失,为了在这种情况发生的情况下能够快速恢复本地站点,可以在 GitHub 上新建分支,用于备份本地文件

  • 假设之前我们的本地站点文件夹为 blog ,在其他合适的位置新建文件夹 hexo,将GitHub远程仓库复制到本地

    git clone your-repo hexo 
    
    • 删除除了版本控制 .git 之外的所有文件

      cd hexo
      rm -r *
      
    • blog 文件夹下的所有文件复制到 hexo 文件夹

    • 如果使用的主题是从Github克隆的,那么使用命令删除它的Git文件(以next主题为例),否则无法将主题文件push

      rm -r themes/next/.git*
      
    • 配置 GitHub

      1. 创建新分支 hexo

        git checkout -b hexo
        
      2. 推送到 hexo 分支

        git add . # 保存到暂存区
        git commit -m "创建 hexo 分支"
        git push --set-upstream origin hexo
        
    • 现在原来的 blog 文件夹就可以删除了,当然最好先修改名字备份一下,否则出现意外就不好了

  • 以后的更新操作:

    • 更新到 master/main 分支,用来更新站点

      hexo g -d
      
    • 备份到 hexo 分支,更新远程仓库的本地备份

      git add .
      git commit -m "备注"
      git push
      

四、优化 NexT 主题

  • 首先说一下调试问题,可以使用下面的命令查看本地修改的效果

    hexo clean
    hexo g
    hexo s
    
  • 其次,下面的修改都是修改主题配置文件

1) 修改 Schemes

  • 有四种可以选择,选择自己喜欢的即可

    # Schemes
    scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    #scheme: Gemini
    
    

2) 设置站点 icon

  • 下载地址:iconfont
  • 将下载的 icon 放置在 /themes/next/source/img/ 文件夹中
  • 修改主题配置文件favicon 中的内容,如果是直接替换原来的文件则不需要修改

3) 设置菜单栏

  1. 编辑主题配置文件,修改 menu 中的内容,将想要展示的内容取消注释

    menu:
      home: /
      archives: /archives
      #about: /about
      categories: /categories
      tags: /tags
      #commonweal: /404.html
    
  2. 手动创建页面

    # 在站点的根目录
    # 下面分别创建 about categories tags 页面
    hexo new page about
    hexo new page categories
    hexo new page tags
    
  3. 修改 type

    • 创建页面之后,在 source/ 目录中可以看到新创建的页面

    • 修改其中的 index.md 文件,增加:

      # 下面是 tags 页面的,categories 页面则是 categories
      type: tags
      
  4. 这样修改之后,可以在本地运行并验证一下,可以看到本地的博客菜单栏中,可以显示添加的页面

  5. 添加公益404,方法跟上面一样,只不过在 index.md 文件中添加下面的代码:

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="robots" content="all" />
      <meta name="robots" content="index,follow"/>
      <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
    </head>
    <body>
      <script type="text/plain" src="http://www.qq.com/404/search_children.js"
              charset="utf-8" homePageUrl="/"
              homePageName="回到我的主页">
      </script>
      <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
      <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
    </body>
    </html>
    

4) 配置回到顶部按钮

  • 修改主题配置文件,将back2top的enable设置为true即可,边栏和滚动百分比可以按照需求自行添加。

5) 设置已读进度条

  • reading_progress 的enable设置为true即可,位置颜色和高度都可以调整

6) 边角的 GitHub banner

  • 主题配置文件中修改 github_banner 字段

    github_banner:
      enable: true
      permalink: https://github.com/code-wd
      title: Follow me on GitHub
    
    image-20210127112606972

7) 设置头像

  • 编辑主题配置文件,修改字段 avatar ,值设置成头像的地址;通常图片放在 /themes/source/images/
  • 其中可以设置头像的形状,以及旋转动画

8)设置社交界面

  • 编辑主题配置文件,修改social 字段,将想要展示的部分去除注释
  • social_icons中可以进行相关设置

9) 设置语言

  • 打开 themes/next/languages/ 可以看到支持的语言
  • 编辑站点配置文件,填入 language 字段,注意官网上给的简体中文是 zh-Hans 但是,实际上,需要按照自己 languages 文件夹中的方式命名

10) 打赏

  • 首先,要将支付宝或者微信打赏的二维码下载下来,可以修剪一下,放在 /themes/next/source/images 文件夹中

  • 修改主题配置文件

    reward_settings:
      # If true, reward will be displayed in every article by default.
      enable: true
      animation: false
      #comment: Donate comment here.
    
    reward:
      wechatpay: /images/wechatpay.png
      alipay: /images/alipay.jpg
      #paypal: /images/paypal.png
      #bitcoin: /images/bitcoin.png
    

11)代码样式

  • 编辑主题配置文件,搜索 codeblock ,选择自己想要的代码样式即可

12) 评论功能

  • 注册 LeanCloud 账号, 创建一个应用,在这个应用的设置中可以看到关键信息

  • 编辑主题配置文件,修改 valine 字段:

    image-20210127135213955

13) 添加背景动画

  • 安装依赖,在 themes/next/ 文件夹下,执行:

    git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
    
  • 编辑主题配置文件,在文件的动画位置(找到 canvas_ribbon 就可以)添加下面的字段:

    canvas_nest:
      enable: true    #开启canvas
      onmobile: true # 是否在移动站开启canvas
      color: '34,34,34' # 颜色值
      opacity: 0.5 # 数值 0~1 ,线条透明度
      zIndex: -1 # 背景叠层大小,-1代表放在文章的后面
      count: 200 # 线条数量
    

14) 添加本地搜索

  • 在站点根目录中执行下面的命令:

    npm install hexo-generator-searchdb --save
    
  • 编辑站点配置文件,新增下面的内容

    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    
  • 编辑主题配置文件,启动本地搜索功能

    # Local search
    local_search:
      enable: true
    

15) 添加 本文结束 标记

  • /themes/next/layout/_macro/ 文件夹中新建文件 passage-end-tag.swig,文件中写入:

    {% if theme.passage_end_tag.enabled %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
            ------ 本文结束<i class="fa fa-paw"></i>感谢您的阅读 ------</div>
    {% endif %}
    
  • /themes/next/layout/_macro/ 中打开文件 post.swig ,在 post-body之后,post-footer 之前添加下面的代码:

    <div>
          {% if not is_index %}
            {% include 'passage-end-tag.swig' %}
          {% endif %}
    </div>
    
    image-20210127220440453
  • 修改主题配置文件,在最后添加:

    passage_end_tag:
      enabled: true
    
  • 最终效果:

    image-20210127220631381

16) 修改背景图片以及博客整体样式

  1. 修改主题配置文件,找到 custom_file_path 字段,如下修改:

    custom_file_path:
      #head: source/_data/head.swig
      #header: source/_data/header.swig
      #sidebar: source/_data/sidebar.swig
      #postMeta: source/_data/post-meta.swig
      #postBodyEnd: source/_data/post-body-end.swig
      #footer: source/_data/footer.swig
      #bodyEnd: source/_data/body-end.swig
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      style: source/_data/styles.styl
    
  2. 在站点根目录的 source 文件夹下新建 _data 文件夹,并在其中新建 styles.styl 文件,配置如下:

    //全局布局美化代码
    body {
        background-image:url(/images/Background.jpg); //背景图片地址
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }
    
    
    //博客内容透明化
    //文章内容的透明度设置
    .content-wrap {
      opacity: 0.85;
    }
    
    //侧边框的透明度设置
    .sidebar {
      transition-duration: 0.4s;  
      opacity: 0.85;  // 透明度
      border-radius: 30px 30px 30px 30px; //边框圆角
    }
    
    // 侧边头像框内部
    .sidebar-inner {
      background: var(--content-bg-color);
      border-radius: 30px 30px 30px 30px; //边框圆角
      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
      box-sizing: border-box;
      color: var(--text-color);
      width: 240px;
      opacity: 0;
      box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    }
    
    //菜单栏的透明度设置
    .header-inner {
      background: rgba(255,255,255,0.85);
      border-radius: 0px 0px 30px 30px; //边框圆角
      box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    }
    
    //搜索框(local-search)的透明度设置
    .popup {
      opacity: 0.85;
    }
    
    //第一篇博客样式
    .post-block {
      background-color: rgba(255, 255, 255, 1);
      margin-bottom: 24px;
      padding: 20px;
      border-radius: 0px 0px 30px 30px;
      box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    }
    
    //除第一篇博客之外的博客样式
    .post-block + .post-block {
      background-color: rgba(255, 255, 255, 1);
      //margin-top: 24px;
      margin-bottom: 24px;
      padding: 20px;
      border-radius: 30px 30px 30px 30px;
      box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    }
    
    
  3. 最终效果:

    image-20210127182622584

17) 增加字数统计

18) 标签设置

  • 修改文章底部的 # 标签:修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将其中的 # 换成<i class="fa fa-tag"></i>

  • 标签云设置:

    1. 安装插件:

      npm install hexo-tag-cloud@^2.0.* --save
      
    2. 配置插件

19) 添加 RSS

20) 博文压缩

  • .md 文件转化为 html 文件之后会有很多空格,这个可以防止这些空格带来的性能的损失

  • 安装 hexo-neat

    npm install hexo-neat --save
    
  • 配置:编辑 站点配置文件 ,在末尾加上下面的代码:

    # hexo-neat
    # 博文压缩
    neat_enable: true
    # 压缩html
    neat_html:
      enable: true
      exclude:
    # 压缩css
    neat_css:
      enable: true
      exclude:
        - '**/*.min.css'
    # 压缩js
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '**/*.min.js'
        - '**/jquery.fancybox.pack.js'
        - '**/index.js'
        - '**/clicklove.js'
        - '**/firework.js'
    
  • 注意:可能会有部分插件压缩后报错,在exclude里面添加对应的文件就可以取消压缩了

  • 感谢大佬:Next主题美化

21) 标签云

22) 修改 back2top 样式

  • 安装依赖:

    npm install hexo-cake-moon-menu --save
    
  • 修改站点配置文件,添加下面的内容:

    moon_menu:
      back2top:
        enable: true
        icon: fa fa-chevron-up
        func: back2top
        order: -1
      back2bottom:
        enable: true
        icon: fa fa-chevron-down
        func: back2bottom
        order: -2
    
  • 修改主题配置文件,将其中的back2top 修改为 false

  • 感谢大佬

23)加密功能

  • 安装依赖

    npm install hexo-blog-encrypt --save
    
  • 使用方法:【文章开头添加】

    ---
    title: your-blog-title
    declare: true
    toc: true
    tags:
      - xxx
    categories:
      - xxx
    mathjax: true
    +password: 
    +abstract: 有东西被加密了,请输入密码查看
    +message: 请输入密码
    ---
    

Reference

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容