Hexo + Butterfly 从零开始搭建个人博客系列

简介: Hexo + Butterfly 从零开始搭建个人博客系列简单漂亮,文章内容美观易读 Material Design 设计响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现瀑布流式的博客文章列表(文章无特色图片时会有 24 张漂亮的图片代替)时间轴式的归档页丰富的关于我页面(包括关于我、文章统计图、我的项目、我的技能、相册等)可自定义的数据的友情链接页面支持文章置顶和文章打赏支持 MathJax可设置复制文章内容时追加版权信息Gitalk、Gitment、Valine 和 Disqus 评论模块支持在首页的音乐播放和视频播放功能

原文链接:基于 Hexo 从零开始搭建个人博客系列


基于 Hexo 从零开始搭建个人博客系列文章:

  1. 基于 Hexo 从零开始搭建个人博客(一)
  2. Hexo + Butterfly 从零开始搭建个人博客(二)
  3. Hexo + Butterfly 从零开始搭建个人博客(三)
  4. Hexo + Butterfly 从零开始搭建个人博客(四)
  5. Hexo + Butterfly 从零开始搭建个人博客(五)
  6. Hexo + Butterfly 从零开始搭建个人博客(六)


前言


本站基于 Hexo 搭建,用的 🦋 hexo-theme-butterfly 主题 v3.7.1,请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.2.2


如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意。


主题特点


  1. 简单漂亮,文章内容美观易读
  2. Material Design 设计
  3. 响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
  4. 瀑布流式的博客文章列表(文章无特色图片时会有 24 张漂亮的图片代替)
  5. 时间轴式的归档页
  6. 丰富的关于我页面(包括关于我、文章统计图、我的项目、我的技能、相册等)
  7. 可自定义的数据的友情链接页面
  8. 支持文章置顶和文章打赏
  9. 支持 MathJax
  10. 可设置复制文章内容时追加版权信息
  11. Gitalk、Gitment、Valine 和 Disqus 评论模块
  12. 集成了不蒜子统计、谷歌分析(Google Analytics)和文章字数统计等功能
  13. 支持在首页的音乐播放和视频播放功能


我的主题效果(部分页面)


查看效果请前往个人站: 唐志远の博客


首页效果


home.jpg


首页文章列表

post-01.jpg

post-02.jpg


文章详情页


artlcle-00.jpg


artlcle-01.jpg


归档

归档v2.jpg

关于自己


关于自己.jpg


留言板


留言板.jpg


友情链接

友链v2.jpg

追番页

追番v2.jpg

书单页

书单v2.jpg


相册页


相冊-00.jpg


相冊-01.jpg


相冊-02.jpg

评论

评论.jpg

音乐


音乐.jpg


即时聊天


即时聊天-01.jpg


可以在PC和手机上接收消息(这里放手机效果图,毕竟电脑随身携带的可能性比较小)。


即时聊天-02.jpg


即时聊天-03.jpg


邮件接收.jpgng)


遇到问题


遇到问题可以给我留言,看到消息后会第一时间立马回复。

相关文章
|
网络安全 开发工具 git
从零开始搭建属于自己的hexo博客
整个搭建过程大概需要30分钟不到,请各位控制自己的时间~
126 0
|
10月前
|
开发框架 资源调度 JavaScript
用Hexo搭建博客入门教程-搭建环境生成hexo静态页面(一)
用Hexo搭建博客入门教程-搭建环境生成hexo静态页面(一)
120 0
|
SQL JavaScript 前端开发
Hexo从0到1搭建博客系列01:浅尝Hexo
Hexo从0到1搭建博客系列01:浅尝Hexo
117 0
|
JavaScript Shell 网络安全
使用Hexo从0到1搭建个人博客详细教程(超详细,超简单)
使用Hexo从0到1搭建个人博客详细教程(超详细,超简单)
2512 0
|
JavaScript Ubuntu 网络安全
Hexo 个人博客搭建
hexo Github Pages博客搭建全过程 声明: 演示环境为Ubuntu 16.04,记录时间为16~17年。 创建仓库 !NOTE 目的是使用GitHub Pages来部署我们的博客。 注册GitHub账号,官网地址:https //github.com/ 登录后如下图,点击创建仓库
100 0
|
域名解析 前端开发 JavaScript
Hexo+Github+vercel 搭建个人博客教程(二)
这篇教程接上篇教程,在上篇教程的基础上在进行
1045 1
|
JavaScript
使用 hexo 框架 快速搭建个人博客(一)
使用 hexo 框架 快速搭建个人博客(一)
149 0
使用 hexo 框架 快速搭建个人博客(一)
|
JavaScript
【Hexo基本使用】零基础,快速搭建属于自己的个人博客!
本文包含以下内容:Hexo安装,Hexo基础指令与配置,Hexo切换主题,Hexo部署。 最将自己的博客改为了Hexo静态网页。
299 0
|
开发工具 数据安全/隐私保护 git
使用 hexo 框架 快速搭建个人博客(二)
使用 hexo 框架 快速搭建个人博客(二)
119 0
使用 hexo 框架 快速搭建个人博客(二)
|
JavaScript 开发工具 git
用Hexo搭建本地静态博客
用Hexo搭建本地静态博客
140 0