Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

基于 Hexo NexT 5 的一款主题

效果预览

前言

  网上有很多关于 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 加速
  • ...

安装

  1. Download ZIP 解压后,放到 hexo 目录 themes 主题下即可。或者使用 git 命令,进入到本地 hexo 目录:

    git clone https://github.com/leafjame/hexo-theme-next5-leaf.git themes/leaf
  2. 将其放到 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