hexo 主题模板的设置

参考博客:http://threehao.com/
主题模板来源:https://github.com/raytaylorlin/hexo-theme-raytaylorism
从主题模板下载主题

1
2

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

参考readme进行配置

1. 修改 _config.yml 中的theme一项的值为raytaylorism
2. 由于本主题使用了[Data Files]数据文件和额外的layout文件，所以请复制以下文件到你的博客目录中，否则在启动server时可能会报错
   • 复制yourblog/themes/raytaylorism/_data文件夹到yourblog/source目录下
   • 复制yourblog/themes/raytaylorism/_md/下所有文件夹（about和reading）到yourblog/source目录下
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

样式

• 主题颜色配置：如果对主题的配色不满意，可以自行在yourblog/themes/raytaylorism/_config.yml中的color一项进行配置。其中各部件的颜色字符串命名遵循[Materializecss色板]规范。注意：link、article_title_link和tab配置的是文字的颜色，因此不可以给这几项配置lighten和darken的颜色加亮加暗的后缀。
• 页面标题：在yourblog/_config.yml中，title项决定了页面header中显示的标题，subtitle决定了浏览器的<title>标签内容。
• favicon：请将yourblog/themes/raytaylorism/source/favicon.png替换为你自己的图标文件，保持favicon.png命名不变。
• 多语言：目前主题支持简体中文、繁体中文和英文三种语言，可以将yourblog/_config.yml中language一项设置为zh-CN、zh-TW、en实现
• 正文宽度问题：有许多使用者反映正文在大屏幕下显得太窄（默认为700px定宽），这是出于提升文章阅读体验的考虑，在PC端上宽屏一行不至于过长，参考了UI设计师的建议以及一些知名博客类网站如medium.com、简书等等才做出的调整。如果依旧对这样的宽度不满意，可以自行调整yourblog/themes/raytaylorism/source/css/_base/lib_customize.styl中的.container类的宽度设置

数据

• 外部链接：在yourblog/source/_data/link.json数据文件中进行配置。如果不需要以下两项，直接把link.json删除即可。
  • 社交平台：对应social项，预设有weibo和github两种，如果需要其他社交平台可自行追加，但要注意key值必须与[Font Awesome图标]相对应，否则可能无法正常显示。
  • 友情链接：对应extern项，其中key值为链接文字，value值为外链URL
• 首页幻灯片：在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类型，对象技能展示。对象key值为技能名，value值为评分（取值为0-10的整数），取值为-1为分隔线。若不需要则将该字段设为null
  • projects：Array类型，作品与项目展示，内含多个Object，每个Object都有name作品名、image封面、description作品描述、link_text链接文字、link链接地址。若不需要则将该字段设为null
  • reward：Array类型，打赏二维码图片列表。例子中两个图片分别为微信和支付宝的二维码图片链接。若不需要则将该字段设为null
• 读书页面：在yourblog/source/_data/reading.json数据文件中进行配置。读书页面有“已读”“在读”和“想读”三栏，分别对应contents项中的readed、reading和wanted字段，每个字段对应一个书籍列表，按照例子进行修改即可。
• new标签：在yourblog/source/_data/hint.json数据文件中进行配置。selector项是一个数组，里面可以包含若干个CSS选择器用于选择要添加new标签的DOM元素。

插件

• 代码语法高亮：语法高亮的主题默认由CSS文件yourblog/themes/raytaylorism/source/css/lib/prettify-tomorrow-night-eighties.css。如果需要替换，可以到[Prettify Theme]选择你喜欢的主题，下载主题的CSS文件并存放到相同的目录下，并将yourblog/themes/raytaylorism/_config.yml中的google_code_prettify_theme一项改为对应的文件名。
• 评论：~评论插件默认使用[多说]，需要自行配置yourblog/themes/raytaylorism/_config.yml中的duoshuo_shortname为你自己站点的shortname~（多说即将关闭服务）评论插件默认使用[网易云跟帖]，需要自行配置yourblog/themes/raytaylorism/_config.yml中的yungentie_product_key为你自己站点的productKey（从通用代码中获取）

• 搜索：安装[hexo-generator-search]，在yourblog/_config.yml中添加如下配置代码。如果不需要搜索功能，将yourblog/themes/raytaylorism/_config.yml中menu的-id: search那一整项删除即可

  1 2 3

  search: path: search.xml field: all

• RSS：安装[hexo-generator-feed]，并按照说明配置（atom.xml的链接写在yourblog/source/_data/link.json的social项中，一般无需更改）

• 站点分析：
  • Google分析：yourblog/themes/raytaylorism/_config.yml中的google_analytics一项改为你的Google分析track id，留空则不启用
  • 腾讯分析：（国内用户有Google分析被墙的可能）yourblog/themes/raytaylorism/_config.yml中的tencent_analytics一项改为你的sId（在腾讯分析添加站点后，复制代码中sId=xxxxxxxx那串数字就是sId），留空则不启用
  • 如果你需要其他第三方的站点统计，可以仿照上面的例子添加配置，并在yourblog/themes/raytaylorism/layout/_partial/plugin/analytics.ejs中添加相应的统计代码
• 网页计数器：使用不蒜子来统计PV和UV，若不需要可将yourblog/themes/raytaylorism/_config.yml中的page_stat设为false

创建新的页面命令

1

hexo n "perl one line"

推送博客至github

1

hexo d -g

如果需要对写的文章进行分类可以设置categories：分类，如果需要加标签可以设置tags：标签1，多个标签后面可以设置为list

上一篇：Trinity 软件运行原理

下一篇：hexo和github搭建个人博客