【Blog】博客系统记录-降谷零v

Halo博客系统个性化记录

一些自定义的调整记录，比如如何在文章插入视频，怎么方便调整手机图片的样式等

文章插入视频

video标签即可

在Typora这种软件中我们把视频拖入即可，最终解析成html标签就是

<video src="/Users/weisong/kid/test/video/1.mp4"></video>

但是在博客系统上就解析不出来，对比我也看了 CSDN 这种，博客中上传视频的话得需要先单独上传视频，经过审核后才可在文章中进行使用。后来从一个 Halo 社区中看到了使用 Iframe 这种网页嵌套技术可以实现，里面正常写一个 Video 标签，当时他的场景是加载 b站播放，后来又看了评论区的一些讨论以及自己的实践，代码如下

<video controls  width="100%"><source src="https://img.kid007.cn/work-show/photo-album.mp4" type="video/mp4"></video>

截图样式

自定义 css 样式处理

我们在手机截图的图片放到博客上会显示的很长，观看非常不友好，其实我们对 Img 标签进行一些等比例缩小即可，但是我们在 pc 上截取的一些长宽比差不多的照片就希望正常显示，比如代码片段，软件教程，所以我们想要达到效果不能破坏原有的规则，在现有的规则上额外定制一条，因为正常的拖入图片就是如下格式：

![image-20230926104616672](https://picbed.kid007.cn/uPic/2023/09/26/image-20230926104616672.png)

我们看出来整体结构就是 p>span>img 这个结构，我的想法就是在图片 url 后面加一个标识，到时候为这个使用 css 样式等比例缩小即可，说干就干，正好这个博客系统支持自定义 css 和 js 脚本，我的想法是自定义一个 #phone 的标识，表示是手机拍照或者手机截图的图片，默认缩小为 45%（根据情况调整），然后再定义几个#w+数字，比如：#w8，表示等比例缩小 80%，当然还要简单适配下移动网页端，使用

@media screen and (max-width: 700px)

最终大概就是这样：

/* 所有图片都缩放 80% */
.joe_detail__article.center-img span[data-fancybox] {
    text-align: center;
    width: 80%;
    margin: auto
}


/* 手机普通图片 缩小居中 */
span[href*="#phone"] {
  width: 40%!important;
  margin: auto!important;
}

/*移动端*/
@media screen and (max-width: 700px) {
  span[href*="#phone"] {
    width: 55%!important;
    margin: auto!important;
  }
}


/* 手机截图 缩小居中 */
span[href*="#jietu"] {
  width: 80%!important;
  margin: auto!important;
}

/*移动端*/
@media screen and (max-width: 700px) {
  span[href*="#jietu"] {
    width: 55%!important;
  }
}


span[href*="#w8"] {
  width: 80%!important;
  margin: auto!important;
}


/* 手机拍摄视频 */
.v_phone {
   width: 40%; 
   min-width: 60px!important; 
   margin: 0 auto!important;
   volume: 1;
}

添加自定义 css，我们找到主题设置，会有个自定义面板，可以直接将样式代码写在这里，也可以外挂文件。

效果对比：