本博客基于Lucky大佬的博客进行优化,改成属于自己的风格,再此感谢大佬的开源,让自己节约大部分调试,以及寻找资料的时间与精力。
Luck大佬博客:LuckySec (luckyzmj.cn)
指导开源博客文章:LuckyBlog开源搭建教程 | LuckySec (luckyzmj.cn)
每个网站都有相对于的图标彰显特色与理念,我也想设计出自己的图标,无奈自己不会设计,只能去那些logo网站看看找找灵感
第一个:
LOGO设计神器 - logo在线设计生成器,免费在线生成公司logo设计! (logosc.cn)
step1 : 输入logo名称
step2:选择行业
step3:选择色系,我这里我选择冷色系
step4:选择字体
点击生成logo就可以看到很多logo了
挑选所需要的logo
我挑了大半天都没有找到想要的。
我就用另外一个网站在进行设计
YEELOGO_logo在线制作
点击下载,然后在做一些优化,比如去背景,调整大小,logo就做好了。
去背景网站消除图片中的背景 – remove.bg
最后将自己做的logo替换原来的logo,
编辑根目录下的配置文件,找到如下内容并修改
编辑根目录下的配置文件,找到如下内容并修改为自己的信息
编辑主题目录下的配置文件,找到如下内容并修改,也可直接替换主题文件下的source中的favicon.png和medias中的logo.png
演示效果如下:
编辑 ,修改为如下信息
想要修改自己喜欢的音乐之前,需要先获取音乐列表的id。
登录网易云音乐网页版,找到自己喜欢的歌单,上面的ID对应修改
server:
- netease——>网易云音乐
- tencent——>QQ音乐
- kugou——>酷狗音乐
编辑主题目录下的配置文件,找到如下内容并修改
可参考Valine:一款基于Leancloud的无后端评论系统 - 简书 (jianshu.com)
先注册leancloud账号,官网
valine官网快速开始 | Valine 一款快速、简洁且高效的无后端评论系统。,进去点击注册可进入leancount官网
注册
实名认证加验证邮箱
然后回到leancloud主页,应用名称随便,选择开发板即可
然后点击应用,设置,应用凭证,即可看到自己的AppID和AppKey
编辑主题目录下的配置文件,找到如下内容并修改
之后设计MD5加密邮箱,百度随便搜搜MD5加密就有
放在上面中
首先在DaoVoice官网上注册一个账号。
注册成功后,第一次登录,会弹出一个窗口,填完相关信息后。点击应用设置,点击安装到网站,然后就可以找到我们需要的appid了。
编辑主题目录下的配置文件,找到如下内容并修改
小tips:点击应用设置,聊天设置可自行设计图标显示样式
编辑文件,以下简单标记出几处,还有其他涉及到博客信息的内容都需要改为你自己的博客信息即可。
编辑文件,按如下格式添加友情
比如你的图片上传图床后,链接地址如下
首先提取出图片链接公共的部分,作为图床地址
然后再提取图片地址中不同的部分,作为图片地址
具体怎么分割根据你自己图床的链接格式而定,以上为我的github图床格式为例。
将相册图床的地址改为你自己的图床地址,需要更改两处文件
themes/hexo-theme-matery/layout/galleries.ejs
themes/hexo-theme-matery/layout/gallerie.ejs
为每个相册添加链接地址,在根目录/source/List/galleries/下新建 相册名称 文件夹,并在该文件夹下新建 ,添加
最后,在根目录/source/_data/galleries.json中添加图片链接,格式如下,
站点统计的数据来源于百度统计,当你的网站被百度收录后就会在百度统计中出现数据,具体效果如下:
由于博客的统计页面数据不能直接从百度站点中调用,因此需要自行从百度站点中将相应数据填入博客站点统计页面的源代码文件中,个人建议每隔一个月手动更新一次数据。
打开文件,将百度统计中的数据填入源代码中,修改代码如下:
仿Windows页面是采用YLUI实现的,YLUI提供了社区版本供大家学习使用,具体效果如下:
这里我选择关闭了
大家可以查看YLUI官方的开发文档进行开发,有不懂的可以加官方的QQ群: 进行讨论。
无文章特色背景图: 打开主题配置文件,修改替换如下代码即可:
由于默认的链接没有b站,CSDN等,这里添加自定义
在主题的 文件中,默认支持 QQ、GitHub 和邮箱的配置,可以在主题文件的 文件中,新增、修改你需要的社交链接地址
将下面需要添加的链接代码放到该文件的最后面,如果每个可放在rss之前
- 添加csdn链接
- 添加b站链接
社交图标可去这个网站中查找:图标库 – Font Awesome 中文网,但是没有csdn和b站链接,可找相似的来替代。
但注意:使用图标版本也需要对应,不然无法显示。这里版本为5.11.0
然后在中的 加对应即可,awesome图标可去这些博客了解
Font Awesome5.x 页面引入的几种方式和应用,及与4.x的变化
Font Awesome,一套绝佳的图标字体库和CSS框架 (dashgame.com)
hexo在生成页面后会自动渲染所有的html页面,但是有时候有一些自定义页面采用自己渲染的代码,如果再加上hexo的渲染,会引起混乱。为此我们可以定义让hexo不要渲染我们自己的页面。
font matter方法
将代码直接写到index.md中,然后再 中添加
skip render方法
在博客根目录下的 ,找到
注: 表示在目录 下的文件全部跳过渲染, 表示在博客根目录 文件夹下的文件全部跳过渲染(例如页面的 js、css 在另一个文件夹中)
例:webstack
是一个纯静态的网址导航网站,内容均由收集并整理。项目基于前端框架开发。
Github:https://github.com/WebStackPage/WebStackPage.github.io
在博客根目录 下新建,然后新建,将网页源码全选复制粘贴到里面。
然后打开博客根目录下配置文件,找到,做如下修改: