前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >个人博客主题美化

个人博客主题美化

作者头像
小小咸鱼YwY
发布2019-09-11 14:47:36
1.2K0
发布2019-09-11 14:47:36
举报
文章被收录于专栏:python-爬虫python-爬虫

个人博客主题美化

选择主题

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_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 中添加如下代码:

代码语言: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
img
img

Gantzert_Felixander

img
img

haru

img
img

miku

img
img

ni-j

img
img

nico

img
img

nietzche

img
img

nipsilon

img
img

nito

img
img

shizuku

img
img

tsumiki

img
img

wanko

img
img

z16

img
img

hibiki

img
img

koharu

img
img

haruto

img
img

Unitychan

img
img

tororo

img
img

hijiki

img
img

插件配置

以下插件(评论系统、数据统计与分析、内容分享服务、搜索服务)各选一个即可。

评论系统

推荐指数

优点

缺点

Valine

4

每天30000条评论,10GB的储存

作者评论无标识

来必力/livere

4

多种账号登录

评论无法导出

畅言

3

美观

必须备案域名

gitment

3

简洁

只能登陆github评论

Disqus

1

需要翻*墙

Valine

1.1. 获取APP ID 和 APP Key

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用,

进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP IDAPP 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 IDAPP 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-party\analytics\busuanzi-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,如图: ​
img
img
  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 ```

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 个人博客主题美化
    • 选择主题
      • 应用主题
        • 主题优化
          • 插件配置
            • 评论系统
            • 数据统计与分析
            • 内容分享服务
            • 搜索服务
        相关产品与服务
        ICP备案
        在中华人民共和国境内从事互联网信息服务的网站或APP主办者,应当依法履行备案手续。腾讯云为您提供高效便捷的 ICP 备案服务。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档