开源免费Hexo主题–pure
Hexo theme pure. It’s a pure theme for Hexo.
本文目录
相关链接
GitHub:https://github.com/cofess/hexo-theme-pure
官方文档:https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md
知识兔备份2022-7-5:OneDrive
特色
多语言
第三方评论框(友言、来必力、gitment、gitalk)
可展示个人豆瓣书单
可展示个人github托管项目
可设置支付宝、微信打赏
配置说明
在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者分享,主要用于配置主题相关的选项。为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为主题配置文件。
使用教程
安装主题
git clone https://github.com/cofess/hexo-theme-pure.git themes/pure
更新主题
cd themes/puregit pull
启用pure主题
打开站点配置文件,找到theme字段,将其值更改为 pure
theme: pure
到此,主题安装完成。然后知识兔启动Hexo服务验证主题是否正确启用。
hexo s
安装插件
npm install hexo-wordcount –save
npm install hexo-generator-json-content --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
主题配置
设置语言
打开站点配置文件, 将 language 设置成你所需要的语言。知识兔建议明确设置你所需要的语言,可选值对应themes\pure\languages目录下语言文件,简体中文配置如下:
language: zh-CN
主题颜色
定制了五套颜色,默认白,黑:theme-black,蓝:theme-blue,绿:theme-green,紫:theme-purple
# configconfig:skin: # 主题颜色 theme-black theme-blue theme-green theme-purple
导航菜单
# 导航菜单menu:Home: . Archives: archives # 归档Categories: categories # 分类Tags: tags # 标签Repository: repository # github repositoriesBooks: books # 书单Links: links # 友链About: about # 关于# 导航菜单图标(font awesome)menu_icons:enable: true # 是否启用菜单图标home: icon-home-fillarchives: icon-archives-fillcategories: icon-foldertags: icon-tagsrepository: icon-projectbooks: icon-book-filllinks: icon-friendshipabout: icon-cup-fill
设置个人信息
头像在themes\pure\source\images 目录下替换图片即可,捐献的二维码同理。
个人信息大部分都在 主题配置文件 中设置
搜索
主题内置三种站内搜索方式:insight、swiftype、baidu
# Searchsearch:insight: true # you need to install `hexo-generator-json-content` before using Insight Searchswiftype: # enter swiftype install key herebaidu: false # you need to disable other search engines to use Baidu search
分享
支持weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
# Share# weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedinshare:enable: true # 是否启用分享sites: weibo,qq,wechat,facebook,twitter # PC端显示的分享图标mobile_sites: weibo,qq,qzone # 移动端显示的分享图标
评论
主题集成了disqus、友言、来必力、gitment、gitalk评论系统,知识兔选择其中一种即可
# Comment# Gitment# Introduction: https://imsun.net/posts/gitment-introduction/comment:type: livere # 启用哪种评论系统disqus: # enter disqus shortname hereyouyan: uid: *** # enter youyan uid livere:uid: *** # enter livere uidgitment:githubID: usernamerepo: username.github.ioClientID: ***ClientSecret: ***lazy: false
文章浏览量统计
主题内置了不蒜子和leancloud来统计文章浏览量,启用其中之一即可,注意leancloud需要到其官网申请APP ID 和APP Key。
比如,启用不蒜子来统计文章浏览量,在主题配置文件中把busuanzi设置为true即可:
pv:busuanzi:enable: true # 不蒜子统计
如果知识兔不需要第三方来统计浏览量,只需将相应设置改为false即可(设置为false后不会加载第三方JS脚本)
项目
复制theme/pure/_source/ 目录下repository文件夹到blog path/source/ 目录下
新版配置(支持 Github 和 Gitee):
新版配置将会覆盖旧版的 github 配置!
# Repository Info (This will override 'github' option)# 项目仓库展示信息(将会覆盖 github 项)repository:platform: github # 托管平台(github | gitee)username: *** # 用户名
旧版配置(仅支持 Github):
# Githubgithub: username: *** # github username
豆瓣书单
复制theme/pure/_source/ 目录下books文件夹到blog path/source/ 目录下
# douban 豆瓣书单douban:user: *** # 豆瓣用户名start: 0 # 从哪一条记录开始count: 100 # 获取豆瓣书单数据条数
友情链接
复制theme/pure/_source/ 目录下links文件夹到blog path/source/ 目录下
在 hexo 目录下的 source 文件夹内创建一个名为 _data(禁止改名)的文件夹。
然后知识兔在文件内创建一个名为 links.yml 的文件,在其中添加相关数据即可。
单个友情链接的格式为:
Name:link: http://example.comavatar: http://example.com/avatar.pngdesc: "这是一个描述"
添加多个友情链接,我们只需要根据上面的格式重复填写即可。
. 将 Name 改为友情链接的名字,例如 Cofess。
. http://example.com 为友情链接的地址。
. http://example.com/avatar.png 为友情链接的头像。
. 这是一个描述 为友情链接描述。
文章索引目录
title: 文章标题categories:- 文章分类tags:- 文章标签toc: true # 是否启用内容索引
sidebar侧边栏
文章侧边栏默认为开启状态,如果知识兔某篇文章不想开启侧边栏,在文章开头配置加入“sidebar: none”即可:
title: 文章标题categories:- 文章分类tags:- 文章标签sidebar: none # 是否启用sidebar侧边栏,none:不启用
博客优化
auto Minify html、js、css and make it neat
npm install hexo-neat --save
在博客配置文件_config.yml中添加
# hexo-neatneat_enable: trueneat_html:enable: trueexclude: neat_css:enable: trueexclude:- '*.min.css'neat_js:enable: truemangle: trueoutput:compress:exclude:- '*.min.js'
npm install hexo-baidu-url-submit --save
使用Google翻译,百度翻译和有道翻译将Hexo中的汉字标题转成英文标题
安装
npm install hexo-translate-title --save
在博客配置文件_config.yml中添加
translate_title:translate_way: google #google | baidu | youdaoyoudao_api_key: XXXyoudao_keyfrom: XXXis_need_proxy: true #true | falseproxy_url: http://localhost:8123
注意:判断是否需要配置google本地代理,因为我在本地是开启时才能访问google翻译的,如果知识兔没有被墙,请将_config.yml 下的is_need_proxy: true改为false。如果知识兔设置为true,请设置本地代理地址
数学公式
Hexo默认使用”hexo-renderer-marked”引擎渲染网页,该引擎会把一些特殊的markdown符号转换为相应的html标签
解决方案有很多,知识兔可以网上搜下,为了节省大家的时间,这里只分享亲身测试过的方法。
更换Hexo的markdown渲染引擎,hexo-renderer-markdown-it-plus引擎替换默认的渲染引擎hexo-renderer-marked即可。
安装hexo-renderer-markdown-it-plus插件
npm un hexo-renderer-marked --savenpm i hexo-renderer-markdown-it-plus --save
配置
安装插件后,如果知识兔未正常渲染LaTeX数学公式,在博客配置文件_config.yml中添加
markdown_it_plus:highlight: truehtml: truexhtmlOut: truebreaks: truelangPrefix:linkify: truetypographer:quotes: “”‘’plugins:- plugin:name: markdown-it-katexenable: true- plugin:name: markdown-it-markenable: false
文章启用mathjax
title: Hello Worldmathjax: true
下载仅供下载体验和测试学习,不得商用和正当使用。
[ppwp passwords=”zhishitu.cn”]
下载体验
应版权要求,禁止分享,敬请谅解,有问题务必找客服哈。
有问题找客服哈,并领取学习福利!
[/ppwp]