Hexo框架下用NexT(v7.0+)主题美化博客
1. 前言
前文:Windows下通过GitHub+Hexo搭建个人博客的步骤;
博主的个人博客:https://hunter1023.github.io/ 按照本篇博客美化。
在 Hexo 中有2份主要的配置文件,其名称都是_config.yml
。 其中,一份位于博客根目录下,主要包含 Hexo 本身的配置;另一份位于themes/next/
目录下,用于配置主题相关的选项。
2. 基础设置
2.1 设置站点名、作者昵称和站点描述等内容
打开根目录下的_config.yml
# Site
title: 特叔服务
subtitle:
keywords:
author: Hunter
description: Tough times never last, but tough people do.
2.2. NexT主题的安装
顾名思义,所谓主题就是界面的展示样式。Hexo安装主题,只需要将主题文件拷贝至博客所在目录的themes
目录下,修改相关配置文件即可生效。
博客所在目录下打开git bash
,再通过Git clone https://github.com/theme-next/hexo-theme-next themes/next
即可完成。
2.3 启用主题
打开根目录下的_config.yml
,查找theme
字段,将字段改为theme: next
(冒号:
之后要有空格分隔,否则无效) ,之后通过hexo g
和hexo s
,再在浏览器中访问localhost:4000
即可本地预览主题效果。
3. 主题设定
3.1 选择scheme
打开themes/next/
下的_config.yml
,查找scheme
,可以看到如下四种不同的风格方案:
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
去掉#
注释,即启用对应的scheme,博主采用Muse主题,大家可以依次测试效果,选择自己喜欢的scheme。
3.2 设置语言
博客框架默认的语言是英文,前往/themes/next/languages
,查看当前NexT版本简体中文对照文件的名称是zh-Hans
还是zh-CN
。
再前往根目录下的_config.yml
,查找language
,设置成language: zh-Hans
或language: zh-CN
,即显示简体中文。
3.3 设置菜单及对应页面
打开
themes/next/
下的_config.yml
,查找menu
menu:home: / || home#about: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat
去掉
#
注释即可显示对应的菜单项,也可自定义新的菜单项。||
之前的值是目标链接,之后的是分类页面的图标,图标名称来自于FontAwesome icon。若没有配置图标,默认会使用问号图标。新添加的菜单需要翻译对应的中文
打开hexo/theme/next/languages/zh-CN.yml
,在menu下自定义,如:menu:resources: 资源
hexo new page "categories"
此时在根目录的source
文件夹下会生成一个categories文件,文件中有一个index.md
文件,修改内容如下--- title: 分类 date: 2017-12-14 13:05:38 type: "categories" comments: false ---
注:如果有启用评论,默认页面带有评论。需要关闭的话,添加字段comments并将值设置为false。
3.4 设定站点建立时间
打开**themes/next/
下的_config.yml
**,查找since
footer:# Specify the date when the site was setup.# If not defined, current year will be used.#since: 2015
如果不设置,默认显示当前年份。
4. 美化
4.1 设置头像
打开themes/next/
下的_config.yml
,查找avatar
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: http://XXXXXXXXX
avatar
的值是图片的链接地址(完整的URI 或者 站内的相对地址皆可)
地址 | 值 |
---|---|
完整的URI | http://example.com/avatar.png |
站点内地址 |
图片放至themes/next/source/images/ 配置为:avatar: /images/图片名
|
站点内地址 |
图片放至根目录下source/uploads/ (初始无uploads文件夹,自行创建)目录下配置为:avatar: /uploads/图片名
|
之后创建博文,对图片的引用 同样可以按照上述地址获取。
4.2 网站图标设置
- 图标素材网站:iconfont;easyicon
- 下载16x16以及32x32大小的PNG格式图标,置于
/themes/next/source/images/
下 - 打开**
themes/next/
下的_config.yml
**,查找favicon
favicon:small: /images/favicon-16x16-next.pngmedium: /images/favicon-32x32-next.pngapple_touch_icon: /images/apple-touch-icon-next.pngsafari_pinned_tab: /images/logo.svg#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml
修改small和medium的路径为下载的图标路径
4.3 背景动画
4.3.1 Canvas-nest风格
4.3.2 JavaScript 3D library风格
- 进入theme/next目录
- 执行命令:
git clone https://github.com/theme-next/theme-next-three source/lib/three
- 将
themes/next/_config.yml
中查找theme-next-three
,将想要的效果改为true即可:
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false
4.4 背景图片/顶栏、底栏图片(背景色)、侧栏背景及内部文字颜色
打开theme/next/source/css/_custom/custom.styl
,添加以下代码
//背景图片
body{ background:url(图片链接);background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:center;
}
//顶栏图片
.header {background:url(图片链接) none repeat scroll !important;
}
//底栏背景色
.footer {background:rgba(颜色rgb,透明度) none repeat scroll !important;
}
//侧栏图片及内部文字颜色修改
#sidebar {background:url(图片链接);background-size: cover;background-position:center;background-repeat:no-repeat;p,span,a {color: 颜色代码;}
}
其中的css样式属性都可以根据图片修改,以达到满意的效果。
4.5 侧栏置于左侧,修改控制按钮样式
默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。打开themes/next/
下的_config.yml
,查找sidebar
4.5.1 设置侧栏在左侧/右侧
- Pisces或Gemini方案
sidebar: position: left #position: right
- Mist或Muse方案
- 打开
next/source/js/src/motion.js
,查找paddingRight
,把所有(2个)PaddingRight
更改为paddingLeft
即可。 - 打开
next/source/css/_custom/custom.styl
,添加如下内容://侧边栏置于左侧 .sidebar {left: 0; } //侧栏开关置于左侧 .sidebar-toggle {left: $b2t-position-right; }
- 打开
next/source/css/_common/components/back-to-top.styl
,将right: $b2t-position-right;
改为left: $b2t-position-right;
4.5.2 显示侧边栏的时机
#post - 默认行为,在文章页面(拥有目录列表)时显示#always - 在所有页面中都显示#hide - 在所有页面中都隐藏(可以手动展开)#remove - 完全移除display: post#display: always#display: hide#display: remove
4.5.3 侧边栏控制按钮样式修改
打开themes/next/layout/source/js/src/motion.js
,找到如下代码处,更换close的内容
var sidebarToggleLine1st = new SidebarToggleLine({el: '.sidebar-toggle-line-first',status: {arrow: {width: '50%', rotateZ: '45deg', top: '2px', left: '6px'},// close: {width: '100%', rotateZ: '-45deg', top: '5px', left: '0px'} //X形close: {width: '50%', rotateZ: '-45deg', top: '2px', left: '0px'} //箭头形}});var sidebarToggleLine2nd = new SidebarToggleLine({el: '.sidebar-toggle-line-middle',status: {arrow: {width: '90%'},// close: {opacity: 0} //X形close: {width: '90%'} //箭头形}});var sidebarToggleLine3rd = new SidebarToggleLine({el: '.sidebar-toggle-line-last',status: {arrow: {width: '50%', rotateZ: '-45deg', top: '-2px', left: '6px'},// close: {width: '100%', rotateZ: '45deg', top: '-5px', left: '0px'} //X形close: {width: '50%', rotateZ: '45deg', top: '-2px', left: '0px'} //箭头形}});
4.6 文章底部标签显示的优化
修改/themes/next/layout/_macro/post.swig
,搜索 rel="tag">#
,将 #
换成 <i class="fa fa-tag"></i>
4.7 文章添加阴影、透明效果
打开theme/next/source/css/_custom/custom.styl
,添加以下代码
// 主页文章添加阴影效果
.post {margin-top: 60px;margin-bottom: 60px;padding: 25px;background:rgba(255,255,255,0.9) none repeat scroll !important;-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
4.8 Hexo添加文章时自动打开编辑器
- 首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件。
如果没有这个scripts目录,则新建一个。 - scripts目录新建的JavaScript脚本文件可以任意取名。
通过这个脚本,我们用其来监听hexo new
这个动作,并在检测到hexo new
之后,执行编辑器打开的命令。
- 如果你是windows平台的Hexo用户,则将下列内容写入你的脚本:
var spawn = require('child_process').exec;
hexo.on('new', function(data){spawn('start "markdown编辑器绝对路径.exe" ' + data.path);
});
如果你是Mac平台Hexo用户,则将下列内容写入你的脚本:
var exec = require('child_process').exec;
hexo.on('new', function(data){exec('open -a "markdown编辑器绝对路径.app" ' + data.path);
});
4.9 点击侧栏头像回到首页
修改/themes/next/layout/_macro/sidebar.swig
,找到如下代码:
<img class="site-author-image" itemprop="image"src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"alt="{{ theme.author }}" />
在其前后加上<a href="/"></a>
即可,如下:
<a href="/"><img class="site-author-image" itemprop="image"src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"alt="{{ theme.author }}" />
</a>
4.10 修改中文字体
- 前往Google Fonts查看合适的字体
- 打开
themes/next/
下的_config.yml
,查找font
font:enable: true# Uri of fonts host. E.g. //fonts.googleapis.com (Default). 修改为墙内镜像host: https://fonts.loli.netglobal:external: truefamily: Noto Serif SC // 挑选的字体size: 16
- 修改
/themes/next/source/css/_variables/base.styl
将
$font-family-monospace = consolas, Menlo, $font-family-chinese, monospace $font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')
改为
$font-family-monospace = consolas, Menlo, $font-family-base, monospace $font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')
- 修改
4.11 新建文章时,在相同目录下创建同名文件夹(便于图片管理)
- 打开站点配置文件
_config.yml
,搜索post_asset_folder
字段,设置其值为true
- 安装hexo-asset-image:
npm install hexo-asset-image --save
- 此时
hexo new "fileName"
会在/source/_posts
目录下创建同名的文件夹 - 只需在 md 文件里使用
![title](图片名.jpg)
,无需路径名就可以插入图片。
4.12 首页显示文章摘要(阅读全文)及配图(文章内不重复显示)
- 打开
themes/next/
下的_config.yml
,查找excerpt
auto_excerpt: //自动摘录enable: truelength: 150 //摘录字数 read_more_btn: true //显示全文按钮
- 打开
themes\next\layout\_macro\post.swig
,在{% if is_index %}
和{% if post.description and theme.excerpt_description %}
之间添加如下内容{% if post.images %}<div class="out-img-topic"><img src={{ post.images }} class="img-topic"></div> {% endif %}
- 向
themes\next\source\css\_custom\custom.styl
中添加如下内容//文章摘要配图 //图片外部的容器方框,限制图片大小 .out-img-topic {display: block;max-height:500px;margin-bottom: 24px;overflow: hidden; } //图片 img.img-topic {display: block ;margin-left: .7em;margin-right: .7em;padding: 0;float: right;clear: right; }
- 将摘要图片储存于
themes\next\source\images
中,建议在此路径下单独建一个文件夹存放摘要图片,这个图片和文章中插图的存放路径不同,不是一个概念。然后在文章YAML头信息中添加images字段,将值填为/images/imagename.jpg
。images: "images/文章摘要配图/Win10桌面.png"
4.13 给页面、侧边栏添加背景图片
打开theme/next/source/css/_custom/custom.styl
,添加以下代码:
body {background: url(/images/blogbk.jpg) no-repeat;/* 背景图垂直、水平均居中 */background-position: center center;/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸缩 */background-size: cover;/* 设置背景颜色,背景图加载过程中会显示背景色 */background-color: rgba(0, 0, 0, 0.5);
}
.sidebar {background:url(/images/sidebar.jpg);background-size: cover;background-position:center;background-repeat:no-repeat;p,span,a {color: rgba(255, 255, 255, 1);}
}
4.14 文字背景以及半透明的设置
打开theme/next/source/css/_custom/custom.styl
,添加以下代码:
.content {border-radius: 20px; //文章背景设置圆角padding: 30px 60px 30px 60px;background:rgba(255, 255, 255, 0.8) none repeat scroll !important;
}
4.15 去除NexT主题Markdown分割线渲染效果
修改/source/css/_common/scaffolding/base.styl
,注释或删除以下内容:
background-image: repeating-linear-gradient(-45deg,white,white 4px,transparent 4px,transparent 8px);
4.16 图片可点击放大查看,放大后可关闭
- 打开站点配置文件
_config.yml
,搜索fancybox
字段,设置其值为true
- 进入到
theme/text/
文件夹下,打开git bash
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
4.17 博客总访问量统计
- 打开
themes/next/
下的_config.yml
,查找busuanzi
busuanzi_count:enable: truetotal_visitors: falsetotal_visitors_icon: usertotal_views: falsetotal_views_icon: eyepost_views: truepost_views_icon: eye
当前版本的NexT集成的不蒜子,总访问人数和人次只是分别用icon来表示,故取消显示,自行改动
- 打开
/themes/next/layout/_partials/footer.swig
,在最后添加如下内容:<span id="busuanzi_container_site_uv">本站访问次数:<span class="busuanzi-value" id="busuanzi_value_site_pv"></span> </span>
4.18 文章末尾添加版权声明
效果:
配置:
查找主题配置文件themes/next/_config.yml
中的creative_commons
creative_commons:license: by-nc-sasidebar: falsepost: true # 将false改为true即可显示版权信息language:
4.19 本地搜索(其余搜索方案的劣势只有收费)
npm install hexo-generator-search
- 查找主题配置文件
themes/next/_config.yml
中的local_search
local_search:enable: true
4.20 图床和上传工具
盘点一下免费好用的图床
4.21 文章置顶
Hexo博客彻底解决置顶问题
效果:
注:若有多篇文章需要置顶,排序方式为 在需要置顶的文章的Front-matter
的top:
填写阿拉伯数字即可,数越大,排序越靠前。
Google统计
Sitemap网站地图
提交谷歌收录本站 Google Search
文章阅读量统计
- HEXO+NEXT主题个性化配置
- 打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化
- [EasyHexo 专栏] #2 - 魔改 Next 不完全教程
- 基于Hexo+Node.js+github+coding搭建个人博客——进阶篇(从入门到入土)
- Hexo博客Next主题优化总结
- 为NexT主题添加文章阅读量统计功能
- 2017年最新基于hexo搭建个人免费博客——自定义页面样式一
- Hexo添加文章时自动打开编辑器
- next主题下点击侧边栏头像回到博客首页
- Google Fonts 已支持思源宋体!
- 弃暗投明-Hexo更换next主题
- hexo博客NEXT主题美化
- 在hexo博客中插入图片,音乐,视频
Hexo框架下用NexT(v7.0+)主题美化博客相关推荐
- 【个人网站搭建】GitHub pages+hexo框架下为next主题添加分类及标签
0x00 前言 文章中的文字可能存在语法错误以及标点错误,请谅解: 如果在文章中发现代码错误或其它问题请告知,感谢! Hexo博客框架版本(hexo vesion):5.3.0 Next主题版本:v5 ...
- hexo 环境变量_小白使用 Github + Hexo 从 0 搭建一个博客
最近有几位同学在公众号后台留言问我的博客站是怎么建站的,思来想去,还是写一篇从 0 开始吧. 前置准备 我们先聊一下前置准备,可能很多同学一听说要自己搭一个博客系统,直接就望而却步.不得有台服务器么, ...
- 基于Hexo的matery主题搭建博客并深度优化
本文转自 悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...
- Hexo+GithubPage搭建Fan主题的博客(2)本地初始化Hexo博客项目
更多信息请关注 个人网站 本地初始化Hexo博客 (1)打开cmd窗口,执行如下命令安装hexo npm install -g hexo-cli 如: D:\src>npm install -g ...
- 【hexo博客】hexo+NexT主题个人博客
1. 环境准备 参考链接 1.1 在github创建Git仓库 在github托管的GithubPage,也可以托管到Gitee,但是GiteePage好像有一些限制具体看自己选择 仓库名一定要输入 ...
- Hexo + yilia 主题 +githubpages博客添加友言评论功能
前言 Hexo博客的Yilia主题中评论系统只提供了畅言.网易云跟帖.多说和Disqus. 由于多说评论.网易云跟帖已经关闭系统,畅言需要域名备案,而github是国外的,没有备案,所以尝试了其他第三 ...
- wordpress主题-响应式CUI2.0翠竹林博客主题wordpress模板分享
介绍: 蓝白色两栏响应式CUI2.0翠竹林博客主题模板分享,内容布局方面采用了通用的两栏格式. 同时前端也采用了目前比较流行的响应式设计,能自主适配手机和电脑设备. 安装好主题以后要先设置菜单导航,要 ...
- 教你如何使用hexo以及nginx、github搭建属于自己的博客(操心的妈妈级教学)
教你如何使用hexo以及nginx.github搭建属于自己的博客(妈妈级教学) ~~ 1.解释一下你要的服务器的效果以及对应的操作 ~~ 首先你要有自己的一台服务器,可以是云服务器,或者你可以用自己 ...
- 关于Hexo6.0搭建个人博客(github+Google-收录篇)
本文原创首发于慕课网,欢迎转载,注明出处即可. 本篇博文将继续带大家优化博客站点,打造上线站点,设置个性域名等 阅读本文前建议先行阅读本人另外三篇遍基础博文 1.关于Hexo6.0搭建个人博客(基础篇 ...
- 自媒体形式下的个人设计(面向用户)—博客,QQ空间等个人主页的设计
自媒体形式下的个人设计(面向用户)-博客,QQ空间等个人主页的设计 在当今的虚拟网络社会,每个人都能在这个Internet上找到个人的影子,作为网络社交的名片的个人主页,例如:QQ空间,个人博客.当然 ...
最新文章
- 通俗讲解从Transformer到BERT模型!
- AP(无线访问接入点(WirelessAccessPoint))
- PowerDesigner(16.1)使用
- Swift 中的指针使用
- 汉诺塔问题递归算法python代码_[python]汉诺塔问题递归实现
- 《java入门第一季》之类String类小案例
- 无人驾驶出租车遭警察拦截后欲“潜逃”,AI 是原罪?
- c# 替换html注释,C# 替换div标签
- android go 刷机教程,安卓用的久了,如何刷机?安卓手机线刷教程
- 龙将加速浏览器_《使命召唤16》及战区迎来万圣节限时活动,迅游加速器助力流畅体验 18183手机游戏网...
- CSS三角制作(HTML、CSS)
- 播放器:七牛播放器小记
- python调用海康威视的摄像头_Python调用海康威视网络相机之——python读取相机rtsp码流显示画面...
- AODV协议的仿真研究
- 【年终总结】投身福报,我的2021年终总结
- 2016 PayPal商家账户界面 如何集成支付按钮
- Result window is too large, from + size must be less than or equal to: [10000]
- SQLyog 报错2058 :连接 mysql 8.0.11 解决方法
- 查看linux系统CPU内存
- Django分页+增删改查
热门文章
- IDEA中用maven打出的jar包只有一个META-INF文件夹,没有java的源码???
- AJAX,PHP,前端简单交互制作输入框效果
- php pdf文件上传,显示
- php 导出csv格式的文件
- (转)高效的MySQL分页
- FLASH右键菜单的应用
- 神经网络激活函数优缺点和比较(sigmod,tanh,relu,softmax,leaky relu,ELU,SELU)
- cvCalcBackProject() 直方图反向投影匹配
- 2020年施工晴雨表电子版_2020年建筑施工特种作业人员培训通知
- QT 基础类结构图及核心库