Hexo+Ayer博客搭建

最新推荐文章于 2024-06-22 09:45:37 发布
最新推荐文章于 2024-06-22 09:45:37 发布
阅读量1.1k 收藏 9
点赞数 2
文章标签： 前端 hexo node css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011747571/article/details/103417676
版权
本文介绍了如何使用Ayer主题搭建一个响应式的Hexo博客，该主题拥有干净的设计，丰富的功能，如可配置的封面，时间轴归档，文章置顶，以及支持多种评论模块和统计功能。详细步骤包括安装、配置和插件使用。
摘要由CSDN通过智能技术生成

介绍

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

hexo-theme-ayer

项目地址

效果预览

中文说明

特性

  • 干净且优雅，文章内容美观易读
  • 首页封面全屏平铺，扁平化设计，更加高大上
  • 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页封面和文案可以任意更换，主题内附送6张精美高清壁纸
  • 时间轴式的归档页
  • 侧边栏可以点击显示和隐藏
  • 关于我的页面用文章，自定义性更强
  • 支持文章置顶和文章打赏
  • 支持 MathJax
  • TOC 目录在文章页悬浮，跳转更方便
  • 可设置阅读文章时做密码验证
  • Valine和Gitalk评论模块（推荐配合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
最低0.47元/天 解锁文章
沈宇
关注
使用hexo框架+ayer主题+gitalk评论插件搭建个人博客
风凉zz的博客
06-14 1077
原文：使用hexo框架+ayer主题+gitalk评论模块搭建个人博客 使用hexo框架+ayer主题+gitalk评论模块搭建个人博客环境：windows10前提：1.安装好node.js 和 Git2.安装淘宝的cnpm一、使用hexo框架搭建静态博客1.安装 hexo 框架2.在磁盘中新建 blog 文件夹3.启动服务器4.新建一篇博客5.清除缓存文件6.生成静态文件7.再次启动服务器8.把博客部署到Github9.进入博客页面浏览器中输入地址：basssss.github.io跳转到博客页面二、安装
Hexo 最常用的几个命令
diaojian0245的博客
10-18 140
hexo s hexo s 1 启动本地服务器，用于预览主题。默认地址：http://localhost:4000/ hexo s 是 hexo server 的缩写，命令效果一致； 预览的同时可以修改文章内容或主题代码，保存后刷新页面即可； 对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。 hexo new ...
推荐一款优雅的Hexo博客主题：Cover —— 面向未来的封面设计
最新发布
gitblog_00032的博客
06-22 402
推荐一款优雅的Hexo博客主题：Cover —— 面向未来的封面设计 hexo-themes-cover项目地址:https://gitcode.com/gh_mirrors/he/hexo-themes-cover 项目介绍 在众多的Hexo主题中，我们发现了【Cover】这一独特且富有创意的设计。它灵感来源于Facebook的封面照片功能，将动态调整大小的封面照片引入到个人博客之中，为你的网...
Hexo博客+ayer主题+部署giteepage
qq_41096878的博客
03-07 356
演示地址：https://soandend.gitee.io/blog/ 文章目录一. 所需的软件和平台二. 安装说明三. 检验是否成功安装四. Hexo的安装五. Git的配置六. Hexo常用代码七. 自定义主题八. 添加板娘九. 添加搜索功能十. 设置题目、分类、标签十一. 动态背景设置十一. 遇到的问题1.打开hexo后 localhost:4000无法访问2. gitee访问却没有样式 一. 所需的软件和平台 必须的软件： node.js Git 或者 Git镜像站 可选的软件： Visu
为使用hexo搭建的博客加入评论系统gitalk
ccbirds
01-29 500
使用hexo结合github搭建自己的个人博客网站，非常方便，而且免费，对于个人来说是一个不错的选择。不过有一个缺点是没有评论系统。需要自己额外引入评论插件。 现在常用的评论插件有三种： disqus：已经被墙了，暂时不考虑。 gitment：基于github的一个评论系统，但是作者长时间没有维护，需要使用自己的服务器。 gitalk：也是基于github的一个评论系统，目前可以正常使用。 主题不...
记录一个hexo+butterfly主题集成gitalk的坑：未找到相关的 Issues 进行评论，请联系@作者初始化创建
m0_57545353的博客
01-30 1745
记录一个hexo+butterfly主题集成gitalk的坑：未找到相关的 Issues 进行评论，请联系@作者初始化创建
Hexo框架Ayer主题搭建我的博客
weixin_44546855的博客
11-15 716
关于Hexo ayer主题搭建Blog使用的框架、插件下面页面展示 我的博客链接: RainのBlog. 使用的框架、插件 Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 Ayer Ayer 是一个干净且优雅的 Hexo 主题，自带响应式，加载速度很快。——Ayer 在马来语中是“水”的意思，在西班牙语中是“昨天”的意思。 Valine 一款快速、简洁且高效的无后端评论系统。 hexo-helper
GitHub + Hexo搭建个人博客之主题美化
qq_46452096的博客
03-17 698
文章目录下载主题修改配置文件修改根目录下的配置文件修改主题目录下的配置文件 原文地址1：https://xukcode.github.io/（GitHub + Hexo） 原文地址2：http://pxzwuk.coding-pages.com/ (coding + Hexo) 上一篇已经介绍了如何利用GitHub + Hexo搭建个人博客，如果不太喜欢博客默认的主题，可以更换自己喜欢的主题。H...
从零开始免费搭建自己的博客(一)——本地搭建hexo框架
yushuaigee的博客
01-02 7001
本文是博客搭建系列文章第一篇，其他文章链接： 从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架 从零开始免费搭建自己的博客(二)——基于 Github pages 建站 从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站 从零开始免费搭建自己的博客(四)——编写 Markdown 文章并发布 从零开始免费搭建自己的博客(五)——三个站点一键发布博客 从零开始免费搭建自己的博客(六)——导出 CSDN 博客为 Markdown 格式 从零开始免费搭建自己的博客(七)——博客.
基于Hexo的安静优雅主题Ayer设计源码
04-07
Hexo主题Ayer：基于Javascript构建，包含172个文件，包括47个EJS模板文件、36个Stylus样式文件、27个JavaScript文件、19个YAML配置文件、11个JPG图像文件、9个PNG图像文件、5个Markdown文档、3个SVG文件和2个CSS样式文件。该项目是一个安静且优雅的Hexo主题，提供了一个简洁、舒适的博客阅读体验。
hexo-theme-ayer:Hexo的清洁典雅主题。 :whale:
04-27
一个安静且优雅的 Hexo 主题 :water_wave: Ayer is a clean and elegant theme for Hexo, also fast, powerful and responsive. It contains many awesome features, It's perfect for your blog, "Ayer" means "water" in Malaysian and "yesterday" in Spanish. If you have any queries or advice during the process of using, Please contact me! 注：收藏本主题请点右上角Star，谢谢~~ 如果你想给主题添砖加瓦，可以点右上角Fork，然后给此仓库提交PR Install For hexo < 5.0 git clone ht
推荐一款优雅的Hexo主题：Ayer
gitblog_00019的博客
03-24 424
推荐一款优雅的Hexo主题：Ayer 项目地址:https://gitcode.com/shen-yu/hexo-theme-ayer Hexo 是一个快速、简洁且高效的静态博客框架，它允许开发者轻松地创建和管理自己的个人博客或网站。而今天我要向大家推荐的是一个专门为Hexo设计的主题——Ayer，它的链接是：https://gitcode.com/shen-yu/hexo-theme-ayer?...
Hexo+next的侧边栏背景与字体颜色设置方法
Huffie博客
08-17 3353
由于next主题经过了几次更新，查阅了许多资料都说要修改custom.styl这个配置文件，但是我的主题内没有此文件，经过翻阅大量的资料，终于找到了侧边栏的配置文件位置。
Hexo博客 | Ayer主题美化之添加二级菜单
Justlovesmile的博客
06-29 1897
我的博客:https://justlovesmile.top Hexo主题导航栏添加二级菜单的简单方法 第一步，找到所使用主题的导航栏文件，例如：Ayer主题的位于hexo\themes\ayer\layout\_partial\sidebar.ejs 第二步，打开文件，找到文件对应生成菜单的位置,一般在<li></li>内，在里面添加代码 <ul class="nav nav-main"> <% for (var i in theme.menu){
hexo主题推荐
热门推荐
Donny的专栏
09-05 1万+
hexo官网所有主题：https://hexo.io/themes/ 个人觉得比较ok的主题： https://shuoit.net/ http://www.91h5.cc/ https://itimetraveler.github.io/hexo-theme-hiero/archives/ http://chaoo.oschina.io/ http://haojen.github.i...
Hexo博客 | 前端美化之添加公告板---基于Ayer主题有两种模式
Justlovesmile的博客
07-01 1929
文章目录说明步骤第一步 找到对应的首页文章页的代码文章第二步 创建`broadcast.ejs`文件第三步 打开主题的配置文件第四步 效果 在我的博客首页添加了告示板模块，有两种模式，一种是自定义语句，一种是一言API 发现写了很多博客美化的文章了,罗列了一下 Type.js打字机效果: 添加打字机效果 博客中能用到的代码: 关于font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效 博客中能用到的代码（二）: 添
Hexo博客更换主题
YOUNGBC的博客
02-01 374
我们可以去hexo的主题官网去挑选你自己喜欢的主题风格。里边收录了很多的主题。 下面我们以A-Ayer主题为例： https://github.com/Shen-Yu/hexo-theme-ayer 下载和切换主题 $ git clone https://github.com/Shen-Yu/hexo-theme-ayer.git 下载完成后你就可以看到，hexo-theme-Annie就...
时间轴（自定义）
ahya75516的博客
09-19 621
先上效果图： 项目中要求做成上面的效果，在swiper官网找了一下找到类似的，但是起始位置在中间，没办法，只能自己动手借用swiper的css（刚开始用swiper写的，有些样式懒得改。。。）做出自己想要的效果（细节方面没做好不要介意，手动捂脸！） html： <div id="big"> <div class="swiper-conta...
hexo+github搭建个人博客
12-08
以下是使用Hexo和GitHub Pages搭建个人博客的步骤： 1.安装Node.js和Git 2.安装Hexo ```shell npm install -g hexo-cli ``` 3.初始化Hexo shell hexo init blog cd blog npm install ``` 4.配置Hexo 打开根...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值