效果预览
网上有很多关于 github pages 博客搭建的文章,使用的比较多的是 jekyll、hexo。 github 官方推荐的是前者,经过比较,本人选择了 hexo,因为有许多人推崇的一款主题:next。
clone 后一顿魔改,效果自己看着还算可以,在这 share 出来,欢迎 star、fork !如有疑问,请提 issue 或在博客给我反馈。
以下功能网上一搜一大把,不过还是为大家整理了下本博客的情况,who care(皮一下~)!
已完成(v1.0):
- 主页布局、颜色搭配
- 全局字体设置(思源宋体)
- 动态背景图片
- 随机三角丝带
- 鼠标点击特效 (4种)
- 文章虚拟背景
- 文章置顶、精品
- 文章排行榜(热榜)
- 文章浏览、字数、时长
- APlayer 音乐播放器
- DPlayer 视频播放器
- 看板娘
- SEO 相关
- CDN 相关
- 个性化返回顶部
- fork me from github
- 博主头像旋转
- 友链及相关链接页面
- 近期文章推荐
- 网站运行时间
- 网站访问人数、访问量
- 阅读全文样式
- DaoVoice 在线聊天
- TiDio 在线聊天
- 来必力评论系统
- Valine 评论系统
- abbrlink 文章永久链接
- neat 压缩
- 文章版权信息
- 代码块样式
- 代码块复制
- 阅读结束提醒
- 打赏
- 百度分享
- 评论区打字特效
- 页面反馈
- ...
2019-09-25 新增以下功能(v2.0):
- 手机端样式适配
- 代码块 Mac panel 特效
- LeanCloud 切换国际版
- 接入 Google AdSense 广告
- 新增 ShareJs 分享
- 类知乎卡片链接样式
- Valine-Admin 评论系统
- Valine-Admin 邮件通知
- 相关文章推荐
- 标签样式调整
- 标签页自定义样式(4种)
- 分类页自定义样式(2种)
- 归档页自定义样式
- 鼠标样式
- 主页走马灯(轮播图)
- 瀑布流相册
- canvas 粒子时钟
- 豆瓣读书、电影
- 页面其它特效
- ...
2019-12-31 已完成的(v2.1):
- Service Worker:离线访问功能
- PWA(Progressive Web App):将网站安装到桌面(PC、手机)
- 网站运行时间 DIY
- 访问量 DIY
- 文章首字下沉效果
- 炫酷的音乐播放器
- 炫彩 logo
- 旋转魔方(2种)
- 浏览器 Console 个性化输出
- 邮件订阅功能
- 更新 Valine 评论表情、样式
- 更网站左下角扫码订阅
- 轮播图大屏显示优化
- 网站公告
- 其它优化
- ...
进行中 2020-04-01(v2.2):
- 表白界面
- 网页镜子
- 网页相关(禁用审查元素、右键等功能)
- 鼠标右键菜单 DIY
- 网页左下角新增联系信息按钮
- 新增关注公众号解锁文章的功能
- MacPanel 代码块折叠功能
- Ribbon 动态背景条纹
- 新增明月浩空音乐播放器
- 其它优化
- ...
ing ---->>>>
- PJAX 功能集成
- Fancybox2 升级最新版
- header 固定、毛玻璃效果
- JS CDN 加速
- ...
-
Download ZIP 解压后,放到 hexo 目录 themes 主题下即可。或者使用 git 命令,进入到本地 hexo 目录:
git clone https://github.com/leafjame/hexo-theme-next5-leaf.git themes/leaf
-
将其放到 themes 目录下,名字自定义。然后在站点的配置文件 _config.yml 中指定所使用的 theme:
theme: leaf
PS:如需 clone 指定 tag 版本,可以使用
git clone --branch <tag_name> <repo_url> <local_path>
命令,如:git clone --branch v1.0 https://github.com/leafjame/hexo-theme-next5-leaf.git themes/leaf
-
插件列表
本主题中在搭建过程中,集成了一定的插件,所列部分如下:
"hexo-abbrlink": "^2.0.5", //生成文章唯一URL插件 "hexo-baidu-url-submit": "0.0.6", //url提交插件,用于seo "hexo-deployer-git": "^1.0.0", //git插件,用于部署 "hexo-douban": "^1.1.3", //豆瓣读书、电影插件 "hexo-generator-baidu-sitemap": "^0.1.6", //百度sitemap,用于seo "hexo-generator-sitemap": "^1.2.0", // 同上 "hexo-generator-feed": "^1.2.2", // SSR插件 "hexo-generator-index-pin-top": "^0.2.2", //用于指定文章置顶 "hexo-generator-search": "^2.4.0", //本地搜索插件 "hexo-neat": "^1.0.4", // 压缩js、css代码的插件 "hexo-permalink-pinyin": "^1.1.0", // 中文链接转拼音的插件 "hexo-related-popular-posts": "^3.0.6", // 相关文章推荐 "hexo-renderer-ejs": "^0.3.1", // 是不是自带的?。。。 "hexo-renderer-marked": "^1.0.1", // 是不是自带的?。。。 "hexo-renderer-stylus": "^0.3.3", // 是不是自带的?。。。 "hexo-symbols-count-time": "^0.6.0", // 站点字数统计 "hexo-tag-cloud": "^2.1.1", //标签云 "hexo-tag-dplayer": "^0.3.3", //dplayer视频插件 "hexo-wordcount": "^6.0.1", // 字数统计插件 "webpack-cli": "^3.3.7", // 装hexo-abbrlink时提示装的,按需下载 "@webpack-cli/init": "^0.2.2", // 同上 "hexo-service-worker": "^1.0.1", // 离线访问 "hexo-pwa": "^0.1.3", // Progressive Web App,可将网站安装到桌面(PC、手机)
所装插件信息位于站点根目录的 package.json 文件,核对一下自己是否已经装过。
-
安装命令
在站点根目录下,使用:
npm install --save-dev hexo-neat
即可安装 hexo-neat 插件,其他的插件安装方式类似。默认是安装最新版,如要指定版本号,可使用:
npm install --save-dev hexo-neat@1.0.4
-
next 主题配置文件 _config.yml
按需配置 valine、leanCloud、busuanzi、tidio、hotjar、轮播图、文章推荐、点击特效、自定义标签等。
-
hexo 站点配置文件 _config.yml
按需配置 abbrlink、highlight、deploy、douban、hexo-neat 等。
⚠️ 注意:部分功能需注册后方可使用。
控制台 hexo clean && hexo g && hexo s
三连,浏览器输入 http://localhost:4000/
即可看到效果!
附上完整版站点配置文件,供大家参考 ☟☟
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Leaf's Blog
subtitle: 因心造境,风云由我!
signature: 人在江湖,生不由己
description: 人在江湖,生不由己,出来混,迟早是要还的!
keywords: leafjame 北宸 Java 程序员 北漂
author: 北宸
language: zh-Hans
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.liaofuzhan.com
root: /
#permalink: :year/:month/:day/:title/ #对搜索引擎是十分不友好的
#permalink: :title.html
permalink: posts/:abbrlink.html # 此处可以自己设置,也可以直接使用 :/abbrlink
permalink_defaults:
# 文章链接唯一永久化
abbrlink:
alg: crc32 #算法: crc16(default) and crc32
rep: dec #进制: dec(default) and hex
baidu_url_submit:
count: 6 ## 比如3,代表提交最新的三个链接
host: https://www.liaofuzhan.com ## 在百度站长平台中注册的域名
token: XXXXXX ## 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
#skip_render:
skip_render: README.md
# Writing
#https://hexo.io/zh-cn/docs/writing
#new_post_name: :year-:month-:day-:title.md #方便已日期来管理文章
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: next
Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap
baidusitemap:
path: baidusitemap.xml
sitemap:
path: sitemap.xml
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
repository:
github: https://github.com/leafjame/leafjame.github.io.git
gitee: https://gitee.com/leafjame/leafjame.git
branch: master
- type: baidu_url_submitter
# Search
search:
path: ./public/search.xml
field: post
format: html
limit: 10000
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
# https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
permalink_pinyin:
enable: false
separator: '-' # default: '-'
# https://blog.csdn.net/lewky_liu/article/details/82432003
# https://github.com/rozbo/hexo-neat
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
- '**/needsharebutton.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/waifu-tips.js'
- '**/iframe.js'
- '**/fireworks.js'
# https://github.com/mythsman/hexo-douban
douban:
user: your_id
builtin: false #否将生成页面的功能嵌入hexo s和hexo g中(false则需要使用hexo douban命令)
book:
title: '读书系列' # 该页面的标题
quote: '书山有路勤为径,学海无涯苦作舟' # 写在页面开头的一段话,支持html语法.
movie:
title: '观影系列'
quote: 'Life was like a box of chocolates, you never know what you’re going to get'
timeout: 10000 # 爬取数据的超时时间
# https://github.com/lavas-project/hexo-pwa
# https://developers.google.com/web/fundamentals/web-app-manifest/?utm_source=devtools
pwa:
manifest:
path: /manifest.json
body:
name: Leaface # is used in the app install prompt.
short_name: Leaface # is used on the user's home screen, launcher, or other places where space may be limited
description: 北宸的小站
icons:
- src: https://cdn.jsdelivr.net/gh/leafjame/cdn/img/icon/linkcard.png
sizes: 192x192
type: image/png
- src: https://cdn.jsdelivr.net/gh/leafjame/cdn/img/logo/beichen.png
sizes: 512x512
type: image/png
start_url: /
theme_color: '#3367D6' # 2196f3
background_color: '#2196f3'
display: standalone
serviceWorker:
path: /sw.js
preload:
urls:
- /
posts: 1
opts:
networkTimeoutSeconds: 5
routes:
- pattern: !!js/regexp /hm.baidu.com/
strategy: networkOnly
- pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
strategy: cacheFirst
- pattern: !!js/regexp /\//
strategy: networkFirst
priority: 10