本文参考：

安装 & 更新

安装前请确保 Halo版本 和主题的兼容性，V1.0.10 及以上版本仅支持 Halo 1.5+，以下版本兼容到 Halo 1.4.11，请知悉。

  1. 复制主题仓库地址 https://github.com/qinhua/halo-theme-joe2.0.git

  2. 进入博客后台管理 外观-主题-安装-远程下载，贴入仓库地址进行安装（建议直接使用最新版本 ）。
    如果在线安装失败（大概率失败 😆 ），那就选择 本地上传，到主题 Release 页面下载指定版本主题压缩包，并上传上去（务必在 Release 页面下载压缩包，否则可能出现资源加载出错的问题）；

  3. 等待提示安装完成即可；

  4. 更新主题时，建议直接通过 外观-主题-Joe2.0-更多-从主题包更新 把下载好的 zip 包上传上去，然后 先切换到其他主题，再切回本主题，并进入主题设置执行一次保存，最后强刷前端页面即可（这里切主题主要是为了避免有时候主题状态未激活和缓存的问题）。

注意事项

  1. 安装主题后请务必到 后台管理 - 博客设置 - 高级选项 中开启 API服务 并配置 Access key 为 joe2.0（切记要和主题设置中的 AccessKey 一致），不然部分用到 Content API 的页面会请求失败并报错。（请参考以下报错）
1
2
“API has been disabled by blogger currently” —— 后台管理中未开启API服务
“API access key is mismatch” —— 主题中的 AccessKey 和后台管理中的不一致

  1. 如果后台管理中之前已经配置了其它的 Access Key（内容不是 joe2.0），那么需要你到本主题设置中的 基本设置-AccessKey<必填> 同步一下这个 Access key，保证两部一致即可（切记一致才行，且不要填写中文或特殊字符）。

  2. 有时，主题升级后配置项变化较大，直接访问博客可能会报错，导致页面渲染不出来。此时，只需要进入当前主题的设置界面执行一下保存操作来更新旧的配置，然后再访问页面即可；

  3. 有时，明明已经提示主题更新成功了，但访问博客时页面还是加载的旧版本的文件，可能是由于 主题激活状态不正常 或 主题缓存的问题 导致的。此时，只需要先启用其他主题再启用本主题即可，建议每次更新主题之后都做一下这个操作（目前后台管理系统还不太完善）。还有就是如果你配置了 CDN 服务，记得清理相应节点的缓存，让它回源取最新资源。

  4. 强烈建议 每次更新主题后，务必先清空一下浏览器缓存，保证加载的资源都是最新版本的，并到主题设置中执行一次保存，保证配置项是最新的，不然可能有各种报错（你可以通过 Ctrl + F5 强制刷新或者 Ctrl + Shift + DEL 清空浏览器所有缓存）。

  5. 最后，建议大家在 后台管理-系统-博客设置-高级选项-其他设置 中开启 全局绝对路径。

插入多媒体

插入音乐

怎样在文章中插入网易云播放器？

id：网易云歌单 ID 或 歌曲 ID（可从歌曲网址中获取）

  • 歌单

    1
    2
    <joe-mlist id="6800335663"></joe-mlist>

  • 单曲

    1
    <joe-music id="1303046498"></joe-music>

  • 本地音乐

    1
    2
    3
    4
    5
    6
    7
    <joe-mp3
      name="天生狂野-柴古唐斯主题曲"
      url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3"
      theme="red"
      cover="https://bbchin.com/upload/2022/04/cgts.png"
      autoplay
    ></joe-mp3>

插入视频

文章中如何插入视频？

主题已集成 dplayer，只需要在编辑文章时使用 joe-dplayer 标签插入视频地址即可（建议 MP4 格式，其它格式未必支持，切记前后要空一行），它接受如下属性：

  • src：视频地址（必传）
  • width：阅读器宽度，默认为 100%
  • height：阅读器高度，默认 500px
    1
    <joe-dplayer src="https://xxx.mp4"></joe-dplyer>
    如果你想嵌入 B站视频，可以使用 joe-bilibili 标签（切记前后要空一行），它接受如下属性（相关参数可以从视频地址中获取）。
  • bvid：视频的 id（必传）
  • page：视频的 page，即分页
  • width：阅读器宽度，默认为 100%
  • height：阅读器高度，默认 500px
1
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>

