博客优化(1)一基本信息的更改


本文首发于博客冰山一树Sankey,去博客浏览效果更好。

本博客基于Lucky大佬的博客进行优化,改成属于自己的风格,再此感谢大佬的开源,让自己节约大部分调试,以及寻找资料的时间与精力。

Luck大佬博客:LuckySec (luckyzmj.cn)

指导开源博客文章:LuckyBlog开源搭建教程 | LuckySec (luckyzmj.cn)

LOGO设计神器 - logo在线设计生成器,免费在线生成公司logo设计! (logosc.cn)

image-20220122124851336

step1 : 输入logo名称

image-20220122125004460

step2:选择行业

image-20220122125057857

step3:选择色系,我这里我选择冷色系

image-20220122125124591

step4:选择字体

image-20220122125156923

点击生成logo就可以看到很多logo了

image-20220122125233130

挑选所需要的logo

我挑了大半天都没有找到想要的。

我就用另外一个网站在进行设计

YEELOGO_logo在线制作

点击下载,然后在做一些优化,比如去背景,调整大小,logo就做好了。

去背景网站消除图片中的背景 – remove.bg

最后将自己做的logo替换原来的logo,

Valine:一款基于Leancloud的无后端评论系统 - 简书 (jianshu.com)

先注册leancloud账号,官网

valine官网快速开始 | Valine 一款快速、简洁且高效的无后端评论系统。,进去点击注册可进入leancount官网

image-20220127210623531

注册

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OTPwjw4Z-1643639248844)(博客优化(1)]一基本信息的更改.assets/image-20220127210739316.png)

实名认证加验证邮箱

image-20220127211058479

然后回到leancloud主页,应用名称随便,选择开发板即可

image-20220127215314932

然后点击应用,设置,应用凭证,即可看到自己的AppID和AppKey

image-20220127215522143

编辑主题目录下的配置文件MyBlog/themes/hexo-theme-matery/_config.yml,找到如下内容并修改

# Valine 评论模块的配置,默认为不激活,如要使用,就请激活该配置项,并设置 appId 和 appKey.
valine:
  enable: true
  appId: Ucrxxxxxxxxxxxxxxxx-xxxxsz  # 自行注册valine获取
  appKey: zPsLxxxxxxxxxxxxxxerLmd    # 自行注册valine获取
  notify: true
  verify: true
  visitor: true
  avatar: 'monsterid' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: '留下你的足迹..' # Comment Box placeholder
  background: /medias/comment_bg.png
  count: true
  enableQQ: 16463223  # 改为自己的QQ号
  recordIP: true
  requiredFields: 
    - nick
    - mail
  guest_info: 
    - nick
    - mail
    - link
  master: 
    - 46606772953bed0812789d6dc955614e  # md5加密后的博主邮箱
  metaPlaceholder:  # 输入框的背景文字
    nick: 昵称/QQ号(必填)
    mail: 邮箱(必填)
    link: 网址(https://)
  lang: zh-CN
  tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode]
    - 博主
    - 小伙伴
    - 访客
  friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode]
    - cb3e577ff029d6073400d5557effd41f   
    -

之后设计MD5加密邮箱,百度随便搜搜MD5加密就有

image-20220127220007800

放在上面中

master: 
    - 46606772953bed0812789d6dc955614e  # md5加密后的博主邮箱

DaoVoice官网上注册一个账号。

2405826-d61b060e4b9e4b1e

注册成功后,第一次登录,会弹出一个窗口,填完相关信息后。点击应用设置,点击安装到网站,然后就可以找到我们需要的appid了。

编辑主题目录下的配置文件MyBlog/themes/hexo-theme-matery/_config.yml,找到如下内容并修改

daovoice:
  enable: true
  app_id: 4xxxxxxxe   #DaoVoice中的app_id

小tips:点击应用设置,聊天设置可自行设计图标显示样式

image-20220127225555944

百度统计,当你的网站被百度收录后就会在百度统计中出现数据,具体效果如下:

img

由于博客的统计页面数据不能直接从百度站点中调用,因此需要自行从百度站点中将相应数据填入博客站点统计页面的源代码文件中,个人建议每隔一个月手动更新一次数据。

打开MyBlog\themes\hexo-theme-matery\layout\census.ejs文件,将百度统计中的数据填入源代码中,修改代码如下:

img

YLUI实现的,YLUI提供了社区版本供大家学习使用,具体效果如下:

这里我选择关闭了

img

大家可以查看YLUI官方的开发文档进行开发,有不懂的可以加官方的QQ群:191372634 进行讨论。

  • 添加b站链接
<% if (theme.socialLink.bilibili) { %>
    
        
    
<% } %>

社交图标可去这个网站中查找:图标库 – Font Awesome 中文网,但是没有csdn和b站链接,可找相似的来替代。

image-20220126211503850

但注意:使用font awesome图标版本也需要对应,不然无法显示这里版本为5.11.0

然后在_config.yml中的socialLink: 加对应即可,awesome图标可去这些博客了解

Font Awesome5.x 页面引入的几种方式和应用,及与4.x的变化

Font Awesome,一套绝佳的图标字体库和CSS框架 (dashgame.com)

socialLink:
  csdn: https://blog.csdn.net/m0_59464010?spm=1000.2115.3001.5343  //改成自己的
  bilibili: https://bilibili.com/484432829?from=search&seid=1051383716784056202		//改成自己的

https://github.com/WebStackPage/WebStackPage.github.io

在博客根目录 source/下新建tools,然后新建index.html,将webstack网页源码全选复制粘贴到里面。

然后打开博客根目录下配置文件_config.yml,找到skip_render,做如下修改:

skip_render:
  - 'tools/*'
  - 'tools/**'