Enjoy the good life everyday！
关闭
欢迎来PyGo个人空间 ^_^
Next主题优化-基础篇（Gemini） | PyGo²

Next主题优化-基础篇（Gemini）

创建时间： | 更新时间： | 分类于 | 阅读量：
本文字数： 9.3k | 阅读时长 ≈ 8 分钟
Gemini Hexo美化 Next主题优化

问题简述

My blog 采用Hexo + Next搭建，搭建完之后，看页面居然还是英文，好ugly，身为一名程序猿怎么可以忍呢。在持续一个月的捣鼓中，总结出Next一些通过配置优化的点。

版本信息

id name version remark
1 Hexo v3.8.0 系统版本
2 NextT.Pisces v7.0.1 主题版本
3 ATOM 1.34.0 编译器
4 Theme Gemini

优化Catalog

  • 切记config文件冒号“：”后面一定要有一个空格
  • 修改后重启服务：hexo g && hexo server -p 8888 –debug

  1. Blog站点配置

    位置：blog/_config.yml
    hexo自带的config.yml，不是next主题的，看好了

    1
    2
    3
    4
    5
    6
    7
    8
    # 基本信息配置 Site
    title: PyGo²
    subtitle: 一个爱老婆的python程序猿。。。。。。
    description: 直男，双鱼星座，现居北京，去哪儿网python开发工程师。
    keywords: python
    author: mingliang.gao
    language: zh-CN # 🌟页面的语言设置
    timezone: Asia/Shanghai #时区

  2. Next风格设置

    位置：blog/theme/next/_config.yml
    打开配置文件，搜索Schemes，更改配置如下：

    1
    2
    3
    4
    5
    # Schemes 主题风格
    # scheme: Muse
    # scheme: Mist
    scheme: Pisces
    # scheme: Gemini

  3. 菜单栏

    位置：blog/theme/next/_config.yml
    打开文件，格式：Key: Path || Icon，不想要的#禁止掉

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    menu:
      home: / || home
      archives: /archives/ || history
      tags: /tags/ || tags
      categories: /categories/ || list
      movie: /categories/影视说 || film
      messagepad: /messagepad/ || sticky-note
      about: /about/ || user
      # schedule: /schedule/ || calendar
      # sitemap: /sitemap.xml || sitemap
      # commonweal: /404/ || heartbeat

    menu_settings:
      icons: true   # 是否显示图标
      badges: true  # 是否显示分类、标签、时间轴所包含内容个数

  4. about页面

    终端（mac推荐使用zsh + item2）回到blog的根目录，运行：hexo new page about，在blog/source下会自动建立about文件夹，编辑里面的index.md，配置如下：

    1
    2
    3
    4
    5
    6
    7
    ---
    layout: about
    title: Self Introduction
    date: 2018-01-01
    comments: false
    type: about
    ---

现在可以使用atom去写关于自己的描述了（markdown语法，不知道的请自行恶补）

  1. tags/catalog页面

Tags

根目录运行：hexo new page tags，配置如下：

1
2
3
4
5
6
---
title: 标签
date: 2019-03-17 13:58:44
type: "tags"
comments: false
---

Catalog

根目录运行：hexo new page tags，配置如下：

1
2
3
4
5
6
---
title: 分类
date: 2019-03-17 13:58:10
type: "categories"
comments: false
---

tags和categorise页面不用设置样式，自动生成，之所以与about页面分开，我觉得虽然建立的方式一样，但是内容根本不一个东西，每篇文章设置对应的即可，栗子如下：

1
2
3
4
5
6
7
8
9
10
---
title: 程序猿七夕-心心相印
comments: false
date: 2018-8-13 14:19:57
updated: 2018-8-13 17:19:57
desc: 程序猿七夕-心心相印
categories:
  - [python]
tags: [python]
---

  1. 设置创建文章同名文件夹

    位置：blog/_config.yml
    打开配置文件，搜索post_asset_folder，更改配置如下：
    1
    2
    default_layout: post # 默认创建文件分类
    post_asset_folder: true

开启之后，在创建文章hexo new XXXX，同时也会出现一个同名的文件夹用来存放相关的图片。

  1. 个人头像设置

    设置侧边栏头像，准备好头像图片，可以是png、jpg、gif等，本人用的动态gif图片。然后，将图片放在/blog/themes/next/source/images/文件夹下。
    位置：blog/theme/next/_config.yml，搜索avatar，更改配置如下：
    1
    2
    3
    4
    url: /images/timg.gif # 图片存放位置
    rounded: true #设置图片是否为圆形，当图片为正方形时为圆，否则为正方形
    opacity: 1 #图片的透明度
    rotated: true #设置鼠标移到图片上是否转动

  1. 社交栏设置

在Next主题配置文件中，搜索social，设置相对应的社交信息，格式：网站名: 网址 || 图标（英文“:”）。
图标选取地址：自选图标

菜单栏的个人社交信息设置

