推荐一款好看的hexo主题Ayer

介绍

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

hexo-theme-ayer

项目地址html

效果预览git

中文说明github

特性

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

若是想体验手机浏览效果,能够扫一下二维码:npm

手机端效果

安装

$ 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.ymlbash

# 侧边栏菜单
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

# 评论:一、Valine(推荐);二、Gitalk

# 一、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

# 二、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

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

    $ npm install hexo-generator-feed --save

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

    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
相关文章
相关标签/搜索