Hexo博客项目：页面功能配置

Hexo博客项目：页面功能配置

---

项目最终效果

---

1.网站Logo和博主Logo更改

主题下的_config.yml里使用到的图片地址，例如logo参数：

logo: http://xxx.png  # 为空则不显示

我们可以使用线上地址, 也可以使用本地地址
首先在source文件夹(根目录下的source文件夹)下创建img文件夹，然后引入：

logo: /img/1.jpg # 为空则不显示

注意source是根目录下的，不是主题文件夹下的，主题文件夹不用管
当然，文章里面引用本地地址也行的，例如:

![图片描述](/img/full.png)

比如我的操作：搞个图片放入主题source中的medias中，然后更改主题yml文件中的图片地址

---

2.网页菜单选择配置

我在yml中默认关闭了菜单，为了方便大家更好的自定义，只需要把#去掉就可以使用了，比如下面我的菜单配置：

然后我们就看到了下面的菜单了：

---

3.首页翻转图配置

主题yml文件中修改swiper为以下：

swiper:
  on: true # 设置为false, 则首页不显示轮播图

首页轮播图显示默认内容：

#这里只给部分内容，具体看我下面给的图和theme文件的注释
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  defaultImg: 'https://pic3.zhimg.com/80/v2-7e6795a0b7b4fbe87b0a388b8a052f78_1440w.jpg' # 图片，没有则随机选取
  defaultVideo: '' # video，min-width:992px show
  defaultTile: '' # 标题
  defaultDesc: [''] #描述，例如 ['天行健'，'君子以自强不息']
  defaultLeftBtnText: '阅读文档' # 左边按钮文字, 空字符串则不显示
  defaultRightBtnText: '我的简历' # 右边按钮的文字，空字符串则不显示

defaultImg代表默认图片，defaultVideo代表默认视频，这两个值都设置的话，则在pc端显示视频，手机端显示图片

以下是我的配置：

然后得到了这样的效果：我这里没有放图，以后放，放入后他就会自动翻转切换背景图片

---

4.主界面和首站的翻转图样式配置

下面的图片是放在图床上的，可能加载有点慢：

#这样设置是全屏显示，我选择的这种
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  # 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)
  imgwidthFull: false
  # 整个轮播图宽高都是100%  (轮播图的文字和按钮只能居中显示)
  full: true # full 优先级大于 imgwidthFull/bothSideTransparent
  # 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明
  bothSideTransparent: false

#这样设置显示一半
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  # 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)
  imgwidthFull: false
  # 整个轮播图宽高都是100%  (轮播图的文字和按钮只能居中显示)
  full: false # full 优先级大于 imgwidthFull/bothSideTransparent
  # 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明
  bothSideTransparent: false

---

5.音乐功能配置

music:
  on: true
  server: tencent   #require music platform: netease, tencent, kugou, xiami, baidu
  type: song    #require song, playlist, album, search, artist
  id: 0020dKPG3mp0GT     #require song id / playlist id / album id / search keyword

1.server代表音乐平台，netease代表网易云, tencent代表qq音乐
2.type代表歌曲类别，song代表单曲, playlist代表歌单
3.id代表歌曲或者歌单的id，例如网易云的歌单地址https://music.163.com/#/playlist?id=2788431035, 后面的id就是这个

比如我的配置：

效果展示：

---

6.页脚功能配置

site_footer:
  custom: # 根据需要自行取消注释，label: 'markdown格式'，会在下面继续增加内容
    # - label: '<br>'
    # - label: '[Hello World](http://baidu.com)'

比如我下面的配置：

这里的角标点击可以跳转到对应的地方，比如点QQ就直接弹出加你的QQ的请求

---

7.页面功能效果展示