Giter VIP home page Giter VIP logo

hexo-theme-yilia's Introduction

hexo-theme-yilia

Yilia 是为 hexo 2.4+制作的主题。 崇尚简约优雅,以及极致的性能。 你可以点击 我的博客 查看效果。

如果想体验手机浏览效果,可以扫一下二维码:

litten-qrcode

—————————————————————

关于主题:

  1. 崇尚简约
  2. 追求移动端体验
  3. 希望把加载速度做到极致(努力中)
  4. 让大家把注意力放到内容上。这是本主题设计初衷
  5. 主题不支持IE6,7,8。以后也不会

近期更新(2017.07.09):

2017.07.09

  1. 返回顶部
  2. TOC目录

2016.12.04

  1. 打赏
  2. 搜索
  3. “更好的”标签云
  4. “更好的”分享
  5. 一些动画

计划中:

  1. 移动端优化

一、外观

####常规

常规

####手机

手机

####ipad横竖屏切换

ipad横竖屏切换

二、开发者

为了性能和开发工程化考虑,Yilia需要使用webpack进行构建生成。

如果您对主题有一些定制化的需求,请参考wiki《Yilia源码目录结构及构建须知》

三、使用

安装

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

配置

修改hexo根目录下的 _config.ymltheme: yilia

更新

cd themes/yilia
git pull

四、配置

主题配置文件在主目录下的_config.yml,请根据自己需要修改使用。 完整配置例子,可以参考我的博客备份

# Header

menu:
  主页: /
  随笔: /tags/随笔/

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:[email protected]"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: 

# Content

# 文章太长,截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: 

# 目录
# 目录设定:0-不显示目录; 1-文章对应的md文件里有toc:true属性,才有目录; 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置,如果你的目录标题习惯有标号,置为true即可隐藏hexo重复的序号;否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录,不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar:

#是否开启分享
share_jia: true

#评论:1、多说;2、网易云跟帖;3、畅言;4、Disqus;5、Gitment
#不需要使用某项,直接设置值为false,或注释掉
#具体请参考wiki:https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段,优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改,除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false

# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  友情链接1: http://localhost:4000/
  友情链接2: http://localhost:4000/
  友情链接3: http://localhost:4000/
  友情链接4: http://localhost:4000/
  友情链接5: http://localhost:4000/
  友情链接6: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家

hexo-theme-yilia's People

Contributors

52cik avatar bitmingw avatar douxingxiang avatar happystraw avatar jasonmrazw avatar linhe0x0 avatar litten avatar pengloo53 avatar sampwood avatar sherleysong avatar sssvip avatar tlongzou avatar weivincewang 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  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

hexo-theme-yilia's Issues

tags和category在全文显示的文章中出现错位

首先感谢 @litten 对主题做出的改进!

我在测试时发现了一个bug. 如这篇博客的首页,在PC浏览器中yilia主题把文章的tags和category放在了每篇文章的末尾。对于使用<!-- more -->在首页只显示摘要的文章没有什么问题,对全文显示的文章会出现tags和category与文字内容重叠的情况。

建议您修正一下程序逻辑,在没有<!-- more -->的情况下依旧在首页的每篇文章生成下划线,用于放置tags和category.

多说评论配置有bug

/themes/yilia/layout/_partial/post/duoshuo.ejs这个文件里

<div class="ds-thread" data-thread-key="<%=key%>" data-title="<%=title%>" data-url="<%=url%>"></div>

这里的<%=key%>我不太明白是从哪里获取的,如果建两个page(hexo new page)A和B,这两个page的key是一样的,这就导致A页面的评论会出现在B页面,我暂时把这句配置改为了

<div class="ds-thread" data-thread-key="<%=key%><%=url%>" data-title="<%=title%>" data-url="<%=url%>"></div>

二(三、四……)级列表css有问题

md:

+ 我是一级列表1
+ 我是一级列表2
    + 我是二级列表1
    + 我是二级列表2

html:

<ul>
  <li>我是一级列表1</li>
  <li>我是一级列表2
    <ul>
      <li>我是二级列表1</li>
      <li>我是二级列表2</li>
    </ul>
  </li>
</ul>

页面显示
qq 20141110004547

代码高亮块在窄屏模式下几乎不能左右拖动

img20150107_142432
如上图所示,代码块在窄屏模式下几乎没法左右拖动,试了很久,偶尔能滑动下,测试的手机浏览器是chrome与Safari

在Pad下宽屏模式,这两个浏览器显示的代码块都能够正常滑动

PS:非常感谢你提供这么漂亮的主题

和hexo-console-optimize配合使用的问题

layout/_partial/post/nav.ejs里边的这两行直接写<和>,会导致hexo-console-optimize parse失败,改用<和>吧。。。

...
<strong class="article-nav-caption"><</strong>
...
<strong class="article-nav-caption">></strong>
...

移动端显示时遇到的几个问题

