个人博客搭建之五：优化配置

Posted on Edited on In , Changyan: Symbols count in article: 6.8k Reading time ≈ 6 mins.

通过配置站点配置文件和主题配置文件，以及添加相应的依赖包，优化配置博客站点功能。主要有：

  • 设置菜单
  • 设置建站时间
  • 设置头像
  • 设置侧边栏显示效果
  • 侧边栏推荐链接
  • 网站图标设置
  • 文章末尾添加版权说明
  • 添加访问量统计
  • 本地搜索
  • 显示文章字数和阅读时长

参考链接

  1. 枫叶知乎博客学习专栏：八篇文章构成的知乎专栏，作者枫叶，手把手指导从github建立个人博客，以及相关美化操作

  2. Git官网：Git is a free and open source distributed version control system ... [一个免费开源的分布式版本控制系统]

  3. Git维基：Git的wikipedia页面

  4. My GitHub：我的GitHub主页

    GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。2022年4月13日起，GitHub 开始封锁受美国制裁公司的俄罗斯开发者账户。

  5. Node.js：一个基于 Chrome V8 引擎 的 JavaScript 运行时环境

    a JavaScript runtime built on Chrome's V8 JavaScript engine

  6. hexo：一个“快速、简洁且高效”的博客框架

    支持Markdown（GFM所有功能），基于Node.js，可一键部署到 GitHub Pages 或其他平台。

  7. My Blog：学习搭建的博客链接（GitHub）

  8. themes/next：hexo博客框架上的一个主题设计

  9. fontawesome-icon：一个在线图标库网站

    Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

  10. iconfont：另一个在线图标网站（矢量图标的管理、交流平台）

    made by Alimama MUX, designers could upload vector icons here, and users could download it by several kinds of format.

开始条件

本人具备的资源和知识条件（2022-5-12）

  1. Github已有注册账户，可方便登录访问；
  2. 原购买一个域名nyjing.online，闲置中；
  3. MarkDown基本了解；
  4. HTML、CSS知道些皮毛；
  5. JavaScript等基本不懂。
  6. Git工具了解一些：《个人博客搭建之一：git工具》
  7. Git与GitHub已绑定：《个人博客搭建之二：Git绑定GitHub及基本操作》
  8. 安装Node.js(JavaScript运行时)和Hexo(基于Node.js的博客框架)并发布到GitHub：《个人博客搭建之三：安装node.js和Hexo》
  9. 了解些Hexo配置文件和主题设置，应用next新主题：《个人博客搭建之四：hexo主题设置》

优化配置

对应枫叶知乎博客学习专栏的第8篇;
日期：2022-5-12

版本：

主题配置文件

设置菜单

  1. 打开主题配置文件即themes/next下的_config.yml，查找menu，如下修改：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    menu:
      home: / || fa fa-home
      archives: /archives/ || fa fa-archive
      categories: /categories/ || fa fa-th
      tags: /tags/ || fa fa-tags
      resources: /resources/ || fa fa-download
      about: /about/ || fa fa-user
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

    # Enable / Disable menu icons / item badges.
    menu_settings:
      icons: true
      badges: false

    • 调整菜单默认的先后顺序
    • 增加一个菜单项resources

    “||”前面的是目标链接，后面的是图标名称，next使用的图标全是图标库(fontawesome-icon) 这一网站的，有想用的图标直接在fontawesome-icon上面找图标的名称就行。

    原resources: /resources/ || fa fa-cloud-download，图标未显示，推测程序不适用图标名称中带连接符-的情况，将cloud-download改为download后OK。

  2. 若主题语言使用中文，需要在theme/next/languages/zh-CN.yml中为新增的菜单设置中文名称，如

    1
    2
    menu:
      resources: 资源

    博客菜单等暂不考虑切换为中文。

  3. 主题语言使用英文，theme/next/languages/zh-CN.yml中为新增的菜单项resources设置英文名称Resources

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu:
      home: Home
      archives: Archives
      categories: Categories
      tags: Tags
      resources: Resources
      about: About
      search: Search
      schedule: Schedule
      sitemap: Sitemap
      commonweal: Commonweal 404

    若不添加，默认显示菜单项名称resources，首字母小写，与其它项风格不一致。

  4. 在根目录下打开Git Bash，输入如下代码：

    1
    2
    3
    4
    hexo new page "categories"
    hexo new page "tags"
    hexo new page "about"
    hexo new page "resources"

    此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件，每个文件中有一个index.md文件，修改内容分别如下：

    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
    ---
    title: Categories
    date: 2020-02-10 22:07:08
    type: "categories"
    comments: false
    ---

    ---
    title: Tags
    date: 2020-02-10 22:07:08
    type: "tags"
    comments: false
    ---

    ---
    title: About
    date: 2020-02-10 22:07:08
    type: "about"
    comments: false
    ---

    ---
    title: Resources
    date: 2020-02-10 22:07:08
    type: "resources"
    comments: false
    ---

    注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

