just another simple hexo theme
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
languages
layout
source
.gitignore
LICENSE add a tree to doc and add a mit protocol Mar 24, 2017
_config.yml
changelog.md
little-talk.md
readme.md update readme aboutme Apr 21, 2017
sample.md

readme.md

关于主题和特色

1.我所知的首个具有「夜晚模式」的HEXO主题

  1. Medium知乎专栏掘金专栏 风格的文章页面,让读者注意力尽可能放到文章本身上。

  2. 本主题不支持IE6,7,8,9,使用IE6,7,8,9浏览时,页面会有相应警告信息。

功能

  • 对IE浏览器的检测和警告
  • 不支持多说评论系统(废话,它都已经关张了),支持disqus评论系统
  • 以相对时间显示文章的发布时间
  • 文章页的阅读时间统计
  • 版权信息的可配置
  • 分享功能支持微信、微博、推特,在文章左侧
  • 文章的打赏功能(目前支持支付宝)
  • 针对文章较多,标签较多的情况,只显示前十个标签展示
  • 可配置的谷歌分析,用于分析网站数据
  • 夜晚模式
  • 移动端的简洁设计
  • 博客首页文章中图片缩略图展示
  • 用户离开本博客页面后的标题彩蛋
  • 安卓Chrome 系浏览器的状态栏主题颜色设置
  • Add to home screen 添加网站到桌面

展示

直接访问我的个人博客去看喽: http://hktkdy.com

移动端可复制网站或扫描下方二维码

需要注意的是:由于博客搭建在Github Pages上面,如果您的访问速度不理想,可能并非是博客主题系统本身的问题,而是服务器的问题。

你为什么要选择这个主题

好了,前面简单罗列了这个主题的特色和功能点。现在问题来了,如果你正在使用hexo博客系统书写博客,可能正在用一个其他的主题,那么凭什么要花时间,换一个其他的的主题呢?

我认为除了以上的特色和功能点之外,还是看个人的喜好和风格。

对我来讲,我个人是喜好偏向知乎专栏风格的文章页面的,我认为这样的设计让我更专注于阅读,然而其他的主题,很少有在这一点上有令我满意的,如果你喜欢这样的风格,或许你会喜欢这个主题。

对我来讲,有点朋友圈的文章的味道。甭管你喜不喜欢朋友圈里那些被转发的10万+,你都应该对朋友圈很是熟悉。据我了解,这个主题,有那么点味道,当然,并不浓厚。我自己也不会写那种「标题党」的文章。如果你喜欢这样的风格,或许你会喜欢这个主题。

对我来讲,我喜欢淡色系,但是淡色系在夜晚的时候又会很让人头疼。因此,这个主题又加入了「夜晚模式」,据我所知,这也是首个Hexo主题里含有夜晚模式的。如果你认为夜晚模式是必不可少的,或许你会喜欢这个主题。

当然,如果以上所说所有如果都不能成为一个你选择它的理由的话。那么我要说,就因为他够小众,你觉得跟别人撞衫尴尬吗?如果尴尬,跟别人用同一个博客主题为什么就不尴尬呢,选择它,或许会让你撞衫的几率更小。哈哈。

然而,让人不喜欢的理由也很多,这个主题在细节之处的打磨还不够,有些地方还比较粗糙。

使用

安装

$ git clone https://github.com/zhangolve/hexo-theme-olive.git themes/olive 配置

修改hexo根目录下的 _config.yml : theme: olive

环境

需要注意的是,我自己的运行环境是:

$ hexo version
hexo: 3.1.1
os: Windows_NT 10.0.14393 win32 ia32
http_parser: 2.6.0
node: 5.5.0
v8: 4.6.85.31
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 47
openssl: 1.0.2e

没有对其他运行环境进行测试,如果此主题不能正常使用,请向我反馈,不胜感激。

更新

cd themes/olive
git pull

配置

主题配置文件在主目录下的_config.yml,请根据自己需要修改使用。

请安装好之后,手动打开_config.yml 文件,里面针对每一项配置都有较为详细的说明.

致谢

  • 掘金 ,本博客首页的最初设计思路很多借(chao)鉴(xi)于此
  • medium ,非常好的文章页设计,我最初的很多思路同样借(chao)鉴(xi)于此
  • HEXO.IO ,Hexo 官方文档,给我提供了很多参考
  • 写一个自己的Hexo主题 ,这篇16年7月份的文章,对我最初写这个主题很有参考价值
  • hexo-theme-landscape ,hexo的官方主题,虽然本身很丑,但是代码逻辑很清晰,给了我很大的参考
  • hexo-theme-next wiki ,我在编写本主题代码的时候,并没有参考这个主题,但是当我想要写一下本主题的配置的时候,发现这个主题的wiki已经说得很详细了。表示感谢。

其他

这几年玩hexo博客系统,也写了很多相关的文章,从写过的这些文字也能够看出来个人的进步。 如果你第一次使用hexo搭建博客,无论是技术人,还是文艺青年,可以参考阅读下面的文章

当然,前面是我个人的总结,我认为值得推荐的教程:

史上最详细的Hexo博客搭建图文教程

一些扯淡的话

一些扯淡的话

Q&A

1.国际化是如何配置的?为什么你的博客界面是中文的,我使用你这个主题,我的博客界面上还有很多英文或乱码显示?

博客的国际化这一块,是在hexo 博客系统根目录下的_config.yml文件中进行配置的,在我的博客中默认已经有了这个配置,因此之前也并未在此说明,如果你的_config.yml 文件中没有这方面的配置,请自行添加,例如:

language: zh-CN

