个人博客主题美化
个人博客主题美化
选择主题
hexo默认的主题是landscape,推荐以下主题:
详见:https://github.com/search?q=hexo-theme
应用主题
- 下载主题
- 将下载好的主题文件夹,粘贴到站点目录的
themes
下。 - 更改站点配置文件
_config.yml
的theme字段,为主题文件夹的名称:
# extensions## plugins: https://hexo.io/plugins/## themes: https://hexo.io/themes/theme: <主题文件夹的名称>
主题优化
以上主题都有比较详细的说明文档,本节主要解决主题优化的常见问题。
主题优化一般包括:
设置「rss」
添加「标签」页面
添加「分类」页面
-
设置「字体」
问题:引用国外字体镜像较慢。
解决:可以改用国内的。将\themes*\layout_partials\head external-fonts.swig文件中fonts.google.com改成fonts.lug.ustc.edu.cn。
设置「代码高亮主题」
-
侧边栏社交链接
问题:图标哪里找?
解决:font awesome
-
开启打赏功能
问题:微信支付宝二维码不美观,规格不一。
解决:
设置友情链接
腾讯公益404页面
站点建立时间
订阅微信公众号
-
设置「动画效果」
问题:慢,需要等待 javascript 脚本完全加载完毕后才会显示内容。
解决:将主题配置文件_config.yml
中,use_motion字段的值设为false
来关闭动画。 设置「背景动画」
主题优化还包括:
添加背景图
在 themes/*/source/css/_custom/custom.styl 中添加如下代码:
body{ background:url(/images/bg.jpg); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-position:center;}
修改logo字体
在 themes/*/source/css/_custom/custom.styl
中添加如下代码:
@font-face { font-family: zitiming; src: url('/fonts/zitiming.ttf');}.site-title { font-size: 40px !important; font-family: 'zitiming' !important;}
其中字体文件在 themes/next/source/fonts
目录下,里面有个 .gitkeep
的隐藏文件,打开写入你要保留的字体文件,比如我的是就是写入 zitiming.ttf
,具体字库自己从网上下载即可。
修改内容区域的宽度
编辑主题的 source/css/_variables/custom.styl
文件,新增变量:
// 修改成你期望的宽度$content-desktop = 700px// 当视窗超过 1600px 后的宽度$content-desktop-large = 900px
网站标题栏背景颜色
打开 themes/*/source/css/_custom/custom.styl
,在里面写下如下代码:
.site-meta { background: $blue; //修改为自己喜欢的颜色}
自定义鼠标样式
打开 themes/*/source/css/_custom/custom.styl
,在里面写下如下代码:
// 鼠标样式 * { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important }
文章加密访问
打开 themes/*/layout/_partials/head.swig
文件,在 ``之前插入代码:
<script> (function(){ if('{{ page.password }}'){ if (prompt('请输入密码') !== '{{ page.password }}'){ alert('密码错误'); history.back(); } } })();</script>
写文章时加上password: *
:
---title: 2018date: 2018-10-25 16:10:03password: 123456---
实现点击出现桃心效果
- 在
/themes/*/source/js/src
下新建文件click.js
,接着把以下粘贴到click.js
文件中。
代码如下:
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removechild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.csstext="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestanimationframe(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createelement("div");a.classname="heart",d.push({el:a,x:e.clientx-5,y:e.clienty-5,scale:1,alpha:1,color:s()}),t.body.appendchild(a)}function c(e){var a=t.createelement("style");a.type="text/css";try{a.appendchild(t.createtextnode(e))}catch(t){a.stylesheet.csstext=e}t.getelementsbytagname("head")[0].appendchild(a)}function s(){return"rgb("+~~(255*math.random())+","+~~(255*math.random())+","+~~(255*math.random())+")"}var d=[];e.requestanimationframe=function(){return e.requestanimationframe||e.webkitrequestanimationframe||e.mozrequestanimationframe||e.orequestanimationframe||e.msrequestanimationframe||function(e){settimeout(e,1e3/60)}}(),n()}(window,document);
- 在
\themes\*\layout\_layout.swig
文件末尾添加:
<!-- 页面点击小红心 --><script type="text/javascript" src="/js/src/clicklove.js"></script>
静态资源压缩
在站点目录下:
$ npm install gulp -g
安装gulp插件:
npm install gulp-minify-css --savenpm install gulp-uglify --savenpm install gulp-htmlmin --savenpm install gulp-htmlclean --savenpm install gulp-imagemin --save
在 hexo
站点下新建 gulpfile.js
文件,文件内容如下:
var gulp = require('gulp');var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');var imagemin = require('gulp-imagemin');// 压缩css文件gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public'));});// 压缩html文件gulp.task('minify-html', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removecomments: true, minifyjs: true, minifycss: true, minifyurls: true, })) .pipe(gulp.dest('./public'))});// 压缩js文件gulp.task('minify-js', function() { return gulp.src(['./public/**/.js','!./public/js/**/*min.js']) .pipe(uglify()) .pipe(gulp.dest('./public'));});// 压缩 public/demo 目录内图片gulp.task('minify-images', function() { gulp.src('./public/demo/**/*.*') .pipe(imagemin({ optimizationlevel: 5, //类型:number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:boolean 默认:false 无损压缩jpg图片 interlaced: false, //类型:boolean 默认:false 隔行扫描gif进行渲染 multipass: false, //类型:boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest('./public/uploads'));});// 默认任务gulp.task('default', [ 'minify-html','minify-css','minify-js','minify-images']);
只需要每次在执行 generate
命令后执行 gulp
就可以实现对静态资源的压缩,压缩完成后执行 deploy
命令同步到服务器:
hexo ggulphexo d
修改访问url路径
默认情况下访问url路径为:domain/2018/10/18/关于本站
,修改为 domain/about/关于本站
。 编辑 hexo
站点下的 _config.yml
文件,修改其中的 permalink
字段:
permalink: :category/:title/
博文置顶
-
安装插件
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
然后在需要置顶的文章的front-matter中加上top即可:
---title: 2018date: 2018-10-25 16:10:03top: 10---
- 设置置顶标志
打开:/themes/*/layout/_macro/post.swig,定位到
,插入以下代码即可:
{% if post.top %} <i class="fa fa-thumb-tack"></i> <font color=7d26cd>置顶</font> <span class="post-meta-divider">|</span>{% endif %}
在右上角或者左上角实现fork me on github
- 选择样式github ribbons,
- 修改图片跳转链接,将
<a href="https://github.com/you">
中的链接换为自己github链接: - 打开
themes/next/layout/_layout.swig
文件,把代码复制到<div class="headband"></div>
下面。
主页文章添加边框阴影效果
打开 themes/*/source/css/_custom/custom.styl
,向里面加代码:
// 主页文章添加阴影效果.post { margin-top: 0px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);}
显示当前浏览进度
修改themes/*/_config.yml
,把 false
改为 true
:
# back to top in sidebarb2t: true# scroll percent label in b2t buttonscrollpercent: true
创建分类页
在终端窗口下,定位到 hexo
站点目录下,新建:
$ cd <站点目录>$ hexo new page categories
加入 广告
注册,复制广告代码
-
部署到网站。
2.1. 新建
theme/*/layout/_custom/google_ad.swig
,将 adsense 上的代码粘贴进去2.2. 头部。在
theme/*/layout/_custom/head.swig
中也粘贴一份2.3. 每篇博客。在
theme/*/layout/post.swig
里中在希望看到的地方加上:{% include '_custom/google_ad.swig' %}
例如:在
<div id="posts" class="posts-expand"> </div>
中间插入,总代码如下:{% block content %} <div id="posts" class="posts-expand"> {{ post_template.render(page) }} {% include '_custom/google_ad.swig' %} </div>{% endblock %}
等待审核通过。如果失败,可再次申请。
添加萌萌哒
首先,安装npm包:
npm install --save hexo-helper-live2d
然后在hexo的配置文件_config.yml
中添加如下配置,详细配置可以参考文档:
live2d: enable: true scriptfrom: local pluginrootpath: live2dw/ pluginjspath: lib/ pluginmodelpath: assets/ tagmode: false debug: false model: use: live2d-widget-model-shizuku display: position: right width: 150 height: 300 mobile: show: true
然后下载模型,模型名称可以到参考,一些模型的预览可以在。
npm install live2d-widget-model-shizuku
所有模型列表如下:
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
-
live2d-widget-model-haru/01
(usenpm install --save live2d-widget-model-haru
) -
live2d-widget-model-haru/02
(usenpm install --save live2d-widget-model-haru
) live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
下载完之后,在hexo根目录中新建文件夹live2d_models,然后在node_modules文件夹中找到刚刚下载的live2d模型,将其复制到live2d_models中,然后编辑配置文件中的model.use
项,将其修改为live2d_models文件夹中的模型文件夹名称。
-
复制你喜欢的模型名字:
epsilon2.1
gantzert_felixander
haru
miku
ni-j
nico
nietzche
nipsilon
nito
shizuku
tsumiki
wanko
z16
hibiki
koharu
haruto
unitychan
tororo
hijiki
插件配置
以下插件(评论系统、数据统计与分析、内容分享服务、搜索服务)各选一个即可。
评论系统
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
valine | 4 | 每天30000条评论,10gb的储存 | 作者评论无标识 |
4 | 多种账号登录 | 评论无法导出 | |
3 | 美观 | 必须备案域名 | |
3 | 简洁 | 只能登陆github评论 | |
disqus | 1 | 需要翻*墙 |
valine
1.1. 获取app id 和 app key
请先登录或注册 leancloud, 进入控制台后点击左下角创建应用,
进入刚刚创建的应用,选择左下角的设置
>应用key
,然后就能看到你的app id
和app key
了。
1.2. 填写app id 和 app key到主题配置文件_config.yml
1.3. 运行hexo g&&hexo d
推送到博客。
来必力/livere
2.1. 登陆 获取你的 livere uid。
2.2. 填写livere uid到主题配置文件_config.yml
畅言
3.1.获取app id 和 app key
请先登录或注册 , 点击“立即免费获取畅言”,
新建站点,点击管理,点击评论插件>评论管理,
点击后台总览,然后就能看到你的app id
和app key
了。
3.2. 填写app id 和 app key到主题配置文件_config.yml
3.3. 运行hexo g&&hexo d
推送到博客。
gitment
(如果博客搭建再码云上不能运行,个人没有解决)
4.1. 安装插件:
npm i --save gitment
4.2. 申请应用
在new oauth app为你的博客应用一个密钥:
application name:随便写homepage url:这个也可以随意写,就写你的博客地址就行application description:描述,也可以随意写authorization callback url:这个必须写你的博客地址
4.3. 配置
编辑主题配置文件themes/*/_config.yml
:
# gitment# introduction: https://imsun.net/posts/gitment-introduction/gitment: enable: true mint: true # recommend, a mint on gitment, to support count, language and proxy_gateway count: true # show comments count in post meta area lazy: false # comments lazy loading with a button cleanly: false # hide 'powered by ...' on footer, and more language: # force language, or auto switch by theme github_user: {you github user id} github_repo: 公开的git仓库,评论会作为那个项目的issue client_id: {刚才申请的clientid} client_secret: {刚才申请的client secret} proxy_gateway: # address of api proxy, see: https://github.com/aimingoo/intersect redirect_protocol: # protocol of redirect_uri with force_redirect_pro
disqus
编辑 主题配置文件themes/*/_config.yml
, 将 disqus 下的 enable 设定为 true,同时提供您的 shortname。count 用于指定是否显示评论数量。
disqus: enable: false shortname: count: true
数据统计与分析
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
4 | 可直接将访问次数显示在您在网页上(也可不显示) | 只计数 | |
百度统计 | 3 | 收录慢 |
不蒜子
编辑 主题配置文件 themes/*/_config.yml
中的busuanzi_count
的配置项即可。
- 当
enable: true
时,代表开启全局开关。 - 若
site_uv
(本站访客数)、site_pv
(本站访客数)、page_pv
(本文总阅读量)的值均为false
时,不蒜子仅作记录而不会在页面上显示。
注意:
不蒜子官方因七牛强制过期原有的『dn-lbstatics.qbox.me』域名(预计2018年10月初),与客服沟通数次无果,即使我提出为此付费也不行,只能更换域名到『busuanzi.ibruce.info』!
解决办法:
找到主题调用不蒜子的swig文件。一般在”\themes*\layout_third-party\analytics\busuanzi-counter.swig”
-
更改域名
把原有的:<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>域名改一下即可:<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
百度统计
- 登录 ,定位到站点的代码获取页面
- 复制统计脚本 id,如图:
- 编辑 主题配置文件
themes/*/_config.yml
,修改字段google_analytics
,值设置成你的统计脚本 id。
内容分享服务
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
4 | 稳定 | 不太美观 | |
4 | 美观 | 更新不及时(比如微信分享api) |
百度分享
编辑 主题配置文件,添加/修改字段 baidushare
,值为 true
即可。
# 百度分享服务baidushare: true
need-more-share2
编辑 主题配置文件,添加/修改字段 needmoreshare2
,值为 true
即可。
needmoreshare2: enable: true
搜索服务
推荐指数 | 优点 | 缺点 | |
---|---|---|---|
local search | 4 | 配置方便 | |
swiftype | 2 | 需注册 | |
algolia | 2 | 需注册 |
local search
添加百度/谷歌/本地 自定义站点内容搜索
-
安装
hexo-generator-searchdb
,在站点的根目录下执行以下命令:$ npm install hexo-generator-searchdb --save
-
编辑 站点配置文件,新增以下内容到任意位置:
search: path: search.xml field: post format: html limit: 10000
-
编辑 主题配置文件,启用本地搜索功能:
# local searchlocal_search: enable: true
error: watch /path/to/hexo/theme/ emperm
因为目前在windows subsystem for linux中,有些内容更改时,还不能实时更新到hexo服务器。所以需要重新编译,再启动服务器:
$ hexo generate
$ hexo server -s
#### template render error有时运行命令`$ hexo generate` 返回一个错误:
fatal something’s wrong. maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
template render error: (unknown path)
这意味着有些认不出来单词在你的文件,并且很可能在你的新博文,或者配置文件`_config.yml`中,比如缩进错误:错误例子:
plugins:
hexo-generator-feed
hexo-generator-sitemap
```
上一篇: 利用nginx搭建文件服务器
下一篇: 鼻子够灵的
推荐阅读
-
利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)
-
利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper(三)
-
利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
-
利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
-
利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表
-
利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能(六)
-
如何建立个人博客,手把手教你搭建自己的博客
-
如何建立个人博客,手把手教你搭建自己的博客
-
什么是博客怎样开通(个人博客建立搭建)
-
怎样建博客网站(教你免费搭建个人博客步骤)