作者,你好:
很喜欢你的这个主题,很简约,在使用的过程中,遇到几个问题,前2个问题都是在移动端时候适配的问题,我也尝试修复,但是没能解决 :(

1.在手机端(或者直接将浏览器宽度调至最小)回展现出移动端的样式来,但是发现此时用fancybox图片展示的时候,如果遇到图片原始长度较长,就不能够正常显示(手机端效果更明显),下面是我遇到的情况截的图,我看到了你的博客也会出现这样的问题。
586dec48-b919-48fb-af8a-c3b146add68b

2.用平板衡平的时候,在主页显示文章标题的时候,标题过长会覆盖后面的日期显示。

de30d8da-f09c-4088-971d-14a816e20835

3.主题在高清屏(如Retina)上显示是,有些图片(如Subnav和多说分享)由于像素问题会失真,我尝试使用FontAwesome来解决。

以上问题请作者赐教,我尝试在本地解决,然后pull request,谢谢。

列表下的代码块会有边框

如果在列表下添加块级代码,代码会变成这样:
vnlpp30u 7_q i c5 9awb

对应的markdown文件,比如

1. 安装Nodejs
2. 安装Chocolatey

        @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

需要在highlight.styl文件中

.article-entry
  pre, code
    font-family: font-mono
    font-size: 1em
  code
    background: color-background
    text-shadow: 0 1px #fff
    padding: 0 0.3em
    border-radius: 0.4em
  pre
    @extend $code-block
    code
      background: none
      text-shadow: none
      padding: 0
      border: none //添加这一行

https问题

由于调用百度的jquery cdn不支持https导致https下访问内容空白,更改支持https的cdn后正常

多说配置

您好,非常喜欢您做的这个主题,现在正在使用,嘿嘿。
在主题的配置文件_config.yml中,“duoshuo”的默认值是“true”,但是上面写的注释是“填写你在多说申请的项目名称”,请问这是什么意思?

代码框样式是否可配置?

昨天更新了hexo3.0,顺便更新了yilia,发现代码框的样式变了,请问作者这个样式可以在配置中指定么?我个人比较喜欢原来的黑色背景样式。
代码

多级列表只显示为一级列表?

hi litten,我使用了hexo-render-pandoc,多级列表如下:

多级列表

而生成的html只有一级列表:

显示效果

试过直接用pandoc生成html,是正常的。已经更新了主题,还是一样。请问这是什么原因呢:-*?

希望字体能做下调整

感觉整体字体有点小,不知道不能改成像pacman这样的字体(不一定要这种字体)以及整体的字体大小。还有一些样式,比如h1的标题的上下边距pacman就处理很好,不会显的文章很挤,我不知道这样的描述对不对
imssee

几个常用的功能

  • 统计功能(百度统计、Google Analytics)
  • 更多的社交账号(知乎,email等)
  • MathJax支持
  • 滚动到页面顶端

是否可以添加这些模块?感觉都比较常用,也不会影响到界面的简洁。

ie10 以下显示问题

你好,非常感谢你的主题,是不是ie10以下显示有问题啊,用ie11显示是正常的。

废弃不用的tags,在页面中未自动删除

你好,litten。很赞的主题,感谢你的分享。

我发现一些文章使用了A作为tag,后来使用删除A作为tag,使用了B。在生成的页面中,A、B均在标签页中显示。实际上A作为tag已经没有对应的文章了,点击后404。

有可能是我的使用姿势不对,请帮忙看看,谢谢。

Markdown语法问题

您好,我想问一下主题对Markdown语法的支持里:
有序列表变成了无序列表,无序列表就不支持了,请问为什么?
bug

mathjax解析出错

行内解析是正常的,但是
$$\frac{\partial u}{\partial t}
= h^2 \left( \frac{\partial^2 u}{\partial x^2} +
\frac{\partial^2 u}{\partial y^2} +
\frac{\partial^2 u}{\partial z^2}\right)$$
就无法解析了。。
不知道是什么原因,博客地址http://lan2720.github.io/

在寬螢幕下的優化

在螢幕太大、太寬的時候,頁面的寬度能不能做些控制?不然左到右太遠的話,閱讀起來不是很舒服
也許有點類似自動 wrap line?
 
image

如何截取文章长度

文章列表页显示的文章内容太长了,请问怎么在列表页截取文章内容,显示文章的预览

首页文章列表问题

堂主你好,请问如何让首页的文章列表中的单个文章不显示全部?
我用你的theme后,现在首页把所有文章都显示在一个页面里了,显得体验不好,截取一部分文字就好,后面显示more,请问有参数可以设置吗?

搜索框

hello,你好,非常感谢你的主题,我想问下怎样恢复搜索框呢?个人感觉以后博文太多没有检索的话不是很方便。谢谢!

Markdown解析有问题

非常感谢你分享主题,主题很好看。只是markdown有些语法解析的时候格式会出现问题,但是用其他主题的时候解析正确。所以应该不是marked的问题。

比如:一级列表和二级列表混用,markdown解析会出问题。

情况一:

比如我这样写markdown:
2014-10-26 8 06 27

使用主题该主题,解析出来显示成这样:
2014-10-26 8 03 30

但是使用Mou(Mac下一个markdown编辑器)解析时,是这样:
2014-10-26 8 03 35

情况二:

2014-10-26 8 12 40

主题解析:
2014-10-26 8 13 03

Mou解析:
2014-10-26 8 13 22

情况三:

2014-10-26 8 14 36

主题解析:
2014-10-26 8 15 11
两个一级列表的编号都是1

Mou解析:
2014-10-26 8 15 44

请问我如何写markdown语法才能出来以上的样式?谢谢!

超长行内代码不会自动换行

截图,
2015-03-14 21 01 24
对应markdown文件片段:

位置`/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.9.sdk`

可以修改article.styl

p code,li code{
    padding: 1px 3px;
    margin: 0 3px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    font-family: font-mono;
    word-wrap: break-word;//自动换行
  }

duoshou评论data-thread-key

这个key在什么地方进行设置的?应为我当前有一个文章集成后不知道莫名的有19条评论。应该调用的key不对。希望解答一下

谢谢

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.