则,当前博客页面上的一些控件,例如上下页信息,发布时间等信息都将以简体中文的方式来显示。具体的所有语言类型可以在主题目下的languages文件夹下查看,每一个文件名即为一种语言选项。如果您未在博客系统根目录下的_config.yml 中设置语言选项,则默认将以英文的方式来显示控件信息。

我第一次接触Hexo博客系统,我也不是学习计算机的,我就想用你的主题尽快配置出来一个美观好用的博客,你有没有文档方便我查看?

我上面也已经说了,主题配置文件在主目录下的_config.yml,请根据自己需要修改使用。这个这个文件里的每一项都有详细的说明,只要按照规则去配置,就能很快地搞出一个美观的博客。

当然,如果你是第一次接触Hexo博客系统,可以一开始配置Hexo 就会很费时,因为我也是这么过来的,也推荐你看看我上面提到的一些文章。

首页的订阅我,关于我在配置文件里都有设置,为什么点击之后是404?

情况是这样的,我的推荐是你能够支持RSS的订阅和一个「关于我」的界面展示。

RSS订阅要求安装Hexo插件,我也推荐你能够安装sitemap插件,这也有助于你的站点更好地被搜索引擎检索,这方面的内容,推荐你看一下站点地图 以及Hexo教程4 这两篇文章,总结而言,安装起来并不复杂。

而「关于我」的界面,也需要你自己写一个「关于我」的页面,不然当然不可能凭空产生一个这样的页面。 需要在博客根目录下的source文件夹下建立一个about文件夹,在这里面添加一个index.md文件,在里面输入你自定义的个人介绍内容。

具体也可以看我下面的这个演示

为什么我的本地图片不能正常显示?

从上图也可以看出来,支付宝的图片位置在博客根目录source文件夹下的img文件夹内,而非theme文件夹下的source文件夹。我给定的模板中,支付宝图片位置与其他图片位置不同,你也可以修改图片位置。

当加上引号之后,是相对于主题目录下source文件夹而言的路径设置

比如:headerpic: "/img/logo.jpg"

则你需要把你的logo.jpg 文件放到 \hexo(博客根目录)\themes\olive\source\img

而如果是 alipay: /img/alipay.jpg

你需要把你的图片放到 \hexo(博客根目录)\source\img 目录之下

出现404就算了,为什么页面还这么丑。

如果出现了404,如果你使用的是Github pages,那么404将会显示Github 官方的404页面,我推荐使用腾讯公益404,还是我上图中的示例,你应该已经看到了在source文件夹中,有一个404.md文件,如果你的这个文件夹下没有这个文件,请创建之,在这个404.md 文件内添加这样一段代码:

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>

然后为了测试你的这个404页面是否正常,如果是在本地,请访问 localhost:4000/404.html ,如果已经部署完毕,请访问你的网址后缀404.html ,比如我的博客: hktkdy.com/404.html

目录结构

│  LICENSE
│  readme.md
│  _config.yml
│
├─languages
│      default.yml
│      fr.yml
│      nl.yml
│      no.yml
│      ru.yml
│      zh-CN.yml
│      zh-TW.yml
│
                   
layout                          
 │  archive.ejs                 
 │  category.ejs                
 │  index.ejs       首页            
 │  layout.ejs                  
 │  page.ejs                    
 │  post.ejs                    
 │  tag.ejs                     
 │                              
 ├─_partial                     
 │  │  after-footer.ejs          
 │  │  archive-post.ejs         
 │  │  archive.ejs              
 │  │  article.ejs              
 │  │  footer.ejs    footer模板           
 │  │  friends.ejs   右侧友情链接模板           
 │  │  google-analytics.ejs     谷歌分析模板
 │  │  head.ejs      网站头部引用模板           
 │  │  header.ejs    网站头部导航栏模板           
 │  │  iewarn.esj    低版本ie浏览器警告信息模板           
 │  │  share.ejs     文章分享模板           
 │  │  social.ejs    右侧社交网路信息模板           
 │  │                           
 │  └─post                      
 │   ---    category.ejs  分类      
 │   ---    copyright.ejs 文章版权声明      
 │   ---    date.ejs      日期      
 │   ---    disqus.ejs    第三方评论disqus      
 │   ---    money.ejs     打赏      
 │   ---    nav.ejs       导航       
 │   ---    tags.ejs      标签      
 │   ---    title.ejs     文章题目      
 │                              
 └─_widget                      
     --- archive.ejs            
     --- category.ejs           
     --- recent_posts.ejs       
                                         
source    资源文件夹                   
  │  favicon.png    网站标题栏上的图标            
  │                             
  ├─css                         
  │  │  night.styl   夜晚模式样式           
  │  │  style.styl   主样式           
  │  │  _variables.styl   styl变量     
  │  │                          
  │  ├─fonts   本地字体文件夹                 
  │  │      fontawesome-webfont.
  │  │      fontawesome-webfont.
  │  │      fontawesome-webfont.
  │  │      fontawesome-webfont.
  │  │      FontAwesome.otf     
  │  │                          
  │  └─_partial                 
  │          archive.styl   首页样式    
  │          article.styl   文章页面样式    
  │          copyright.styl 版权说明样式    
  │          footer.styl    底部footer样式    
  │          header.styl    头部导航样式    
  │          highlight.styl 代码高亮样式    
  │          iewarn.styl    低版本ie浏览器警告样式    
  │          money.styl     打赏功能样式    
  │          share.styl     分享功能样式    
  │                             
  ├─img                         
  │  ---    bottom.png   文章页面分割线图片          
  │  ---    logo.jpg     网站logo图片           
  │                             
  └─js                          
       ---   iewarn.js    低版本ie浏览器检测脚本         
       ---   lightmode.js 灯光模式切换脚本         
       ---   qrcode.js    网站链接二维码生成脚本         
       ---   script.js    网站主js脚本