hexo主题 bfhui-themes

英文文章

公告

本主题是基于Argon主题的增强版,并无抄袭现象,版权属于双方!

声明 (bug)

目前还不支持 Markdown 的代码插入方式!

Markdown 写法:

```cpp
#include<iostream>
using namespace std;
int main(){
    cout<<"Hello";
    return 0;
}
```

本主题要用 Html 写法:

<pre><code>#include<iostream>
using namespace std;
int main(){
    cout<<"Hello";
    return 0;
}
</code></pre>
  •  Html 支持自动识别语言
  •  Html 支持代码高亮
  •  Html 支持码中码
  •  Html 支持 header1,2,3,4,5,6 号字体

特性

1.轻盈美观 – 使用 BFHUI Design System 前端框架,细节精致,轻盈美观

2.高度可定制化 – 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等,提供了丰富的自定义选项

3.夜间模式 – 支持日间、夜间、纯黑三种模式,并可以根据时间自动切换或跟随系统夜间模式

4.功能繁多 – Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示

5.Pjax – 支持 Pjax 无刷新加载,提高浏览体验

6.友情链接 – 支持使用 WordPress 自带的链接管理器进行友链管理,支持多种友链样式

7.“说说” 功能 – 随时发表想法,并在专门的 “说说” 页面展示,也支持说说和首页文章穿插

8.评论功能扩展 – Ajax 评论,评论支持 Markdown、验证码、再次编辑、显示 UA、悄悄话模式、回复时邮件通知、查看编辑记录、无限加载等功能

9.诸多功能 – 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等

10.丰富的短代码 – 支持通过短代码在文章中插入 TODO、标签、警告、提示、折叠区块、Github 信息卡、时间线、隐藏文本、视频等模块

11.多语言 – 支持中文、英文、俄文等语言

12.其他 – 自适应、精心优化的文章阅读界面 CSS、可切换衬线/非衬线字体、可自定义 CSS 和 JS、支持使用 CDN 加速静态文件访问、SEO 友好、Banner 打字动画、留言板页面等

快速使用

如何使用?

注意事项

必须安装nodejs的前置

安装过hexo


可以下载安装包 目前支持github下载 或者 直接下载

直接下载对于无法访问github或者访问github非常非常困难 就不错

本站节点下载需开通VIP:

[box]

[erphpdown]节点下载地址: https://v3download.bfhui.top/bfhui.v.0.1.2.zip[/erphpdown]

应用到hexo

把此zip压缩包解压

之后把解压缩后的文件夹移动到你的hexo博客/themes文件夹

之后

image-20210503101537963

更改他的名字为bfhui

然后打开您的博客根目录中的_config.yml

把其中的theme修改为bfhui

image-20210503101906670

本博客主题必须使用的插件

cmd或者bash中输入:

npm install hexo-generator-search --save

之后enjoy吧(还没有主题设置哦)

图片

image-20210503102845407
image-20210503102900138
image-20210503102916977

主题设置

请打开本主题的_config.yml

image-20210503103030979

设置评论

暂时只支持对gitalk的支持(目前正在更新Disqus评论系统)

image-20210503103208242

代码段

功能类型作用
enablebool开启或关闭(true or false)
githubIDstring输入你的github username
ownerstring你的github名字或者组织名字
repostring存放issue(评论)的仓库
adminuserstringadmin github名字
clientIDstring在oauth获取的id
clientSecretstring在oauth获取的Secret
distractionFreemodebool分心自由模式(我感觉没什么用)

client id和client Secret怎么得到呢?

进入setting

进入开发者设置

进入这里

image-20210503104516744

点击新建

image-20210503104540808

比如这样、

image-20210503104625321

之后就得到了

image-20210503104702712

下边是clietsecret

点击就可以新建了

之后每个填上去就ok了

pangu.js (强迫症的福音)

如果你在看文章的时候english和中文混在一起还有12334的数字 你一定看着很烦

那就用它吧

他会自动把中英文分割

就像这样

你好 hello world 啊

规格是

image-20210503105516569
功能类型作用
enable_pangubool是或者否(true or false)

lazyload (图片服务器的福音)

为什么呢

当然是

它看到哪里 图片就跟到哪里

有人看一半就走了

但是不用它 全加载了 (服务器流量哭晕在厕所)

规格

image-20210503110017359
功能类型作用
enable_lazyloadbool开启或关闭(true or false)
lazyload_thresholdint距离多少像素开始加载
lazyload_effectstring图片显示动画
lazyload_loading_styleint or none图片加载的动画

全局

里面包含

字体设置之类的

规格

image-20210503111111009
功能类型作用
theme_colorstring主题颜色
show_customize_theme_color_pickerbool允许用户自定义主题主颜色
darkmode_autoswitchstring自动切换夜间模式
enable_amoled_darkboolfalse=灰黑 true=暗黑
card_radiusdouble / float默认卡片圆角大小
card_shadowstring / none卡片阴影(影子)
fontstring字体
enable_headroombool滚动时是否自动折叠顶栏
nonenonenone

字体对比

sans-serif 

serif

(我感觉还是第2个比较好看👩)

顶栏

规格

image-20210503113603108
功能类型作用
toolbar_iconstring显示图片
toolbar_icon_linkstring顶栏图标链接
toolbar_titlestring标题

高级设置

页脚

image-20210503114905567

使用string类型

支持超链接 ico

数学公式(没用的东西 滑稽)

image-20210503115008734

建议不要弄 弄完了网站有点卡

脚本

image-20210503115044610

众所周知 就是脚本呗

代码高亮

image-20210503115111918

第一项开启或者关闭

第二行是主题

大图预览

image-20210503115206501

一般默认

平滑滚动

image-20210503115258763

浮动操作按钮

image-20210503115332445

都是bool值 直接自己设置

Banner

image-20210503115459560

侧栏

image-20210503115517443
image-20210503115542218
  •  支持图标 (需要用到 Html 的 i class 元素)

例如:

<i class="fa fa-home"></i>首页
<!--"fa fa-home"是首页的图标-->

文章

image-20210503115612272

背景

image-20210503115647809

其他

image-20210503115707564

推荐文章 和 文章末尾功能要自己修改

配置完之后 部署

hexo clean                  # 清除之前的部署文件
hexo g                      # 生成新的网页文件
hexo s                      # 本地预览
ssh -vT git@github.com      #上传报错终极解决代码
hexo d                      # 上传至 Git 仓库

感谢您的阅读
本文链接:https://blog.bfh.ink/?p=78
本文为BFH-BLOG博主「黑果小屋」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

评论

  1. 福利社
    Windows Chrome 90.0.4430.212
    4月前
    2021-6-03 23:55:25

    是不是我电脑太垃圾了,怎么打开非常卡顿

    • 黑果小屋 博主
      Android Chrome 88.0.4324.93
      4月前
      2021-6-05 11:49:22

      可能是配置的问题,喵~

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