基于hexo+github个人博客搭建2
-
##简单的说明
- 这里直接给大家推荐一个简约好用的主题,hexo原生简约主题NexT,是目前hexo搭建博客中使用人数最多的主题.且自由度很高,可以自己DIY独属于自己的博客样式,本博客也是采用Next主题
前言
- Hexo静态博客本地配置中有两个重要的配置文件,分别是
- 位于根目录下的
站点配置文件
:/_config.yml - 位于根目录/theme/你的主题下的
主题配置文件
:/theme/你的主题/_config.yml
- 位于根目录下的
- 两者的关系为前者优先于后者
- 本文介绍Next主题的基础配置。
安装
-
hexo 默认主题为landscape,新主题需要我们自己下载
-
最简单的是通过git(也可以去官网下载源码)
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
切换主题
-
通过更改
站点配置文件
进行主题选择。
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
语言选择
-
该主题默认语言为英语,按照需要进行语言切换
-
找到
\themes\next\languages
下支持的文件列表。(例如汉化的zh-CN) -
再对
站点配置文件
进行修改,找到关键词language
并在后面做修改并保存退出# Site 站点配置 title: # 网站标题 subtitle: # 副标题 description: # 网站描述 keywords: # 关键字 author: # 你的昵称 language: zh-CN # 网站语言 timezone: # 时区
-
大部分的博客教程都是将language改为zh-hans,但是主题文件更新后该名称已经失效,望注意!
主题模板更换
-
next主题提供了四种风格的主题模板,可以自由切换,
至于四种模板的不同,请移步官方GitHub文档 -
在
主题配置文件
中查找关键字Schemes
-
想要保留的模板前去掉
#
即可。
# Schemes #scheme: Muse(默认主题) scheme: Mist #scheme: Pisces #scheme: Gemini
目录自选
-
在
主题配置文件
中查找关键字menu
-
寻找想要的目录并去掉前面的
#
menu: home: / || home #about: /about/ || user #tags: /tags/ || tags #categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat
在每篇文章末尾添加 “本文结束”
-
在路径
\themes\next\layout\_macro
中新建passage-end-tag.swig
文件,并添加以下内容:<div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div> {% endif %} </div>
-
接着打开
\themes\next\layout\_macro\post.swig
文件, 查找post-footer
并在该 div 之前添加如下代码<div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %} </div>
-
在
\theme\_config.yml
末尾添加以下代码# 文章末尾添加“本文结束”标记 passage_end_tag: enabled: true
删除网页底部 “由hexo强力驱动、主题版本” 文字
-
打开
\themes\next\layout\_partials\footer.swig
文件,找到并删除以下部分。
{% if theme.footer.powered.enable %} <div class="powered-by">{# #}{{ __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'})) }}{# #}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{# #}</div> {% endif %} {% if theme.footer.powered.enable and theme.footer.theme.enable %} <span class="post-meta-divider">|</span> {% endif %} {% if theme.footer.theme.enable %} <div class="theme-info">{# #}{{ __('footer.theme') }} – {{ next_url('https://theme-next.org', 'NexT.' + theme.scheme, {class: 'theme-link'}) }}{# #}{% if theme.footer.theme.version %} v{{ version }}{% endif %}{# #}</div> {% endif %}
在网站底部加上访问量
-
打开
\themes\next\layout\_partials\footer.swig
文件,在第一行前加上以下代码<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
-
在上一步删除的代码位置添加以下代码:
<div class="powered-by"> <i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv"> 本站访客数:<span id="busuanzi_value_site_uv"></span> </span> </div>
新建标签页面
-
在根目录下进行
$ hexo new page tags
-
对生成的md文件进行编辑,系统将自动识别为标签页面
title: 标签 date: 2018-11-28 17:53:24 type: "tags" ---
-
修改
主题配置文件
,添加tags至menu中menu: home: / || home #about: /about/ || user tags: /tags/ || tags #categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat
-
如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false
title: 标签 date: 2018-11-28 17:53:24 type: "tags" comments: false
设置头像
-
编辑
主题配置文件
,修改字段
avatar
,值设置成头像的链接地址。其中,头像的链接地址可以是:
-
完整的互联网URI: http://example.com/avatar.png
-
站点内的地址:放置在
主题文件夹
的 source/images/ 目录下 配置为:avatar: /images/avatar.png
# Sidebar Avatar 头像 avatar: # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif # You can also use other linking images. url: #/images/avatar.gif # If true, the avatar would be dispalyed in circle. rounded: false # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar. opacity: 1 # If true, the avatar would be rotated with the cursor. rotated: false
设置网页标签页左侧标记
-
编辑
主题配置文件
,修改字段favicon
,文件放在主题文件夹
的相对地址
# For example, you put your favicons into `hexo-site/source/images` directory. # Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo. 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
以上的步骤结束后需要进行部署
-
根目录下执行(第二步本地预览可选)
$ hexo clean //消除大部分的缓存引起的更新未显示问题 $ //hexo s $ hexo g -d //hexo generate + hexo deploy