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

侧边栏头像

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

1
avatar: [头像路径]

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

在主题配置文件中设置:

1
2
3
4
5
6
7
8
9
10
# 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

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

在站点目录下分别执行:

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

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

1
2
3
4
5
6
menu:
首页: / || home
关于: /about/ || user
标签: /tags/ || tags
分类: /categories/ || th
归档: /archives/ || archive

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

启用主题配置文件中的 menu_settings . badgestrue:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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 的配置中,

1
2
3
4
5
6
7
8
9
10
11
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

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

1
2
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

并启用:

1
2
3
4
5
6
7
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

博客的数据统计

不蒜子

在主题配置文件中启用:

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: 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. 在主题配置文件中启用:
1
2
3
4
5
6
7
8
# 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

返回顶部 + 当前浏览进度

在主题配置文件中启用:

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

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

在主题配置文件中启用:

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

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

在主题配置文件中启用:

1
2
3
4
5
# 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. 在博客配置文件中设置:
1
2
3
4
5
6
# 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:
  1. 接着在 Github 的博客项目 Settings 下配置, 将 Custom domain 设置成自己购买的域名:

github

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

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, 跳过渲染

在博客配置文件中设置:

1
skip_render: README.md

侧边栏显示近期文章列表

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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
还没有完呢, 还需要在主题配置文件中添加配置:

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

效果图如下:
近期文章


--------------------本文至此结束  感谢您的阅读--------------------

本文标题:[Hexo 博客系列-01] 基本设置

文章作者:Memento

发布时间:2019年03月30日 - 21:03

最后更新:2019年12月14日 - 17:12

原始链接:http://memento.net.cn/post/4f47e744.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Memento wechat
欢迎您扫一扫上面的微信公众号, 订阅阁主公众号!
坚持原创技术分享, 您的支持将鼓励我继续创作