Hexo个人免费博客(三) next主题、评论、阅读量统计和站内搜索
2016-09-03 18:01
866 查看
使用Next主题美化界面:
安装好hexo之后,主题使用的是hexo默认自带的landscape主题,Next主题是iissnan设计的,使用指南其实可以直接参考Next官方网:http://theme-next.iissnan.com/
1.Next主题下载:
打开Git shell,在当前项目根目下使用git从github上checkout主题的代码,输入指令:git clone https://github.com/iissnan/hexo-theme-next themes/next
下载完成后,在hexo\theme目录下回多出一个next文件夹,里面就是next主题所需的文件,当然我们也可以看到在theme文件目录还有一个landscape文件夹,这也就是hexo默认的主题。
2.配置主题:
之前我们配置hexo的时候,有用到_config.yml文件,称其为站点配置文件,而我们打开next主题文件夹,发现里面也有一个
_config.yml文件,我们称这个为主题配置文件。在hexo中启用next主题的方式:就是打开站点配置文件,找到
theme字段,将其值改为“next”,如下:
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
配置完成后,在Git shell中使用
hexo server指令启动本地博客,在浏览器中访问http://localhost:4000可以看到如下结果:
3.next的样式选择:
next的样式其实有三种:Muse、Mist和Pisces,步骤2中看到的其实是next默认的模式Muse,根据官方说明三个样式的特点如下:Muse: 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
Mist: Muse 的紧凑版本,整洁有序的单栏外观
Pisces: 双栏 Scheme,小家碧玉似的清新
切换的控制其实很简单,使用next主题配置文件中的
scheme字段来控制,假设我们选择Mist样式(个人认为最好看的样式),操作步骤是:打开next文件夹中的
_config.yml文件,找到
scheme字段,将其设置为“Mist”,如下所示:
# ------------------------------------------------------ # Scheme Settings # ------------------------------------------------------ # Schemes #scheme: Muse scheme: Mist #scheme: Pisces
重新启动博客,刷新浏览器可以看到:
额外的优化:
1.设置favicon:
favicon的全称Favorites Icon,即地址栏左侧的图标:有个在线工具可以上传自己的图片去生成指定规格的favicon.ico文件:http://www.atool.org/ico.php。打开主题配置文件
_config.yml可以看到favicon的配置信息:
# Put your favicon.ico into `hexo-site/source/` directory. favicon: /favicon.ico
根据说明,我们将图标取名为
favicon.ico然后放到当前工程的hexo\source目录下,重启博客即可生效。
2.菜单栏控制:
我们看到页面顶部的菜单栏,其实是由主题配置文件中的menu字段控制的,例如原本的样子是这样:
我们修改一下主题配置文件,如下把about页面前面的注释去掉,即让此页签处于显示状态:
# ------------------------------------------------------ # Menu Settings # ------------------------------------------------------ # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives) menu: home: / #categories: /categories about: /about archives: /archives tags: /tags #commonweal: /404.html
重启博客可以看到效果如下:
然而,点击打开About却出现了“Cannot GET /about/”的页面错误,这是因为我们还没有about这个页面,需要使用
hexo new page "页面名称"进行创建:
hexo new page about
执行结果就是在hexo\source目录下面多出了一个about文件夹,里面有index.md,这就是点击About会展示的内容页面。同理,也可以创建tags页面。
3.语言设置:
在站点配置文件中假如如下内容,明确指定使用的语言,例如中文:language: zh-Hans
设置完毕后,发现菜单栏也发生了变化:
4.侧栏设置:
在主题配置文件的sidebar字段,此处我直接设置为侧栏一直显示,而且显示在右边:
sidebar: # Sidebar Position, available value: left | right position: left #position: right # Sidebar Display, available value: # - post expand on posts automatically. Default. # - always expand for all pages automatically # - hide expand only when click on the sidebar toggle icon. # - remove Totally remove sidebar including sidebar toggler. #display: post display: always #display: hide #display: remove
5.设置头像和作者名称:
在站点配置文件中,新加一个字段avatar,值就是头像的连接地址,这里我使用站内地址,将avatar.png放到本地目录hexo\source\images中;作者名称直接设置站点配置文件中
author字段的值:
# Site
title: Linsh-何乐不为~
subtitle:
description:
author: Linshuhe
avatar: /images/avatar.png
language: zh-Hanstimezone:
第三方服务:
1.多说评论:
进入多说官网,登录后点击“我要登录”,填写相关信息,注意要记住多说域名这个字段填写的内容,
http://(duoshuo_shortname).duoshuo.com,这个duoshuo_shortname将用于我们站点配置文件中的配置。步骤:在站点配置文件中新建一个
duoshuo_shortname的字段,填写注册使用的duoshuo_shortname,例如:
duoshuo_shortname: linshuhe1
2.百度统计:
用于统计阅读的次数,步骤如下:登录百度统计官网:http://tongji.baidu.com/web/welcome/login定位到站点的代码获取页面;
复制
hm.js?后面的那串id;
在站点配置文件中,新增一个字段
baidu_analytics,设置其值为上面复制的百度统计的id
阅读次数统计,使用LeanCloud来实现,详情查看:https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html#%E9%85%8D%E7%BD%AELeanCloud
3.Swiftype搜索
使用 Swiftype 之前需要前往 Swiftype 配置一个搜索引擎。 而后编辑 站点配置文件, 新增 swiftype_key 字段,值为你的 swiftype 搜索引擎的 key。 详细的配置请参考: http://theme-next.iissnan.com/third-party-services.html#swfitypeLocal Search:添加百度/谷歌/本地 自定义站点内容搜索:
安装hexo-generator-search:
npm install hexo-generator-search --save
在站点配置文件中加入:
search: path: search.xml field: post
最终结果可以查看我的博客:https://linshuhe1.github.io/
补充:
可能有人跟我一样遇到了带你麻烦,那就是主页面的文章列表中,博客内容全部显示出来而不是只显示文章一部分和阅读全文》按钮,这样显得首页的列表很杂乱和冗长,其实要解决这个问题很简单,只需要在我们编写markdown内容的时候,在适当的位置假如如下标签:
<!--more-->
那么在首页显示的部分就是此标签前面的文章内容,而非全文显示:
相关文章推荐
- 给hexo个人博客 next主题添加背景图片
- [Node]Hexo(next主题)+Coding搭建个人博客
- Hexo+GitHub+Next主题搭建个人博客
- GitHub + Hexo + NexT 主题 免费搭建博客-参考链接收集
- 给hexo个人博客 next主题添加背景图片
- hexo框架-next主题-github搭建个人博客
- hexo 博客next主题集成gitment或者gitalk评论系统
- 基于Hexo+Next主题的个人博客搭建定制优化
- hexo+gitHub搭建个人独立博客 Next主题配置(二)
- hexo使用next主题,并且使用”多说“给博客的文章添加评论功能
- Hexo博客主题NexT使用自定义的CSS样式
- 零基础免费搭建个人博客-hexo+github
- Mac搭建Hexo博客及NexT主题配置优化
- Hexo+Next主题博客提交百度谷歌收录
- Hexo个人免费博客(一) 从零到发布Github
- CSDN博客 Android 客户端免费下载, 阅读博客和资讯,搜索博客,离线阅读
- [置顶] Hexo-免费个人博客搭建框架使用
- github pages + hexo + next搭建个人博客