GithubHelp home page GithubHelp logo

huno's Introduction

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

Huno

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

Demo

Huno's demo

安装

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

修改Hexo的配置文件_config.xml

theme: huno

更新

$ cd themes/huno
$ git pull

兼容性

在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

归档页面

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

在主题的配置文件_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)和这个冲突,可以选更加合适的名称:blush:。

github_repo_widget

可视化显示github中的项目。

官网:GitHub-jQuery-Repo-Widget

评论

支持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中添加更多的图标。

网站统计

将网站统计(如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 = '';
    }
  %>

huno's People

Contributors

letiantian avatar nfs1a avatar

Watchers

James Cloos avatar yangphere avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.