文本元素

段落缩进

1
2
3
4
<p class="indent">
  有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。
  ---- 李七毛《我们都不擅长告别》
</p>

居中标题

1
2
3
4
<joe-mtitle title="牛鞭牛鞭"></joe-mtitle>
````
## 按钮元素
### 多彩按钮

1
2
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>

1
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>

1
2
3
4
5
<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>

### 便条按钮
>便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样





1
2
3
4
5
6
<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>
### 网盘按钮









1
2
3
4
5
6
7
8
9
10
11
12
13
14
<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="gitee" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>

## 装饰元素
### 跑马灯
```html
<span class="joe_lamp"></span>

进度条

1
<joe-progress percentage="50%" color="#6ce766"></joe-progress>

彩色虚线

1
2
<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>


Tabs

1
2
3
4
5
6
<joe-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}单身狗的故事{/tabs-pane}
    {tabs-pane 第二个}小说家的故事{/tabs-pane}
  </div>
</joe-tabs>
{tabs-pane 第一个}单身狗的故事{/tabs-pane} {tabs-pane 第二个}小说家的故事{/tabs-pane}

时间线

1
2
3
4
5
6
7
<joe-timeline>
 <div class="_tpl">
   {timeline-item 2020}10元{/timeline-item}
   {timeline-item 2021}20元{/timeline-item}
   {timeline-item 2022}100元{/timeline-item}
 </div>
</joe-timeline>
{timeline-item 2020}10元{/timeline-item} {timeline-item 2021}20元{/timeline-item} {timeline-item 2022}100元{/timeline-item}

评论后可见

1
<joe-hide></joe-hide>

提示元素

1
2
3
4
5
<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>




常见问题

1.如何自定义导航条菜单图标？

主题自身已经引入了部分 iconfont 图标，你可以直接用（全在这里），如果想在这个基础上增加图标，可联系我加入该项目的图标组，加入后即可获取最新的字体链接进行替换（template/module/link.ftl 中第 25 行）。iconfont 使用方式如下：
（目前主题菜单只支持字体图标，若要用图片请自行修改代码）

2.如何设置文章仅评论后可见？

主题目前支持文章页的 评论后可见功能，只要在后台管理中发布文章时设置-元数据 enable_read_limit 为 true 即可。设置之后>文章页默认只展示一屏高度的内容，剩余内容需要评论后才可见（如果文章内容小于一屏高度，则此功能会被忽略）。

3.怎样开启防盗链

很简单，直接在 nginx 里配一下就可以，不过记得添加白名单（如 logo 和 avatar），配置如下：

1
2
3
4
5
6
7
8
9
10
11
# 资源防盗链（指定目录or指定文件类型）
# location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
location /upload/ {
  access_log off;
  # 域名白名单，去掉则阻止所有非本站请求
  valid_referers none blocked server_names *.bbchin.com 127.0.0.1 localhost ~\.google\. ~\.baidu\. ~\.qq\.;
  if ($invalid_referer) {
    rewrite ^/ https://cdn.jsdelivr.net/gh/qinhua/cdn_assets/img/robber.jpg;
  }
  proxy_pass http://127.0.0.1:8090;
}

4.怎样配置合适的缓存策略

合理利用浏览器的缓存同样可以优化页面性能，提高加载速度，我们可以通过 Nginx 对相关资源的响应头进行配置，大致如下：

1
2
3
4
5
6
7
8
9
location / {
    gzip_static on; # 静态压缩
    add_header Cache-Control public,max-age=60,s-maxage=60; # 配置缓存
    proxy_set_header HOST $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8090;
}

主题修改

修改首页文章数、分类数、标签数顺序：
自行修改 template/module/blogger.ftl 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <#if settings.overview_type == 'A'>
<@postTag method="count">
     <div class="item" title="累计文章数 ${count!'0'}">
       <span class="num">${count!'0'}</span>
       <span>文章数</span>
     </div>
   </@postTag>
   <@categoryTag method="count">
     <div class="item" title="累计分类数 ${count!'0'}">
       <span class="num">${count!'0'}</span>
       <span>分类数</span>
     </div>
   </@categoryTag>
   <@tagTag method="count">
     <div class="item" title="累计标签数 ${count!'0'}">
       <span class="num">${count!'0'}</span>
       <span>标签数</span>
     </div>
   </@tagTag>