介绍

Ayer 是一个干净且优雅的Hexo主题,自带响应式,加载速度很快,该有的功能都有,可配置项也很多,非常适合作为你的博客主题,主题内还附送了6张精美的高清壁纸。欢迎使用和Star支持,如果你在使用过程中有任何疑问或者建议,欢迎联系我!

项目地址

效果预览

中文说明

特性

  • 干净且优雅,文章内容美观易读
  • 首页封面全屏平铺,扁平化设计,更加高大上
  • 响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页封面和文案可以任意更换,主题内附送6张精美高清壁纸
  • 时间轴式的归档页
  • 侧边栏可以点击显示和隐藏
  • 关于我的页面用文章,自定义性更强
  • 支持文章置顶和文章打赏
  • 支持 MathJax
  • TOC 目录在文章页悬浮,跳转更方便
  • 可设置阅读文章时做密码验证
  • ValineGitalk评论模块(推荐配合leancloud使用 Valine
  • 集成了不蒜子统计和CNZZ(友盟统计)等统计功能

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

安装

$ git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

修改

将博客根目录下的 _config.yml 里的 theme 值修改成 ayer

theme: ayer

更新

cd themes/ayer
git pull

主题配置

ayer目录下的 _config.yml

# 侧边栏菜单
menu:
主页: /
目录: /archives
摄影: http://shenyu-vip.lofter.com
旅行: /tags/旅行/
关于我: /2019/about # 网站图标和侧边栏logo
favicon: /favicon.ico
logo: /images/ayer-side.svg # 封面配置
# enable-是否启用封面;path-封面背景图;logo-封面logo
cover:
enable: true
path: /images/cover1.jpg # images目录下附送多张美图,可更换
logo: /images/ayer.svg # 如果不要直接设置成false # 页面顶部进度条
progressBar: ture # 文章配置
# 文章太长,截断按钮文字(在需要截断的行增加此标记:<!--more-->)
excerpt_link: 阅读更多...
# 文章分享文字
share_text: 分享
# 分页文字
nav_text:
page_prev: 上一页
page_next: 下一页
post_prev: 上一篇
post_next: 下一篇 # 文章页是否显示目录
toc: true # 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '请我喝杯咖啡吧~'
# 支付宝二维码图片地址,跟你设置logo的方式一样。比如:/images/alipay.jpg
alipay: /images/alipay.jpg
# 微信二维码图片地址
weixin: /images/wechat.jpg # 是否启用搜索
search: true # RSS订阅(先安装hexo-generator-feed插件,再去博客根目录config进行配置)
rss: /atom.xml # 评论:1、Valine(推荐);2、Gitalk # 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
# 启用Valine必须先创建leancloud应用, 获取 id|key 填入即可
leancloud:
enable: true
app_id: #
app_key: #
# Valine配置
valine:
enable: true # 是否启用
avatar: mp # 头像样式(https://valine.js.org/avatar.html)
placeholder: 给我的文章加点评论吧~ # placeholder # 2、Gitalk(https://github.com/gitalk/gitalk)
gitalk:
enable: false # true
clientID: # GitHub Application Client ID
clientSecret: # Client Secret
repo: # Repository name
owner: # GitHub ID
admin: # GitHub ID # fancybox(仅用于相册展示,若需要可配置albums)
fancybox: true # 访问量统计(不蒜子)
busuanzi:
enable: true # 友盟cnzz统计(url填js代码src链接)
cnzz:
enable: true
url: # # 数学公式
mathjax: true # 网站成立年份(默认为 2019,若填入年份小于当前年份,则显示为 2018-2019 类似的格式)
since: 2019 #是否显示页脚信息(建议保留,有助于本主题的推广)
pageFooter: true

插件

  • hexo-generator-search 搜索

    $ npm install hexo-generator-searchdb --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里(注意不是ayer目录下的):

    # Hexo-generator-search
    search:
    path: search.xml
    field: post
    format: html
  • hexo-generate-feed RSS

    $ npm install hexo-generator-feed --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里(注意不是ayer目录下的):

    feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: ' '
    order_by: -date
  • hexo-generator-index-pin-top

    $ npm uninstall hexo-generator-index --save
    $ npm install hexo-generator-index-pin-top --save

相册

需要在文章顶部配置

---
title: Gallery albums: [
["img_url","img_caption"],
["img_url","img_caption"]
]
---

文章目录

用Tocbot解析文章标题并生成目录

  • 将以下配置复制到你ayer目录下的 _config.yml 里:

    # Toc
    toc: true
  • 当然你也可以选择关闭:

    toc: false

推荐一款好看的Hexo主题Ayer的更多相关文章

  1. php编辑器notepad++ 推荐一款非常好看主题和字体

    php编辑器notepad++ 推荐一款非常好看主题和字体1.主题名称:Obsidian 2.字体字号:Courier New 10 3.设置方法:设置---语言格式设置---选择主题,同时勾选“使用 ...

  2. 推荐5款简洁美观的Hexo主题

    2018-11-17 17:15:46 原文地址:http://www.izhongxia.com 以下是 <hexo 主题列表> 中挑选出来一些比较简洁美观的主题(存在个人主观意识,请勿 ...

  3. 推荐5 款WordPress主题后台选项开发框架

    在开发WordPress 主题的时候,借用成熟的WordPress 主题后台选项开发框架可以为我们省下不少功夫.相信你接触过不少国人做的所谓“原创”主题,一看后台都是千篇一律的界面(连CSS 都懒得改 ...

  4. 向 Web 开发人员推荐35款 JavaScript 图形图表库

    图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性. 在这篇文章中,我们收集了3 ...

  5. hexo干货系列:(二)hexo主题下载及配置

    前言 上一篇文章介绍了hexo+gitHub简易搭建属于自己的个人独立博客,但是主题是默认的landscape,略显简单,今天的教程推荐Jacman主题. Jacman是一款为Hexo打造的一款扁平化 ...

  6. 推荐一款好用的博客离线编辑工具——OpenLiveWriter

    1.前言 我们自己一般在写博客的时候都是在博客官网后台写的,但是如果要在多个平台发布博客的话,那就要复制好前面写好的博客,然后再去其它博客平台发布,可见非常的麻烦. 这里推荐一款好用的离线多功能,多平 ...

  7. 推荐15款最好的 Twitter Bootstrap 开发工具

    Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...

  8. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  9. 推荐15款最佳的响应式 Web 设计测试工具

    响应式网页设计是根据设备的屏幕尺寸,平台和方向来开发的网页,是一种对最终用户的行为和环境作出反应的方法.响应式设计使用灵活的网格和布局,图像和智能使用 CSS 媒体查询的组合.当从它们在不同设备使用的 ...

随机推荐

  1. luogu P5414 [YNOI2019]排序 |动态规划

    题目描述 对于一个数列{7, 1, 2, 3}进行排序,我们可以把7 从头移动到尾.但是这个操作的成本是7,并不是最佳的.最佳的排序方式是将连续的1.2.3 移动到7 的前面.这样的话,总的操作成本就 ...

  2. luogu P2759 奇怪的函数 |二分答案

    题目描述 使得 x^x达到或超过 n 位数字的最小正整数 x 是多少? 输入格式 一个正整数 n 输出格式 使得 x^x达到 n 位数字的最小正整数 x 计算一个数有多少位 log10(x)+1 #i ...

  3. 小白学 Python 爬虫(17):Requests 基础使用

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  4. Python中 * 与 **, *args 与 **kwargs的用法

    * 用于传递位置参数(positional argument) ** 用于传递关键字参数(keyword argument) 首先,先通过一个简单的例子来介绍 * 的用法: def add_funct ...

  5. 设计模式GOF23(结构型模式:代理模式,适配模式,桥接模式,组合模式,装饰模式,外观模式,享元模式)

    结构型模式: – 分类: • 适配器模式.代理模式.桥接模式.装饰模式.组合模式.外观模式.享元模式 – 核心作用:是从程序的结构上实现松耦合,从而可以扩大整体的类结构,用来解决更大的问题.   结构 ...

  6. 回文自动机pam

    目的:类似回文Trie树+ac自动机,可以用来统计一些其他的回文串相关的量 复杂度:O(nlogn) https://blog.csdn.net/Lolierl/article/details/999 ...

  7. SPOJ Free TourII(点分治+启发式合并)

    After the success of 2nd anniversary (take a look at problem FTOUR for more details), this 3rd year, ...

  8. 【VUE】数组

    [VUE]常用函数 转载:https://www.cnblogs.com/yangchongxing/p/10637087.html 目录 ============================== ...

  9. node-sass下载失败

    在angular项目中下载依赖npm install时提示node-sass安装失败,解决方法如下: 1.下载win32-x64-57_binding.node文件至指定目录 2.添加环境变量: 变量 ...

  10. GitHub 上的 12306 抢票神器,助力回家过年

    又到周末了,不过本周末有些略微的特殊. 距离每年一次的全球最大规模的人类大迁徙活动已经只剩下一个多月了,各位在外工作一年的小伙伴大多数人又要和小编一样摩拳擦掌的对待史上最难抢的抢票活动. 然鹅,身为一 ...