1
2
3
4
5
6
7
8
9
10
11
12
13
social:
  GitHub: https://github.com/GIS90 || github
  WeiBo: https://weibo.com/u/1989571513 || weibo
  E-Mail: gaoming971366@163.com || envelope
  OsChina: https://my.oschina.net/u/2259452 || fire
  # Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

社交信息图标设置

1
2
3
4
social_icons:
  enable: true # 是否展示图标
  icons_only: true # 是否只展示图标
  transition: true # 一/多行格式

  1. 修改模版

    位置：blog/scaffolds/post.md
    打开上述文件，修改代码如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    title: {{ title }}
    desc:
    date: {{ date }}
    updated: {{ date }}
    categories:
    tags:
    comments: false
    ---
  • title：文章标题
  • desc：文章的简述
  • date：文章创建时间
  • updated：文章修改时间
  • categories：文章分类
  • tags：文章标签
  • comments：是否启用评论功能，默认关闭

  1. 代码添加复制功能

    位置：blog/theme/next/_config.yml
    打开配置文件，搜索Button，更改配置如下：
    1
    2
    3
    4
    5
    6
    codeblock:
      border_radius: 0 # 复制功能button边框
      copy_button:
        enable: true # 是否启用复制功能呢
        show_result: true # 是否显示复制结果
        style: # 设置flat，样式超难看

默认按钮显示复制，若是想改为英文copy，打开blog/themes/next/languages/zh-CN.yml文件中，将下面部分改了即可：

1
2
3
copy_button: 复制
copy_success: 复制成功
copy_failure: 复制失败

  1. 文章设置打赏

    位置：blog/theme/next/_config.yml
    打开配置文件，搜索reward_settings，更改配置如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    reward_settings:
      enable: true # 是否启用打赏功能
      animation: true # 支付名称支付有动画效果
      comment: 觉得有帮助，欢迎打赏 # 贡献说明

    reward:
      wechatpay: /images/wechatpay.png # 微信
      alipay: /images/alipay.png # 支付宝
      # bitcoin: /images/bitcoin.png # 比特币

  1. footer设置

    位置：blog/theme/next/_config.yml
    打开配置文件，搜索footer，更改配置如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    footer:
      # 底部user图标
      icon:
        name: user-circle # icon名称
        animated: true # 是否启用动画效果
        color: "#FF0000" # 图标颜色

      copyright: # 底部hexo版本信息显示设置
      powered:
        enable: false # 是否显示hexo版本信息
        version: true

      theme: # 底部hexo版本信息显示设置
        enable: false # 是否显示next版本信息
        version: true

图标选取地址：https://fontawesome.com/v4.7.0/icons/

  1. 访问人数和总访问量

    位置：blog/theme/next/_config.yml
    打开配置文件，搜索busuanzi_count，更改配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    busuanzi_count:
      enable: true # 是否启用统计功能
      total_visitors: false # 网站总的访问人数，底部展示
      total_visitors_icon: user # 网站总的访问人数icon
      total_views: false # 网站总的访问次数，底部展示
      total_views_icon: eye # 网站总的访问次数icon
      post_views: true # 阅读次数，文章标题下展示
      post_views_icon: eye # 阅读次数icon

  2. 动态背景Canvas

    位置：blog/theme/next/_config.yml
    canvas-nest：https://github.com/theme-next/theme-next-canvas-nest
    three_waves：https://github.com/theme-next/theme-next-three
    具体步骤github上有详解
    打开配置文件，搜索Canvas-nest，更改配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # Canvas-nest 背景效果
    canvas_nest:
      enable: true
      onmobile: false # display on mobile or not
      color: "0,0,255" # RGB values, use ',' to separate
      opacity: 0.5 # the opacity of line: 0~1
      zIndex: -1 # z-index property of the background
      count: 199 # the number of lines

    # JavaScript 3D library.
    # Dependencies: https://github.com/theme-next/theme-next-three
    # three_waves 背景效果
    three_waves: false
    # canvas_lines
    canvas_lines: false
    # canvas_sphere
    canvas_sphere: false

特别指出three_waves配置只能选取一个，而且开启canvas-nest，three_waves之后，页面渲染的时间变长了，而且发现内存，cpu的使用率也加大了，所以我只开启了canvas-nest，根据自己的需求进行配置。

  1. 文章第三方分享

分享插件：baidushare

文章添加新浪、微信、贴吧等国内第三方分享，关于位置有button | slide2种选择。
位置：blog/theme/next/_config.yml
打开配置文件，搜索baidushare，更改配置如下：

1
2
baidushare:
  type: button

分享插件：likely

文章添加twitter、facebook、linkedin等国际第三方分享，有需要的同学可以开启此功能。
位置：blog/theme/next/_config.yml
打开配置文件，搜索likely，更改配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
likely:
  enable: false
  look: normal # available values: normal, light, small, big
  networks:
    twitter: Tweet
    facebook: Share
    linkedin: Link
    gplus: Plus
    vkontakte: Share
    odnoklassniki: Class
    telegram: Send
    whatsapp: Send
    pinterest: Pin

