MB Story

MB Story | coder

0%

【Hexo美化】使用raytaylorism主题

其实,安装配置很简单,根据以下说明文档就可以搞定。

1
themes/raytaylorism/README.md #说明文档

本文是从说明文档摘抄出来并整理而成~~~

安装raytaylorism主题

1
2
cd yourblog
git clone https://github.com/raytaylorlin/hexo-theme-raytaylorism.git themes/raytaylorism

基础配置

  1. 修改 _config.yml 中的theme一项的值为raytaylorism

  2. 由于本主题使用了[Data Files]数据文件和额外的layout文件,所以请复制以下文件到你的博客目录中,否则在启动server时可能会报错

    • 复制yourblog/themes/raytaylorism/_data文件夹到yourblog/source目录下
    • 复制yourblog/themes/raytaylorism/_md/下所有文件夹(about和reading)到yourblog/source目录下(不包含_md目录)
  3. 在你的yourblog/_config.yml配置文件的#pagination的位置添加下面配置(禁用归档、标签、目录页面的分页功能)

1
2
3
4
5
6
archive_generator:
per_page: 0
tag_generator:
per_page: 0
category_generator:
per_page: 0

DIY样式配置

  • 主题颜色配置
    如果对主题的配色不满意,可以自行在yourblog/themes/raytaylorism/_config.yml中的color一项进行配置。其中各部件的颜色字符串命名采用Materializecss色板规范。
    注意:linkarticle_title_linktab配置的是文字的颜色,
    因此不可以给这几项配置lightendarken的颜色加亮加暗的后缀
  • 页面标题
    yourblog/_config.yml中,title项决定了页面header中显示的标题,subtitle决定了浏览器的<title>标签内容。
  • favicon
    请将yourblog/themes/raytaylorism/source/favicon.png替换为你自己的图标文件,
    保持favicon.png命名不变
  • 多语言
    目前主题支持简体中文、繁体中文和英文三种语言,
    可以将yourblog/_config.ymllanguage一项设置为zh-CNzh-TWen实现

数据配置

  • 外部链接
    yourblog/source/_data/link.json数据文件中进行配置
    • 社交平台:对应social项,预设有weibogithub两种。
    • 友情链接:对应extern
  • 首页幻灯片
    yourblog/source/_data/slider.json数据文件中进行配置。不需要幻灯片,直接把slider.json删除即可。
  • 关于页面
    yourblog/themes/raytaylorism/_md/about/index.md文件为自我介绍的正文,markdown书写即可。在yourblog/source/_data/about.json数据文件中配置关于页面的其他项。
    • avatar:String类型,头像图片链接
    • name:String类型,自己的姓名
    • tag: String类型,描述自己的标签,主要显示在侧滑栏的头部
    • desc:String类型,对自己的简短描述
    • skills:Object类型,对象技能展示。
    • projects:Array类型,作品与项目展示,
    • reward:Array类型,打赏二维码图片列表。
  • 读书页面
    yourblog/source/_data/reading.json数据文件中进行配置。读书页面有“已读”“在读”和“想读”三栏,分别对应contents项中的readedreadingwanted字段,每个字段对应一个书籍列表,按照例子进行修改即可。
  • new标签
    yourblog/source/_data/hint.json数据文件中进行配置。selector项是一个数组,里面可以包含若干个CSS选择器用于选择要添加new标签的DOM元素。

注意事项

  • 要配置layout,才能使数据配置(json文件)生效
  • 配置layout,其实就是新建一个page,配置到post里面去
    1
    hexo n page about #新建一个page,也就是layout
  • source/_data:存放json数据
  • source/_post_post是默认的layout,新建port没有指定layout时,默认存放到此layout
  • source/aboutabout是自定义的layout

更换电脑后遇到问题

执行$ hexo g,提示WARN: no layout:index.html
是因为更换电脑后重新部署,config.xml会将theme还原成默认配置,按如下方法修改配置:
1修改 _config.yml 中的theme一项的值为raytaylorism
$ hexo clean,再$ hexo g,搞定!!!