个人博客主题美化

2019-09-11 14:47:36 浏览数 (1)

个人博客主题美化

选择主题

Hexo默认的主题是landscape，推荐以下主题：

  1. snippet
  2. Hiero
  3. JSimple
  4. BlueLake

详见：https://github.com/search?q=hexo-theme

应用主题
  1. 下载主题
  2. 将下载好的主题文件夹，粘贴到站点目录的themes下。
  3. 更改站点配置文件_config.yml 的theme字段，为主题文件夹的名称：
代码语言：javascript复制
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: <主题文件夹的名称>
主题优化

以上主题都有比较详细的说明文档，本节主要解决主题优化的常见问题。

主题优化一般包括：

  • 设置「RSS」
  • 添加「标签」页面
  • 添加「分类」页面
  • 设置「字体」 问题：引用国外字体镜像较慢。 解决：可以改用国内的。将themes*layout_partialshead 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 中添加如下代码：

代码语言：javascript复制
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 中添加如下代码：

代码语言：javascript复制
@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 文件，新增变量：

代码语言：javascript复制
// 修改成你期望的宽度$content-desktop = 700px// 当视窗超过 1600px 后的宽度$content-desktop-large = 900px
网站标题栏背景颜色

打开 themes/*/source/css/_custom/custom.styl ,在里面写下如下代码：

代码语言：javascript复制
.site-meta {  background: $blue; //修改为自己喜欢的颜色}
自定义鼠标样式

打开 themes/*/source/css/_custom/custom.styl ,在里面写下如下代码：

代码语言：javascript复制
// 鼠标样式  * {      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文件,在 ``之前插入代码：

代码语言：javascript复制
<script>    (function(){        if('{{ page.password }}'){            if (prompt('请输入密码') !== '{{ page.password }}'){                alert('密码错误');                history.back();            }        }    })();</script>

写文章时加上password: *：

代码语言：javascript复制
---title: 2018date: 2018-10-25 16:10:03password: 123456---
实现点击出现桃心效果
  1. 在/themes/*/source/js/src下新建文件click.js，接着把以下粘贴到click.js文件中。 代码如下：
代码语言：javascript复制
!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);
  1. 在themes*layout_layout.swig文件末尾添加：
代码语言：javascript复制
<!-- 页面点击小红心 --><script type="text/javascript" src="/js/src/clicklove.js"></script>
静态资源压缩

在站点目录下：

代码语言：javascript复制
$ npm install gulp -g

安装gulp插件：

代码语言：javascript复制
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文件，文件内容如下：

代码语言：javascript复制
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 命令同步到服务器：

代码语言：javascript复制
hexo ggulphexo d
修改访问URL路径

默认情况下访问URL路径为：domain/2018/10/18/关于本站,修改为 domain/About/关于本站。 编辑 Hexo 站点下的 _config.yml 文件，修改其中的 permalink字段：

代码语言：javascript复制
permalink: :category/:title/
博文置顶
  1. 安装插件 $ npm uninstall hexo-generator-index --save $ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top即可：

代码语言：javascript复制
---title: 2018date: 2018-10-25 16:10:03top: 10---
  1. 设置置顶标志

打开：/themes/*/layout/_macro/post.swig，定位到

，插入以下代码即可：