分享插件：NeedMoreShare2

配置文件新增了综合国内、国际分享，也是可以设置底部、侧边2种位置。
位置：blog/theme/next/_config.yml
打开配置文件，搜索NeedMoreShare2，更改配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
needmoreshare2:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

  1. 友情链接

    位置：blog/theme/next/_config.yml
    站点浏览添加友情链接，格式：名称: url(英文“:”)。打开配置文件，搜索Blog rolls，更改配置如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    links_icon: link # 图标
    links_title: 友情链接 # 标题
    # links_layout: block # 链接样式 块样式
    links_layout: inline # 行样式
    links: # 内容
     google搜索: https://www.google.com
     baidu搜索: https://www.baidu.com
     pdf在线转换: https://smallpdf.com/cn
     json格式化: https://www.json.cn/

  1. 首页设置文章预览

    首页文章设置预览前言显示，有2种方式，都share一下。

    配置

位置：blog/theme/next/_config.yml
打开配置文件，搜索auto_excerpt，更改配置如下：

1
2
3
auto_excerpt:
  enable: true
  length: 200

设置完之后，首页预览每个markdown格式，不建议使用。

more

在文章需要进行预览的地方，加入如下代码：

1
<!-- more -->

建议使用，格式、图片等不受影响。

  1. 文章首页图片展示

    首页文章设置预览用more去进行处理，当在预览中加入图片时，图片链接会去blog>public>images目录下去寻找对应的图片，打开文章又回去文章对应的目录>images目录下去找。
    所以，当文章预览中有图片显示的文章，在文章的目录下手动建立一个images文件夹，把图片分别存放在当前images文件夹以及blog>public>images文件夹下。这样就OK了。

不过有个问题，首页如果分页显示，那么首页预览图片寻找的路径会发生改变。所以我在前面设置文章预览个数index_generator的时候设置为0，这是我的解决方法，如果大家有好的解决方案，欢迎大家留言交流。

  1. 博文添加图片查看器

    首先，下载fancybox插件，有2个版本，我选择了最新版3。
    1
    2
    cd themes/next
    git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

位置：blog/theme/next/_config.yml
打开配置文件，搜索fancybox，更改配置如下：

1
fancybox: true

fancybox官网：https://github.com/theme-next/theme-next-fancybox3

  1. 页面浏览进度

    设置页面的浏览百分比，打开配置文件，搜索scrollpercent，更改配置如下：
    位置：blog/theme/next/_config.yml

    1
    2
    3
    4
    5
    6
    back2top:
      enable: true
      # Back to top in sidebar.
      sidebar: false    # sitebar是否在工具栏
      # Scroll percent label in b2t button.
      scrollpercent: true   # 浏览进度情况

  2. 文章额外信息展示

    在文章标题下面显示文章相关的额外信息，打开配置文件，搜索post_meta，更改配置如下：
    位置：blog/theme/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Post meta display settings
    # 文章创作时间、分类
    post_meta:
      item_text: true
      created_at: true
      updated_at:
        enable: true
        another_day: true
      categories: true

  1. 修改访问URL路径

    blog默认情况下访问URL路径为：domain/2017/08/18/title，打开配置文件，搜索permalink，更改配置如下：
    位置：blog/_config.yml
    1
    permalink: :category/:title/

配置完，重启一下server，回到主页在进行文件查看，发现地址发生改变

  1. 设置博客favicon图标

    修改博客favicon图标，打开配置文件，搜索apple_touch_icon，更改配置如下：
    位置：blog/theme/next/_config.yml

    1
    2
    3
    4
    5
    favicon:
      small: /images/favicon16.ico
      medium: /images/favicon32.ico
      apple_touch_icon: /images/apple-touch-icon-next.png
      safari_pinned_tab: /images/logo.svg

  2. 修改文章底部的#号标签

    打开/themes/next/layout/_macro/post.swig，搜索rel=”tag”>#，将#换成下列代码:

    1
    <i class="fa fa-tag"></i>

注意

  • 配置完Hexo config需要重启server，next config重新刷新即可。

学习

hexo官方配置手册：https://hexo-guide.readthedocs.io/zh_CN/latest/index.html
hexo图标选取地址：https://fontawesome.com/icons

结束

本篇内容主要解决Hexo、Next相关config配置文件的优化，内容持续更新中，如有bugs，欢迎大家评论指出。
待续。。。。。。（未完结）

学会分享，一起进步

  • 本文作者：mingliang.gao【一个爱老婆的Python程序猿。。。。。。】
  • 本文链接： http://pygo2.top/articles/58065/
  • 版权声明： 本博客所有文章欢迎转载，转载请注明出处！
觉得有帮助 请偶坐个公交车
0%