慢慢来,是种诚意,加载中 . . .

hexo个性魔改


hexo matery主题个性修改

一、雪花飘落

先来看看效果:

找到你的博客目录,在主题在/themes/matery/layout/layout.ejs 中 写下如下代码即可

二、一款好看的星空动态背景

效果:

使用html5中canvas,配合jQuery库实现的效果,实现代码:

/themes/matery/layout/layout.ejs文件中加上以下代码,注意如果没有效果,看是否引入jQuery依赖,一定要有!!!

<!--动态背景-->
<div id="DynamicBackground"><canvas></canvas><canvas></canvas><canvas></canvas></div>
<script src="/js/canvas_moving.js"></script>

themes/matery/source/css/matery.css里最后添加以下代码

/*动态背景*/
#DynamicBackground {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#DynamicBackground canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

themes\hexo-theme-matery\source\js下新建canvas_moving.js文件,添加如下代码即可

最后执行

  • hexo cl
  • hexo g
  • hexo s
  • hexo cl &&hexo g &&hexo s 一键三连即可

js代码:

三、背景图片细节美化

添加背景像素纹,让你的图片更加的有**质感**

效果:

没添加之前

对比添加之后,仔细看纹理是不是好看很多

添加之后

themes\hexo-theme-matery\source\css中添加引入背景图片

/* 添加背景像素纹*/
.bg-cover::before {
    background-image: url('https://codecheng-1305009997.cos.ap-chengdu.myqcloud.com/img/20210504115955.png');/*这里使用我的腾讯云cos图床,你可以下载下来保存*/
}

四、修改首页轮播图高度

打开themes/matery/source/libs/materialize/materialize.min.css文件(ctrl+f搜索.carousel.carousel-slider .carousel-item)修改style属性

height:50%;min-height:550px;

打开themes/matery/source/css/matery.css文件(ctrl+f搜索.index-card)修改style属性

margin-top: -410px;

我按照个人喜好修改了所有的高度为全屏幕

比如之前是这样的:

修改为这样:

找到themes\hexo-theme-matery\source\css\matery.css大概在600多行ctrl+f搜索.index-cover,修改高度为110vh即可。

.index-cover {
    height: 110vh;
}

五、修改导航栏为动态渐变色(蓝色系)

先看效果:

学习了css3,使用css3渐变色来完成

themes/matery/source/css/matery.css文件找到(165行):修改自己想要的颜色

六、屏蔽网页源码(单纯的屏蔽鼠标右键和键盘事件)

七、水平分割线和卡片星星图片背景

分割线效果:


卡片背景:

themes\hexo-theme-matery\source\css\my.css中添加以下代码

themes\hexo-theme-matery\source\css\my.css,ctrl+f搜索.card

/*加入卡片星星背景图片 可以自己选*/

.card {
	 background: url(https://codecheng-1305009997.cos.ap-chengdu.myqcloud.com/img/20210504193531.jfif) top;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(42, 89, 165, .1), 0 5px 15px rgba(71, 159, 188, .07) !important;
}

八、添加个人主页(自定义界面)

一款Linux风格主页

效果如下:

实现步骤:

在博客的 根目录下 鼠标右键git bash或者在博客根路径下cmd

hexo new page linuxhome

删除index.md

在本地新建文件夹放自定义的html文件 个人主页和个人简介 (lanzoui.com)我的源码链接


接下来在博客的根目录下的config.yml文件中找到或者搜索skip_render:

skip_render: 
- "linuxhome/**" 

注意格式,意思是在hexo g 渲染时跳过这些文件的渲染,/**代表所有的文件,也可以以指定文件跳过


然后在主题的themes\hexo-theme-matery\config的主题配置文件下,找到你要添加的位置

children:
  - name: 个人主页
    url: /linuxhome
    icon: fa fa-house-damage

配置好后一键三连即可


九、个人简介HTML实现

操作跟上面一样,效果:

步骤:

hexo new page introduction

删除index.md

我的源码地址:个人主页和个人简介 (lanzoui.com)

密码g61j

下面的步骤跟添加个人主页步骤一样,就不演示了

欢迎查看我的hexo 博客 CodeCheng


评论
  目录