代码语言：javascript复制
{% 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
  1. 选择样式GitHub Ribbons,
  2. 修改图片跳转链接,将<a href="https://github.com/you">中的链接换为自己Github链接：
  3. 打开 themes/next/layout/_layout.swig 文件，把代码复制到<div class="headband"></div>下面。
主页文章添加边框阴影效果

打开 themes/*/source/css/_custom/custom.styl ,向里面加代码:

代码语言：javascript复制
// 主页文章添加阴影效果.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：

代码语言：javascript复制
# Back to top in sidebarb2t: true# Scroll percent label in b2t buttonscrollpercent: true
创建分类页

在终端窗口下，定位到 Hexo 站点目录下，新建：

代码语言：javascript复制
$ cd <站点目录>$ hexo new page categories
加入 广告

主要有两种：百度SSP和谷歌Adsense。方法类似：

  1. 注册，复制广告代码
  2. 部署到网站。 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 %}
  3. 等待审核通过。如果失败，可再次申请。
添加萌萌哒

首先，安装npm包：

代码语言：javascript复制
npm install --save hexo-helper-live2d

然后在hexo的配置文件_config.yml中添加如下配置，详细配置可以参考文档：

代码语言：javascript复制
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

然后下载模型，模型名称可以到这里参考，一些模型的预览可以在这里。

代码语言：javascript复制
npm install live2d-widget-model-shizuku

所有模型列表如下：

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm 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文件夹中的模型文件夹名称。

  1. 复制你喜欢的模型名字： 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的储存

作者评论无标识

来必力/livere

4

多种账号登录

评论无法导出

畅言

3

美观

必须备案域名

gitment

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为你的博客应用一个密钥:

代码语言：javascript复制
Application name:随便写Homepage URL:这个也可以随意写,就写你的博客地址就行Application description:描述,也可以随意写Authorization callback URL:这个必须写你的博客地址

4.3. 配置

编辑主题配置文件themes/*/_config.yml:

代码语言：javascript复制
# 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 用于指定是否显示评论数量。

代码语言：javascript复制
disqus:  enable: false  shortname:  count: true
数据统计与分析

推荐指数

优点

缺点

不蒜子

4

可直接将访问次数显示在您在网页上（也可不显示）

只计数

百度统计

3

收录慢

不蒜子

编辑 主题配置文件 themes/*/_config.yml中的busuanzi_count的配置项即可。

  • 当enable: true时，代表开启全局开关。
  • 若site_uv（本站访客数）、site_pv（本站访客数）、page_pv（本文总阅读量）的值均为false时，不蒜子仅作记录而不会在页面上显示。

注意：

代码语言：javascript复制
不蒜子官方因七牛强制过期原有的『dn-lbstatics.qbox.me』域名（预计2018年10月初），与客服沟通数次无果，即使我提出为此付费也不行，只能更换域名到『busuanzi.ibruce.info』！

解决办法：

  1. 找到主题调用不蒜子的swig文件。一般在”themes*layout_third-partyanalyticsbusuanzi-counter.swig”
  2. 更改域名 把原有的：<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>
百度统计
  1. 登录 百度统计，定位到站点的代码获取页面
  2. 复制统计脚本 id，如图： ​
  1. 编辑 主题配置文件themes/*/_config.yml，修改字段 google_analytics，值设置成你的统计脚本 id。
内容分享服务

推荐指数

优点

缺点

百度分享

4

稳定

不太美观

need-more-share2

4

美观

更新不及时（比如微信分享API）

百度分享

编辑 主题配置文件，添加/修改字段 baidushare，值为 true即可。

代码语言：javascript复制
# 百度分享服务baidushare: true
need-more-share2

编辑 主题配置文件，添加/修改字段 needmoreshare2，值为 true即可。

代码语言：javascript复制
needmoreshare2:  enable: true
搜索服务

推荐指数

优点

缺点

Local Search

4

配置方便

Swiftype

2

需注册

Algolia

2

需注册

Local Search

添加百度/谷歌/本地 自定义站点内容搜索

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令： $ npm install hexo-generator-searchdb --save
  2. 编辑 站点配置文件，新增以下内容到任意位置： search: path: search.xml field: post format: html limit: 10000
  3. 编辑 主题配置文件，启用本地搜索功能： # Local searchlocal_search: enable: true

Error: watch /path/to/hexo/theme/ EMPERM

代码语言：javascript复制
因为目前在Windows Subsystem for Linux中，有些内容更改时，还不能实时更新到hexo服务器。所以需要重新编译，再启动服务器：

$ hexo generate $ hexo server -s

代码语言：javascript复制
#### 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)

代码语言：javascript复制
这意味着有些认不出来单词在你的文件，并且很可能在你的新博文,或者配置文件`_config.yml`中，比如缩进错误：错误例子：

plugins: hexo-generator-feed hexo-generator-sitemap ```

hexo npm css 网站 javascript

0 人点赞