[Hexo 博客系列-01] 基本设置

侧边栏头像

在主题配置文件 _config.yml 中编辑:

avatar: [头像路径]

网站的 favicon(浏览器tab图标)

在主题配置文件中设置:

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine them on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
    #small: /images/favicon-16x16-next.png
    small: /images/Memento.ico
    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

设置 分类、标签云、关于 等菜单页面

在站点目录下分别执行:

hexo new page "categories"  # 新增分类
hexo new page "tags"        # 新增标签
hexo new page "about"       # 新增关于

可以在对应模块的 index.md 中添加 comments: false 来关闭评论功能;
然后在主题配置文件 _config.yml 中打开对应模块的注释(或者自己手动添加):

menu:
  首页: / || home
  关于: /about/ || user
  标签: /tags/ || tags
  分类: /categories/ || th
  归档: /archives/ || archive

显示分类/标签菜单项的内容量

启用主题配置文件中的 menu_settings . badges 为 true:

# Enable/Disable menu icons / item badges.
menu_settings:
    icons: true
    badges: true # 是否显示分类/标签/归档页的内容量

需要注意的是, next 主题在模板文件 menu-badge.swig 中写死的三个变量(archives, categories, tags):

{% macro render(name) %}

  {% set badges = {
    archives: site.posts.length,
    categories: site.categories.length,
    tags: site.tags.length }
  %}
  {% for menu, count in badges %}
    {% if name == menu %}
      <span class="badge">{{ count }}</span>
    {% endif %}
  {% endfor %}

{% endmacro %}

所以, 在主题配置文件 menu 的配置中,

menu:
    首页: / || home
    #分类: /categories/ || th
    tags: /tags/ || tags
    #schedule: /schedule/ || calendar
    #sitemap: /sitemap.xml || sitemap
    在线文档: /onlinedocs || file-o
    友链申请: /申请友链 || plus
    archives: /archives/ || clock-o
    关于: /about/ || user
    #commonweal: /404/ || heartbeat

关于 tags, categories, archives 三项的第一个值是不能修改的;
如若要修改, 就要同步修改 menu-badges.swig 模板文件, 当然, 不支持中文…阁主泪奔~~o(>_<)o ~~

博客背景 canvas_nest

来源: theme-next-canvas-nest

在主题配置文件中配置脚本:

canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest-nomobile.min.js

并启用:

canvas_nest:
  enable: true
  onmobile: true # 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: 99 # the number of lines

博客的数据统计

不蒜子

在主题配置文件中启用:

# 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: user
    total_views: true
    total_views_icon: eye
    post_views: true
    post_views_icon: eye

顶部进度条

来源: theme-next-pace

1. 将项目中的 css 和 js 文件下载放置到 /themes/next/source/lib/pace/ 目录下;
2. 在主题配置文件中启用:

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
pace_theme: pace-theme-minimal

返回顶部 + 当前浏览进度

在主题配置文件中启用:

back2top:
    enable: true
    # Back to top in sidebar.
    sidebar: true
    # Scroll percent label in b2t button.
    scrollpercent: true

右上角/左上角的 Fork me on github

在主题配置文件中启用:

# Follow me on GitHub banner in right-top corner.
github_banner:
    enable: true
    permalink: https://github.com/Memento1990
    title: Follow me on GitHub

增加首页中的 “阅读全文” 按钮

在主题配置文件中启用:

# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
    enable: true
    length: 150

站点域名配置

当然, 首先你得要有个域名, 阁主以 memento.net.cn 为例, 至于如何购买域名, 实名云云, 自己 google 解决, 有不懂的可以来找阁主~

1. 在 source 根目录下放置一个文件 CNAME, 注意 没有后缀名 的, 文件里就存一行 memento.net.cn 即可; 如此在 hexo d 发布项目时会把该文件也上传, 告知服务器(github or gitee) 自定义的域名是什么;
2. 在博客配置文件中设置:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://memento.net.cn/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

3. 接着在 Github 的博客项目 Settings 下配置, 将 Custom domain 设置成自己购买的域名:

4. 域名的 DNS 解析可以参考阁主的, 阁主同时部署在 Github 和 Gitee 上, 所以设置了两组解析记录;
   

a. 注意, coding 的 DNS 解析记录值为 pages.coding.me, 设置成 coding pages 里提供的域名也可以使用, 但是会出现其他一些问题, 所以还是按照 coding 官网说明的进行设置
b. 注意, 其中 github 的解析线路均指向了 境外, 这样就可以将国内的解析到 coding, 国外的解析到 github 了.
c. 注意, 如果先添加了 github 的 DNS 解析, 后再添加 coding 的 DNS 解析, 需要先将 github 的 DNS 解析先暂停, 这样在 coding 的 pages 中进行域名绑定时才会被通过, 否则会一直出现 SSL/TLS 安全证书的申请认证错误 问题

添加博客项目 README.md, 跳过渲染

在博客配置文件中设置:

skip_render: README.md

侧边栏显示近期文章列表

在 /themes/next/layout/_custom/sidebar.swig 的自定义侧边栏文件模板中添加 近期文章列表 模块;

{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
    <div class="links-of-blogroll-title">
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list" style="list-style: square;">
    {% set posts = site.posts.sort('-date') %}
    {% for post in posts.slice('0', '5') %}
        <li style="border-bottom: 1px solid #c1c5c1;">
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank" style="border-bottom: none;">{{ post.title }}</a>
        </li>
    {% endfor %}
    </ul>
</div>
{% endif %}

代码是阁主写的? nonono, 很明显是从网上 copy 来的, 来源出处有很多, 所以就没有记录下来. 当然他们很懒的直接采用了 next 主题默认的友链侧边栏样式, o(╯□╰)o
还没有完呢, 还需要在主题配置文件中添加配置:

recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

效果图如下: