A responsible theme for Hexo
CSS HTML JavaScript
Latest commit 72d31ef May 13, 2016 @letiantian background image
Permalink
Failed to load latest commit information.
languages Create zh-TW.yml Dec 15, 2015
layout add china social icon Jan 21, 2016
source add china social icon Jan 21, 2016
README.en.md rm Update section Jan 20, 2016
README.md background image May 13, 2016
_config.yml fit mathjax https access Nov 29, 2015
cs-icon.png add china social icon Jan 21, 2016
demo.gif .~! Nov 28, 2015

README.md

Huno

Huno是为Hexo编写的一个响应式的主题,该主题基于Uno

Demo

Huno's demo

安装

$ git clone git://github.com/someus/huno.git themes/huno

修改Hexo的配置文件_config.xml

theme: huno

兼容性

在Hexo 3.1.1测试正常。

配置示例

# Header
menu:
  首页: /#blog
  关于: /about
  归档: /archive

# Site favicon
favicon: /favicon.png

# Site logo
# logo: /avatar.png

# Enable Mathjax
mathjax: true

# Enable awesome-toc
awesome_toc: true

# Enable githubRepoWidget
github_repo_widget: false

menu中定义/#blog是必须的,示例中的/about/archive是两个页面。/archive会在下面的归档页面中介绍。

mathjax:

数学公式支持。其设置(layout/_scripts/mathjax.ejs)如下:

$(document).ready(function(){
    MathJax.Hub.Config({ 
        tex2jax: {inlineMath: [['[latex]','[/latex]'], ['\\(','\\)']]} 
    });
});

官网:mathjax

awesome_toc:

为文章生成目录。

官网:awesome-toc

github_repo_widget:

可视化显示github中的项目。

官网:GitHub-jQuery-Repo-Widget

侧边栏图片

侧边栏图片URL定义在source/css/uno.css中下面的这段代码中:

.panel-cover {
  display: block;
  position: fixed;
  z-index: 900;
  width: 100%;
  max-width: none;
  height: 100%;
  background: url(../images/background-cover.jpg) top left no-repeat #666666;
  background-size: cover; }

可以看出图片路径是source/images/background-cover.jpg。可以根据需要替换成不同的图片,或者修改图片URL。例如修改成CDN中的某个图片(#28):

background: url("//img.alicdn.com/tps/TB1UC8nJVXXXXbRXpXXXXXXXXXX-1920-1200.jpg") top left no-repeat #666666;

归档页面

归档页面会显示分类、标签云以及基于日期的归档。

在主题的配置文件_config.yml中:

# Header
menu:
  首页: /#blog
  关于: /about
  归档: /archive

创建新的page:

$ hexo new page archive
$ cd source/archive
$ vim index.md

内容修改为:

title: 归档
layout: page-archive
---

浏览器访问http://127.0.0.1:4000/archive/即可。

!! hexo 默认有一个/archives,如果您认为归档页面的url(/archive)和这个冲突,可以选更加合适的名称😊

评论

支持Disqus和多说,在Hexo配置文件_config.yml中设置名称即可,例如:

# Disqus
disqus_shortname: letian

# Duoshuo
duoshuo_shortname: letian

!!! 如果两个都设置,则两个评论工具都会显示。

Social Icon

默认提供了Github的图标,Github用户名请在Hexo的配置文件_config.yml中配置,例如:

# Social
social:
  github: someus

可以根据需要在layout/_partials/social.ejs中添加更多的图标。

China Social Icon

这套字体来自 设计素材:国内常用社交图标的web字体, 版权归原作者所有。在huno中CSS文件做了些修改。

这套字体和上面Social Icon的设计得并不一样,如果混用,排版效果会略差。例如,在layout/_partials/social.ejs加上:

<li class="navigation__item">
  <a href="" title="">
    <i class='icon cs-icon-douban'></i>
    <span class="label">Douban</span>
  </a>
</li>

<li class="navigation__item">
  <a href="" title="">
    <i class='icon cs-icon-weibo'></i>
    <span class="label">Weibo</span>
  </a>
</li>

效果如下:

字体文件位于source/fonts/china-social/中,对应的css文件是source/css/china-social-icon.css

网站统计

将网站统计(如Google analysis、CNZZ、百度统计等)代码放入layout/_scripts/site-analytics.ejs即可。

如何将Huno生成的静态网站放在某网站子目录

例如要将其放入http://hi.letiantian.me/huno/下,则需要:

修改Hexo配置文件_config.yml:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://hi.letiantian.me/huno
root: /huno/

修改主题的配置文件_config.yml:

# Header
menu:
  首页: /huno/#blog
  关于: /huno/about
  归档: /huno/archive

# Site favicon
favicon: /huno/favicon.png

修改huno/source/js/main.js:

if (window.location.pathname != "/") {
  $('.panel-cover').addClass('panel-cover--collapsed');
}

修改为

if (window.location.pathname != "/huno/") {
  $('.panel-cover').addClass('panel-cover--collapsed');
}

修改huno/layout/_partials/side-panel.ejs:

<% for (var i in theme.menu){ %>
  <%
    if (theme.menu[i]+'' == '/#blog') {
      nav_btn_class = 'blog-button';
    } else {
      nav_btn_class = '';
    }
  %>

修改为:

<% for (var i in theme.menu){ %>
  <%
    if (theme.menu[i]+'' == '/huno/#blog') {
      nav_btn_class = 'blog-button';
    } else {
      nav_btn_class = '';
    }
  %>

其他

如果在中国大陆使用该主题后,访问速度变慢,可以考虑注释掉source/css/uno.css的第一行。