Hexo博客的使用方法(2)

修改博客主题,解决中文乱码

关于修改配置文字后,中文乱码的,以及相关主题的切换介绍

克隆别人的Hexo主题

克隆 github路径 blog文件夹下的themes文件夹/随意名称(这里取名yilia)

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

并且需要修改 _config.yml 下的 themes 属性改为 yilia

hexo clean &&hexo g -d 重启即可!

修改博客文字

_config.yml下 另存为 UTF-8格式覆盖即可 ,不然就乱码

# Site
title: 张某的Blog
subtitle: 记录自己的成长过程!
description: 这里用于百度搜索关键词有利于搜索到你的博客
keywords:
author: 张某
language: zh-CN 必须是themes下的languages中已有的(zh-CN.yml)
timezone: 时区  并不需要写

修改默认设置

yilia/_config.yml

menu:
  主页: /
  归档: /archives/index.html
  关于: /about

# SubNav
subnav:
  jianshu: "http://www.jianshu.com/users/1a96b9218380/timeline"
  github: "https://github.com/EvanVivian"
  zhihu: "https://www.zhihu.com/people/yan-wei-chao-78/activities"

# 文章太长，截断按钮文字
# excerpt_link: more             注释掉此行

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2    
# 打赏wording
reward_wording: '请我吃颗糖果吧'          修改文案     
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: /img/EvanAlipay.jpg             添加图片并写上地址
# 微信二维码图片地址
weixin: /img/EvanWechat.jpg             添加图片并写上地址

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 2           ## 修改为默认开启目录

favicon: /img/xhren.jpg

#你的头像url
avatar: /img/daerzi.jpg

##修改默认评论系统 4选一 推荐 gitalk 或 valine
#评论：1、Disqus；2、Gitment 3.gitalk 4.valine
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#2、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: 'xxxxxx'          #存储评论的 repo
gitment_oauth:
  client_id: 'xxxxxxxxxxxxxxxxx'           #client ID
  client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxx'       #client secret

#3、gitalk
gitalk:
  enable:  true
  githubID:  ********
  repo:  *****
  ClientID:  '*****************'
  ClientSecret:  '****************************'
  adminUser:  **********
  distractionFreeMode: true

#4、Valine https://valine.js.org
valine: 
  appid:  #Leancloud应用的appId
  appkey:  #Leancloud应用的appKey
  verify: false #验证码
  notify: false #评论回复提醒
  avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
  placeholder: Just go go #评论框占位符


# 样式定制 - 一般不需要修改，除非有很强的定制欲望…      
style:
  # 头像上面的背景颜色
  header: '#03344b'     #修改为这个颜色后就跟为的页面一样了
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#03344b)'

## 版权声明 后续步骤请看下边
declare_type: 2
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '搜索'
  friends: '友链'
  aboutme: false

## 关闭 aboutme

修改代码块样式

直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css 
修改代码背景色，搜索 .article-entry .highlight, 修改background后面的颜色

pre{background:#272822;
改为
pre{background:#1a0139;

修改行号颜色，搜索 .article-entry .highlight .gutter pre .line
将
.article-entry .highlight .gutter pre .line{color:#666
改为
.article-entry .highlight .gutter pre .line{color:#fc0000

修改代码字体颜色 .article-entry .highlight .line
.article-entry .highlight .line{color:#fff;
修改为
.article-entry .highlight .line{color:#00ff0d;

代码块行号显示错乱

yilia/source/main.0cf68a.css

将 white-space:pre-wrap; 删除.
这个问题是自动换行造成的，使用不自动换行的white-space:pre;
样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。

赏

感谢支持!

微信

• 本文作者： 腾飞
  
• 本文链接： https://www.tengfei.eu.org/article/14ad2857.html
  
• 版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！