Giter Site home page Giter Site logo

huno's Introduction

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)和这个冲突,可以选更加合适的名称:blush:。

评论系统

将评论系统(例如Disqus、多说、友言、畅言等)提供的代码片段粘贴在layout/_partials/comments.js中即可。

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.xyz/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.xyz/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的第一行。

License

Creative Commons Attribution 4.0 International

huno's People

Contributors

letiantian avatar nfs1a avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

huno's Issues

代码高亮问题;

代码行数只有 第一行 显示行数。
另外没有高亮。。。一个颜色。

还有个问题就是,能不能加入上下篇的功能

theme doesn't work with hexo 2.8.3

When I install the theme and run hexo server I get this (but only when I actually visit http://localhost:4000/):

 ~/test-hexo  hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
TypeError: Cannot read property 'substring' of null
    at eval (eval at <anonymous> (/Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:66:30)
    at eval (eval at <anonymous> (/Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:67:4294)
    at /Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:255:15
    at Object.exports.render (/Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:293:13)
    at /Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/index.js:5:14
    at Domain.<anonymous> (/usr/local/lib/node_modules/hexo/lib/extend/renderer.js:78:38)
    at Domain.run (domain.js:197:16)
    at store.(anonymous function) (/usr/local/lib/node_modules/hexo/lib/extend/renderer.js:77:9)
    at /usr/local/lib/node_modules/hexo/lib/core/render.js:96:9
    at fn (/usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:641:34)
TypeError: Cannot read property 'substring' of null
    at eval (eval at <anonymous> (/Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:66:30)
    at eval (eval at <anonymous> (/Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:67:4294)
    at /Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:255:15
    at Object.exports.render (/Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:293:13)
    at /Users/johndoe/test-hexo/node_modules/hexo-renderer-ejs/index.js:5:14
    at Domain.<anonymous> (/usr/local/lib/node_modules/hexo/lib/extend/renderer.js:78:38)
    at Domain.run (domain.js:197:16)
    at store.(anonymous function) (/usr/local/lib/node_modules/hexo/lib/extend/renderer.js:77:9)
    at /usr/local/lib/node_modules/hexo/lib/core/render.js:96:9
    at fn (/usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:641:34)

Let me know if you can help.

替换主题后报错...

安装hexo 以后,使用默认主题能够运行,将hexo配置文件中主题名字改为huno,发生错误

Unhandled rejection TypeError: /Users/ccguo/Documents/jekyll/blog_hexo/themes/huno/layout/layout.ejs:68
66|
67|

68| <%- partial('_partials/side-panel') %>
69|
70|


71|

/Users/ccguo/Documents/jekyll/blog_hexo/themes/huno/layout/_partials/side-panel.ejs:46
44|
45|

46| <%- partial('_partials/social') %>
47|
48|
49|

/Users/ccguo/Documents/jekyll/blog_hexo/themes/huno/layout/_partials/social.ejs:52
50|


    51|

    52| <% if (config.social.github){ %>
    53|
    54|


  • 55|

  • Cannot read property 'github' of undefined

Hope to support youyan

As Duoshuo will be no longer available since 2017.07.01, I hope that you can add a script for youyan, Thx

关于自己设定的问题

我想在网页加一个背景音乐,用的是audio标签,让后我把这个标签加在本地的网站首页文件里面,因为我想每次部署到网页时都可以有,可是当我部署上去后又恢复了。
请问这个怎么解决?谢谢!

关于Social Icon

您好想问下如何添加social icon,我按照您的那个弄了但是没有显示,想问下需要在哪里配置连接呢?

如何创建 about 页面?

如题,demo 里面没有 about 页面的范例,搜索也没有搜到,因此不知从哪里下手。
是建在单独的 about 文件夹然后放进根目录?还是单一个 html 页面?还是怎样?
谢谢。

关于标签

求教:
Archive页面的标签(链接)是如何做的?

十分感谢!

关于在Mac上生成的public文件的一些错误情况

1、在生成public文件后,打开index.html文件直接出线侧图页面,无法出现全图首页。
2、加载的样式表和js文件路径错误,自动生成的"/css/style.css"等应为"css/style.css",js与之相同。
3、点击HEXO,本来应该出现全图首页,却直接跳转到了电脑的根目录,考虑是"href=/"引起的。
以上问题仅在搭载OS X的MacBook上的chrome浏览器中确认,均未尝试在其他平台复现。

更新后,没有目录了

您好,今天下午更新之后,目录不见了。。另外还有一个问题是,标签,分类怎么无法显示呢?

侧边栏问题

请问hexo主题可以在目录显示两栏,即再加一个站点概览吗?

建议

首先非常喜欢这一款hexo主题。个人觉得首页文章标题的字体以及UI有必要优化一下。还有外联比如GItHub的样式,是否可以改成跟其他“首页”、“关于”等一样的椭圆风格?

如何设置Disqus?

主题很漂亮,风格很喜欢,但是我开启了Disqus评论,不知道如何设置Disqus,比如设置成中文等等?

在主页的时候会显示滚动条

image

虽然这个地方是把窗口拉小了才这样,但是post比较多的时候正常的窗口大小也会这样子了,感觉非常难看,希望让滚动条仅在博客页面展开之后显示。

这个问题好像在原版的uno上就有,找了很多port发现只有这一个没有问题:https://github.com/Kikobeats/uno-zen 。本来想自己修但发现还是不太会的样子,希望能帮忙修复一下啦。

Recommend changing the readme file

Hi, I love the template you made, but there are some small problems I run into while installing it.

First of in your installation guide you say to

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

and then to alter the theme setting in the _config.yml file to huno.

This doesn't work because we named the theme directory to /modernist.
So we have to either change the theme setting to modernist, or change the theme directory name tu huno.
Is a small issue but it can lead to confusion for people who unfamiliar with hexo.

The other isio I ran into is the one who has been already closed.
I got the error message because my site description was empty.

TypeError: /Users/yangjie/Developer/blog/themes/huno/layout/layout.ejs:7
   5|     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6| 
>> 7|     <%
   8|     var title = page.title;
   9|     var description = page.description || '';
   10| 

I recommend making note in the readme file so that people know the problem.

Couldn't work with Hexo 2.7.1

I try to use this theme with Hexo 2.7.1, but there is an error. Do you know how to resolve it?

TypeError: /Users/yangjie/Developer/blog/themes/huno/layout/layout.ejs:7
   5|     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6| 
>> 7|     <%
   8|     var title = page.title;
   9|     var description = page.description || '';
   10| 

Cannot call method 'substring' of null
   at eval (eval at <anonymous> (/Users/yangjie/Developer/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:65:31)
   at eval (eval at <anonymous> (/Users/yangjie/Developer/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:66:4294)
   at /Users/yangjie/Developer/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:255:15
   at Object.exports.render (/Users/yangjie/Developer/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:293:13)
   at /Users/yangjie/Developer/blog/node_modules/hexo-renderer-ejs/index.js:5:14
   at store.(anonymous function) (/usr/local/lib/node_modules/hexo/lib/extend/renderer.js:67:27)
   at /usr/local/lib/node_modules/hexo/lib/core/render.js:96:9
   at fn (/usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:641:34)
   at Object._onImmediate (/usr/local/lib/node_modules/hexo/node_modules/async/lib/async.js:557:34)
   at processImmediate [as _immediateCallback] (timers.js:336:15)

不能添加网站图标呢

huho/_config.yml favicon: /favicon.png 有了。
favicon.png 放hono目录还是hono/source都不行。
是还差什么吗?

执行hexo generate命令抛出错误

您好:
最近在使用hexo搭建自己的站点,看到您的huno主题,感觉非常漂亮。但是在自己操作的过程中,执行hexo generate命令抛出错误:

`
Unhandled rejection TypeError: /home/liuxh/work/projects/blog/themes/huno/layout/layout.ejs:7
5|
6|

7| <%
8| var title = page.title;
9| var description = page.description || '';
10|

Cannot call method 'substring' of null
at eval (eval at (/home/liuxh/work/projects/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), :65:31)
at eval (eval at (/home/liuxh/work/projects/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), :66:4294)
at /home/liuxh/work/projects/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:255:15
at Object.exports.render (/home/liuxh/work/projects/blog/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:293:13)
at Hexo. (/home/liuxh/work/projects/blog/node_modules/hexo-renderer-ejs/index.js:5:14)
at Hexo.tryCatcher (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/util.js:26:23)
at Hexo. (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/method.js:15:34)
at /home/liuxh/work/projects/blog/node_modules/hexo/lib/hexo/render.js:51:21
at tryCatcher (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/util.js:26:23)
at Promise._settlePromiseFromHandler (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/promise.js:503:31)
at Promise._settlePromiseAt (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/promise.js:577:18)
at Promise._settlePromiseAtPostResolution (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/promise.js:244:10)
at Async._drainQueue (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/async.js:128:12)
at Async._drainQueues (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/async.js:133:10)
at Async.drainQueues (/home/liuxh/work/projects/blog/node_modules/hexo/node_modules/bluebird/js/main/async.js:15:14)
at process._tickCallback (node.js:415:13)
`
因为我对ejs不是很了解,所以能否请您帮忙解答下。
我使用的hexo是最新的3.1.0。看到您在说明中使用的版本是2.5.7,请问是否是hexo版本变化引起的问题?

fancybox支持相关

文章内的图片不支持点击放大, 😥 尝试添加fancybox插件 但是没有头绪。

received an unhandled rejection TypeError after update to "hexo": "^3.1.0"

Unhandled rejection TypeError: /Users/pokim/Project/hexoFolder/themes/huno/layout/layout.ejs:6
4|
5|
6| <%
7| var title = page.title;
8| var description = page.description || '';
9|

Cannot read property 'substring' of null
at eval (eval at (/Users/pokim/Project/hexoFolder/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), :66:30)
at eval (eval at (/Users/pokim/Project/hexoFolder/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:242:14), :67:4294)
at /Users/pokim/Project/hexoFolder/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:255:15
at Object.exports.render (/Users/pokim/Project/hexoFolder/node_modules/hexo-renderer-ejs/node_modules/ejs/lib/ejs.js:293:13)
at Hexo. (/Users/pokim/Project/hexoFolder/node_modules/hexo-renderer-ejs/index.js:5:14)
at Hexo.tryCatcher (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/util.js:26:23)
at Hexo. (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/method.js:15:34)
at /Users/pokim/Project/hexoFolder/node_modules/hexo/lib/hexo/render.js:51:21
at tryCatcher (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/util.js:26:23)
at Promise._settlePromiseFromHandler (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/promise.js:503:31)
at Promise._settlePromiseAt (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/promise.js:577:18)
at Promise._settlePromiseAtPostResolution (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/promise.js:244:10)
at Async._drainQueue (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/async.js:128:12)
at Async._drainQueues (/Users/pokim/Project/hexoFolder/node_modules/hexo/node_modules/bluebird/js/main/async.js:133:10)
at Immediate.Async.drainQueues as _onImmediate
at processImmediate as _immediateCallback

希望能增加的点

能否在新版本中增加一个站内搜索功能?
能否增加额外的社交,比如:微博、简书、微信、qq之类的?

移动端兼容性问题

IPhone中 Safari在首页,点击菜单首页后,跳转到#blog页面,但是菜单的列表没有消失,还在页面上

请问下怎么添加网站图标

我在_config.yml看到了# Site faviconfavicon: favicon.png,
并且尝试把一个图片的文件名改为favicon.png并放在\themes\huno\source\images目录下 但不起作用

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.