设置建站时间

打开主题配置文件即themes/next下的_config.yml，查找since：

1
2
3
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2022

设置头像

打开主题配置文件即themes/next下的_config.yml，查找avatar，url后是图片的链接地址：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: images/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

将选好的头像图片复制到themes/next/source/images里，重命名为avatar.png。

头像图片地址也可以是http链接在线图片。

设置侧边栏显示效果

打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：

1
2
3
4
5
6
7
8
9
10
sidebar:
  # Sidebar Position. #设置侧边栏位置
  position: left
  #position: right

  #  - post    默认显示模式
  #  - always  一直显示
  #  - hide    初始隐藏
  #  - remove  移除侧边栏
  display: post

选用以上默认显示模式

侧边栏推荐链接

打开主题配置文件即themes/next下的_config.yml，搜索links（里面写你想要的链接）：

1
2
3
4
5
6
7
8
9
10
11
12
# Blog rolls
links_settings:
  icon: fa fa-link
  title: Links
  # Available values: block | inline
  layout: block

links:
  #Title: http://yoursite.com
  Linuxtopia: https://www.linuxtopia.org
  FreeComputerBooks: https://freecomputerbooks.com/
  # Stack Overflow: https://stackoverflow.com/

网站图标设置

免费的图标素材网站,如：https://www.iconfont.cn/ 下载16x16和32x32的图标后，打开主题配置文件，查找favicon，只要修改small和medium为你的图标路径：

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

注：暂未更改默认图标。

文章末尾添加版权说明

查找主题配置文件themes/next/_config.yml中的creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

注：需在主站配置文件中定义正确的url： url: https://nyjingle.github.io

添加访问量统计

打开主题配置文件即themes/next下的_config.yml，找到busuanzi_count，改为true：

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

本地浏览时统计数据不可信，超级大；更新发布之后从零开始。

本地搜索

  1. Blog根目录下输入命令：npm install hexo-generator-search

    1
    2
    3
    4
    5
    6
    7
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ npm install hexo-generator-search

    added 1 package in 44s

    19 packages are looking for funding
      run `npm fund` for details

  2. 查找主题配置文件themes/next/_config.yml中的local_search ：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

    本地运行几乎完美；上传后一段时间访问搜索存在悬浮窗混乱、程序卡死等问题；过一段时间（>10分钟）后表现正常。

站点配置文件

显示文章字数和阅读时长

https://github.com/theme-next/hexo-symbols-count-time
Better than hexo-reading-time and faster than hexo-wordcount. No external dependencies.

  1. 从根目录Blog打开Git Bash，执行下面的命令，安装插件：npm install hexo-symbols-count-time

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ npm install hexo-symbols-count-time
    npm WARN deprecated highlight.js@9.18.5: Support has ended for 9.x series. Upgrade to @latest

    added 8 packages, and audited 260 packages in 6s

    19 packages are looking for funding
      run `npm fund` for details

    3 moderate severity vulnerabilities

    To address all issues, run:
      npm audit fix

    Run `npm audit` for details.

    ==npm WARN== ？？暂不处理

    注：初，参照[枫叶]帖子指示，输入命令npm install hexo-wordcount --save 安装hexo-wordcount；随后删除之，npm uninstall hexo-wordcount --save，如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ npm install hexo-wordcount --save

    added 1 package, and audited 253 packages in 2s


    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ npm uninstall hexo-wordcount --save

    removed 1 package, and audited 252 packages in 2s

  2. 打开站点配置文件，在文件末尾加上下面的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #hexo-symbols-count-time https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
      symbols: true                # 文章字数统计
      time: true                   # 文章阅读时长
      total_symbols: true          # 站点总字数统计
      total_time: true             # 站点总阅读时长
      exclude_codeblock: false     # 排除代码字数统计
      awl: 4
      wpm: 275
      suffix: "mins."