主题目录下的_config.yml配置文件中:
实现方法,引入js文件,在主题文件下的/source/js/下新建funnyTitle.js,增加以下代码:
#profileinaboutpage,includingavatars,career,andpersonalintroductions.#在”关于”页面中配置个人信息,包括头像、职业和个人介绍.profile:avatar:/medias/avatar.jpgcareer:SoftwareEngineerintroduction:Ifyouwishtosucceed,youshouldusepersistenceasyourgoodfriend,experienceasyourreference,prudenceasyourbrotherandhopeasyoursentry.24.404页面原来的主题没有404页面,首先在主题目录下的/source/目录下新建一个404.md,内容如下:
---title:404date:2017-07-1916:41:10type:"404"layout:"404"description:"你访问的页面被外星人叼走了:("---然后在主题目录下新建一个/layout/404.ejs文件,内容如下:
找到/layout/_partial/footer.ejs文件,修改对应样式为
npminstall--savehexo-helper-live2d安装下载动画人物库,动画人物有很多,可以网上查询资料,下面推荐几种.
npminstall--savelive2d-widget-model-shizuku#课桌女孩npminstall--savelive2d-widget-model-hibiki#御姐npminstall--savelive2d-widget-model-wanko#狗狗npminstall--savelive2d-widget-model-haruto#海军服女孩npminstall--savelive2d-widget-model-miku#萝莉博客根目录_config.yml文件配置:
##添加动画live2d模块npminstall--savehexo-helper-live2d##下载动画人物库npminstalllive2d-widget-model-z16-Dlive2d:enable:truescriptFrom:local#默认pluginRootPath:live2dw/#插件在站点上的根目录(相对路径)pluginJsPath:lib/#脚本文件相对与插件根目录路径pluginModelPath:assets/#模型文件相对与插件根目录路径tagMode:false#标签模式,是否仅替换live2dtag标签而非插入到所有页面中debug:false#调试,是否在控制台输出日志model:use:live2d-widget-model-mikudisplay:position:right#动画位置width:150height:190#位置配置,这个在左侧边栏位置很居中hOffset:50#调节水平位置vOffset:-5#调节垂直位置mobile:show:false#是否在移动设备上显示scale:0.5#移动设备上的缩放react:opacityDefault:0.7opacityOnHover:0.827.雪花和樱花效果添加雪花飘落效果在主题目录下新增/source/js/snow.js文件,添加内容:
#雪花特效snow:enable:true添加樱花飘落效果在主题目录下新增/source/js/sakura.js文件,添加内容:
#樱花特效sakura:enable:true28.鼠标点击爱心效果鼠标点击样式1在主题目录下/source/libs/others/clicklove.js文件中为鼠标点击爱心效果代码.
/*鼠标点击文字特效*/vara_idx=0;jQuery(document).ready(function($){$("body").click(function(e){//vara=newArray("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");vara=newArray("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");var$i=$("").text(a[a_idx]);a_idx=(a_idx+1)%a.length;varx=e.pageX,y=e.pageY;$i.css({"z-index":999999999999999999999999999999999999999999999999999999999999999999999,"top":y-20,"left":x,"position":"absolute","font-weight":"bold","color":"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"});$("body").append($i);$i.animate({"top":y-180,"opacity":0},1500,function(){$i.remove();});});});在主题目录下/layout/layout.ejs里添加如下代码:
首先安装hexo-admin插件
编辑后还可以快速部署发布.不过还是更喜欢在typora上面写markdown语法,如果部署在自己的服务器上面可以使用该功能,部署在gitee或github上还是无法使用.
有时候请求busuanzi数据比较慢,然后浏览量和访问人数就会隐藏,可能是默认的,在matery.css中增加以下代码可以让它一直显示.
#背景静止彩带.ribbon:enable:false#改为true即可开启背景静态彩带size:150#彩带大小,默认:90.alpha:0.6#彩带透明度(0~1),默认:0.6.zIndex:-1#背景的z-index属性,css属性用于控制所在层的位置,默认:-1.clickChange:false#设置是否每次点击都更换彩带.背景动态彩带主题目录下的/layout/layout.ejs文件主题目录下_config.yml中动态彩带的配置项:
<%if(theme.ribbon_dynamic.enable){%>
#背景动态彩带.ribbon_dynamic:enable:true#改为true即可开启背景动态彩带背景canvas主题目录下的/layout/layout.ejs文件主题目录下_config.yml中canvas的配置项:
新建相册(壁纸)文件
hexonewpagewallpaper修改主题目录下的_config.yml文件,我的是提取到清单-相册导航处.
Lists:##清单url:/icon:fasfa-listchildren:-name:音乐url:/musicsicon:fasfa-music-name:电影url:/moviesicon:fasfa-film-name:阅读url:/booksicon:fasfa-book-name:壁纸url:/wallpapericon:fasfa-image修改站点/galleries/index.md文件
---title:壁纸date:2019-02-0421:35:22layout:wallpaper---主题目录下新建/layout/wallpaper.ejs文件,添加内容如下:
#在“关于”页面配置"我的相册"图片,如果你不需要这些信息则可以将其设置为不激活或者将其删除.myGallery:enable:truedata:-/medias/featureimages/0.jpg-/medias/featureimages/1.jpg-/medias/featureimages/2.jpg修改相册布局,找到/source/css/matery.css文件,修改如下部分:
原理其实就是三个a标签,里面包含头像,地址等信息,点击后跳转到对于的地址.那么我们也可以自定义一个相册列表的配置文件(galleries.json)和模板文件(galleries.ejs),然后hexo读取配置文件,自动生成相册列表界面,如果可以这样优化,后面新增相册就只需要在配置文件galleries.json中维护相册信息即可.(增删改)
那我们说干就干,下面开始咯.
这里要修改几个文件:
主题目录下的配置文件_config.yml,不要跟站点根目录下的同名文件搞混了,在menu下添加以下代码:
menu:Lists:##清单url:/crystal-blogicon:fasfa-listchildren:#此处省略其他菜单-name:壁纸url:/wallpapericon:fasfa-image-name:相册url:/galleriesicon:fasfa-camera在站点根目录source下新建galleries目录,然后在该目录下新建index.md,就会生成index.html文件了
hexonewpage"galleries"修改/galleries/index.md文件,指定布局界面:
---title:我的相册date:2021-08-2519:56:35type:gallerieslayout:galleries---添加相册配置文件在主题目录下新建/source/_data/galleries.json文件,按照自定义约定添加如下的相册配置内容(我维护了三个相册):
透明导航栏经常给我造成阅读障碍,可以设置不使用透明导航栏,指定好看的颜色.找到主题目录下的/source/css/matery.css文件,修改如下部分:
header.nav-transparent{background-color:transparent!important;/*background-color:#000B3F;*//*修改导航栏不透明#16103f#4cbf30#7371BC*/background-image:none;box-shadow:none;}37.添加快捷导航在博客根目录下的\source\_posts\navigate\index.md目录下新建快捷导航:
hexonewpagenavigate修改主题目录下的_config.yml文件,添加快捷导航菜单:
##快捷导航menu://....此处省略其他菜单Navigate:url:/navigateicon:fasfa-location-arrow修改站点/navigate/index.md文件
---title:快捷导航date:2021-08-2916:25:05layout:navigate---主题目录下新建/layout/navigate.ejs文件,添加内容如下:
hexonewpagemusics主题目录下的_config.yml文件中添加[清单-音乐]菜单:
menu://此处省略其他菜单项Lists:##清单url:/icon:fasfa-listchildren:-name:音乐url:/musicsicon:fasfa-music修改音乐文件/musics/index.md指定布局配置:
---title:musicsdate:2021-08-2519:55:53layout:musics---主题目录下新增音乐布局文件/layout/musics.ejs,添加如下内容:
npminstallhexo-tag-mtime--save新增电影导航页面,博客根目录下生成/source/movies/index.md文件:
hexonewpagemovies/source/movies/index.md文件添加如下内容:
在主题目录下创建/layout/_partial/valine.ejs文件,添加如下内容:
下面这个版本也可以,去gitHub克隆下来,然后使用他的valine.min.js替换本地的即可.
valine.ejs文件中是引用valine.min.js的方式需要在主题目录下的_config.yml文件中搜索关键词libs,找到js,在js引用配置的最后一行然后添加:
valine:/libs/valine/Valine.min.js这样下面的引用方式就能找到/lib/js/valine/valine.min.js文件
将/Artitalk/dist/css/下的artitalk.min.css复制到主题目录/source/libs/artitalk下;
将/Artitalk/dist/js/下的artitalk.min.js复制到主题目录/source/libs/artitalk下;因为要和matery主题引入风格保持一致,修改主题配置_config.yml文件,搜索关键词libs,
找到css在最后一行添加:
artitalk:/libs/artitalk/artitalk.min.css找到js,在最后一行添加:
artitalk:/libs/artitalk/artitalk.min.js我列一下最终效果,因为原来有很多,我就不全部列出了,只要知道最后一行加就可以了,注意对齐,如下:
libs:css:fontAwesome:/libs/awesome/css/all.css#V5.11.1materialize:/libs/materialize/materialize.min.css#1.0.0artitalk:/libs/artitalk/artitalk.min.css#最后一行添加js:jquery:/libs/jquery/jquery.min.jsmaterialize:/libs/materialize/materialize.min.js#1.0.0artitalk:/libs/artitalk/artitalk.min.js#最后一行添加找到主题目录下/layout/_partial/head.ejs,在头部引入css:
最后创建页面,手工创建或者执行hexo命令创建都可以.
hexonewpage"artitalk"在hexo的source目录会生成一个artitalk文件夹,修改里面的index.md:
---title:artitalkdate:2021-09-0320:31:58type:artitalklayout:artitalk---主题目录下的_config.yml文件配置菜单:
Front-matter选项中的所有内容均为非必填的。但仍然建议至少填写title和date的值。