当前位置: 代码迷 >> 综合 >> hexo blog 之主题个性化
  详细解决方案

hexo blog 之主题个性化

热度:107   发布时间:2023-11-19 18:48:29.0

添加菜单栏内容

最原始的主题中,只有首页和归档两个菜单选项,这里我需要添加其他的选项,在主题配置文件_config.yml中的menu选项中添加需要的选项去掉注释即可,我设置了显示标签、分类:
在这里插入图片描述

重新部署之后打开博客,点击进去,却报错:Cannot GET /tags/,不要慌,不能获取tags,创建一个就OK!
这里介绍创建page的语法:
hexo new page ‘name’ # name分别为tags、categories
创建了pages。
在gitbash中输入以下命令:
hexo new page ‘tags’ #创建tags子目录
hexo new page ‘categories’ #创建categories子目录
在你的网站根目录下面的source文件夹会分别生成tags、categories以及about文件夹。
分别修改这tags和categories文件夹中的index.md文件,新增type属性,如下:

---
title: tags
date: 2018-01-04 11:45:41
type: tags
---

categories的修改类似。

当你新建一篇博文的时候,增加上tags和categories属性值,就能在tags和categories界面检索到你的文章了,如:
在这里插入图片描述

添加fork me on github

在 http://tholman.com/github-corners/ 或者 https://github.com/blog/273-github-ribbons 选择合适的样式复制代码到themes/next/layout/_layout.swig
<div class="headband"></div>下面,重新部署就可以了。之后你就会在你的博客顶端看到一只小猫啦!

修改底部标签样式

修改Blog\themes\next\layout_macro\post.swig中文件,搜索rel="tag">#,将#替换成<i class="fa fa-tag"></i>。修改后的效果就是这样的:
在这里插入图片描述

添加文章阅读量

1.进入LeanCloud官网,进行账号注册。登录后,进入控制台,创建应用;

2.创建应用后,点击存储,创建Class;

3.在“应用key”查看AppID和AppKey;

4.打开博客根目录/themes/next/下的_config.yml,查找leancloud,填写复制来的AppID和AppKey,重新生成、部署博客即可正常统计文章阅读量。

增加打赏

1.准备支付宝和微信二维码图片,并将图片放入themes/next/source/images中。

2.在_config.yml中配置图片

reward_comment: 请我喝一杯茶吧!
wechatpay: /images/wechat.jpg
alipay: /images/aipay.png

鼠标点击出现桃心效果

在/themes/next/source/js/src里面新建love.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\next\layout_layout.swig文件末尾添加以下代码:

<script type="text/javascript" src="/js/src/love.js"></script>

自动更换背景图片

1.自动更换背景的实现是修改添加背景的css样式实现。图片来源是 https://source.unsplash.com/, 这个网站,里面不仅免费提供了很多高清美图,而且还提供api接口调用,实在是良心。这里实现的原理也是调用了这个网站的接口。

2.修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:

body {background:url(https://source.unsplash.com/random/1600x900);background-repeat: no-repeat;background-attachment:fixed;background-position:50% 50%;
}

如果自己不喜欢这个网址提供的图片做背景,那么修改url()里面的路径即可。repeat、attachment、position就是调整图片的位置,不重复出现、不滚动等等。

3.修改不透明度
完成这一步其实背景就会自动更换了,但是会出现一个问题,因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。那么就需要调整背景的不透明度了。同样是修改themes\next\source\css\ _custom\custom.styl文件。在后面添加如下代码

.main-inner { margin-top: 60px;padding: 60px 60px 60px 60px;background: #fff;opacity: 0.8;min-height: 500px;
}

配置 DaoVoice 实现在线聊天功能

1.首先需要注册一个 DaoVoice,点击注册。
2.注册成功后,进入后台控制台,进入到 应用设置–>安装到网站 页面,可以得到一个 app_id;
3.下面就进行主题中的一些设置。
以 next 主题为例,打开themes/next/layout/_partials/head.swig 文件中添加如下代码,位置随意:

{% if theme.daovoice %}<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")daovoice('init', {app_id: "{
   {theme.daovoice_app_id}}"});daovoice('update');</script>
{% endif %}

在主题配置文件 _config.yml,添加如下代码:

# Online contact 
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id

next 主题下聊天的按钮会和其他按钮重叠到一起,可以到聊天设置,修改下按钮的位置:
在这里插入图片描述
可以在 hexo s 调试模式下进行调试,效果满意后部署就可以看到最终效果啦!

修改``代码块自定义样式

打开\themes\next\source\css_custom\custom.styl,向里面加入:(颜色可以自己定义)

// Custom styles.
code {color: #ff7600;background: #fbf7f8;margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {margin: 5px 0;padding: 5px;border-radius: 3px;
}
.highlight, code, pre {border: 1px solid #d6d6d6;
}

更改背景颜色

如果不想用背景图片,可选择更改背景颜色,在\themes\next\source\css_variables中找到base.styl文件中修改下列颜色即可:
在这里插入图片描述
这里推荐给大家一个很好的查色号的网站:color-hex,超级好用了!

引入自定义 js 文件

之前看到一个非常好玩的动态人型时钟,找到了它的源码js文件,想在自己的博客里也加一个这样的时钟,如果也有感兴趣的朋友,可以参见:http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js
1.将js文件放到your_project\themes<theme_name>\source\js\src文件目录下;
2.之后在\themes\next\layout\ _layout.swig文件中的合适位置加入以下代码即可:

<script type="text/javascript" src="/js/src/你的文件.js"></script>

当然也可以直接加到你的博文中。

网站底部字数统计

1.切换到根目录下,然后运行如下代码

$ npm install hexo-wordcount --save

2.在/themes/next/layout/_partials/footer.swig文件尾部加上:

<div class="theme-info"><div class="powered-by"></div><span class="post-count">|&nbsp;&nbsp;博客全站共{
   { totalcount(site) }}字</span>
</div>

网站底部加上访问量

1.打开\themes\next\layout_partials\footer.swig文件,在copyright前加上:

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2.在合适的位置添加显示统计的代码:

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

注:不算子有两中不同计算方式的统计代码:

  1. pv的方式,单个用户连续点击n篇文章,记录n次访问量
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
  1. uv的方式,单个用户连续点击n篇文章,只记录1次访客数
<span id="busuanzi_container_site_uv">本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

添加之后再执行hexo d -g,再刷新页面就能看到效果。

修改文章内链接文本样式

修改Blog/themes/next/source/css/_common/components/post/post.styl,在末尾添加CSS样式,颜色可以按需更换:

// 文章内链接文本样式
.post-body p a{color: #0593d3; //原始链接颜色border-bottom: none;border-bottom: 1px solid #0593d3; //底部分割线颜色&:hover {color: #fc6423; //鼠标经过颜色border-bottom: none;border-bottom: 1px solid #fc6423; //底部分割线颜色}
}

当你鼠标移动到超链接上时超链接就会自动变成你设置的颜色了。

主页显示的文章折叠

当不希望主页上显示每篇文章的全文时,可以在博文中.md文件中加一句<!-- more -->,这句代码之后的部分就会被折叠起来,并会显示read more

参考文献

https://blog.csdn.net/mango_haoming/article/details/78473243
https://www.jianshu.com/p/9f0e90cc32c2 (强烈推荐,这个写的很全了)
https://hoxis.github.io/hexo-next-daovoice.html
http://shenzekun.cn/hexo%E7%9A%84next%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B.html

  相关解决方案