springboot开发小而美的博客学习笔记09(插件集成)

用Markdown语法编写博客内容(需要用到发布页面)
访问网页:https://pandao.github.io/editor.md/
在这里插入图片描述
点击下载
在这里插入图片描述
下载解压后将需要用到的文件复制到editormd文件里面
在这里插入图片描述
在这里插入图片描述

引入css
在这里插入图片描述

引入js
在这里插入图片描述
将需要用到的textarea放到里面
在这里插入图片描述
初始化Markdown编辑器
在这里插入图片描述
运行查看效果:
在这里插入图片描述
输入内容查看
在这里插入图片描述
是有效果的
把Markdown编辑器放在最上面,让Markdown在全屏的时候可以在最上面,包括底部也可以覆盖:
在这里插入图片描述

查看效果:
在这里插入图片描述

在这里插入图片描述
ok了

优化博客详情页面排版
访问网页https://github.com/sofish/typo.css
在这里插入图片描述
点击下载后将需要的css文件copy到blog/static/css目录下
在这里插入图片描述
引入css
在这里插入图片描述
修改样式:
在这里插入图片描述
刷新看效果:
在这里插入图片描述
个性化修改

@charset "utf-8";

/* 要注意表单元素并不继承父级 font 的问题 */
.typo button,.typo input,.typo select,.typo textarea {
  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

.typo button::-moz-focus-inner,
.typo input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* 去掉各Table cell 的边距并让其边重合 */
.typo table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 去除默认边框 */
.typo fieldset,.typo img {
  border: 0;
}

/* 块/段落引用 */
.typo blockquote {
  position: relative;
  color: #999;
  font-weight: 400;
  border-left: 1px solid #1abc9c;
  padding-left: 1em;
  margin: 1em 3em 1em 2em;
}

@media only screen and ( max-width: 640px ) {
  .typo blockquote {
    margin: 1em 0;
  }
}

/* Firefox 以外,元素没有下划线,需添加 */
.typo acronym,.typo abbr {
  border-bottom: 1px dotted;
  font-variant: normal;
}

/* 添加鼠标问号,进一步确保应用的语义是正确的(要知道,交互他们也有洁癖,如果你不去掉,那得多花点口舌) */
.typo abbr {
  cursor: help;
}

/* 一致的 del 样式 */
.typo del {
  text-decoration: line-through;
}

.typo address,.typo caption,.typo cite,.typo code,.typo dfn,.typo em,.typo th,.typo var {
  font-style: normal;
  font-weight: 400;
}

/* 去掉列表前的标识, li 会继承,大部分网站通常用列表来很多内容,所以应该当去 */
.typo ul,.typo ol {
  list-style: none;
}

/* 对齐是排版最重要的因素, 别让什么都居中 */
.typo caption, th {
  text-align: left;
}

.typo q:before,.typo  q:after {
  content: '';
}

/* 统一上标和下标 */
.typo sub,.typo  sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

.typo :root sub,.typo  :root sup {
  vertical-align: baseline; /* for ie9 and other modern browsers */
}

.typo sup {
  top: -0.5em;
}

.typo sub {
  bottom: -0.25em;
}

/* 让链接在 hover 状态下显示下划线 */
.typo a {
  color: #1abc9c;
}

.typo a:hover {
  text-decoration: underline;
}

.typo a {
  border-bottom: 1px solid #1abc9c;
}

.typo a:hover {
  border-bottom-color: #555;
  color: #555;
  text-decoration: none;
}

/* 默认不显示下划线,保持页面简洁 */
.typo ins,.typo  a {
  text-decoration: none;
}

/* 专名号:虽然 u 已经重回 html5 Draft,但在所有浏览器中都是可以使用的,
 * 要做到更好,向后兼容的话,添加 class="typo-u" 来显示专名号
 * 关于 <u> 标签:http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
 * 被放弃的是 4,之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
 * 一篇关于 <u> 标签的很好文章:http://html5doctor.com/u-element/
 */
.typo u,.typo  .typo-u {
  text-decoration: underline;
}

/* 标记,类似于手写的荧光笔的作用 */
.typo mark {
  background: #fffdd1;
  border-bottom: 1px solid #ffedce;
  padding: 2px;
  margin: 0 5px;
}

/* 代码片断 */
.typo pre,.typo  code,.typo  pre tt {
  font-family: Courier, 'Courier New', monospace;
}

.typo pre {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 1em 1.5em;
  display: block;
  -webkit-overflow-scrolling: touch;
}

/* 一致化 horizontal rule */
.typo hr {
  border: none;
  border-bottom: 1px solid #cfcfcf;
  margin-bottom: 0.8em;
  height: 10px;
}

/* 底部印刷体、版本等标记 */
.typo small,.typo  .typo-small,
  /* 图片说明 */
.typo figcaption {
  font-size: 0.9em;
  color: #888;
}

.typo strong,.typo  b {
  font-weight: bold;
  color: #000;
}

/* 可拖动文件添加拖动手势 */
.typo [draggable] {
  cursor: move;
}

.typo .clearfix:before,.typo  .clearfix:after {
  content: "";
  display: table;
}

.typo .clearfix:after {
  clear: both;
}

.typo .clearfix {
  zoom: 1;
}

/* 强制文本换行 */
.typo .textwrap,.typo .textwrap td,.typo  .textwrap th {
  word-wrap: break-word;
  word-break: break-all;
}

.typo .textwrap-table {
  table-layout: fixed;
}

/* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */
.typo .serif {
  font-family: Palatino, Optima, Georgia, serif;
}

/* 保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table,
.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote {
  margin-bottom: 1.2em
}

.typo h1,.typo  h2,.typo  h3,.typo  h4,.typo  h5,.typo  h6 {
  font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  font-weight: 100;
  color: #000;
  line-height: 1.35;
}

/* 标题应该更贴紧内容,并与其他块区分,margin 值要相应做优化 */
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6,
.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  line-height: 1.35;
}

.typo h1, .typo-h1 {
  font-size: 2em;
}

.typo h2, .typo-h2 {
  font-size: 1.8em;
}

.typo h3, .typo-h3 {
  font-size: 1.6em;
}

.typo h4, .typo-h4 {
  font-size: 1.4em;
}

.typo h5, .typo h6, .typo-h5, .typo-h6 {
  font-size: 1.2em;
}

/* 在文章中,应该还原 ul 和 ol 的样式 */
.typo ul, .typo-ul {
  margin-left: 1.3em;
  list-style: disc;
}

.typo ol, .typo-ol {
  list-style: decimal;
  margin-left: 1.9em;
}

.typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol {
  margin-bottom: 0.8em;
  margin-left: 2em;
}

.typo li ul, .typo-ul ul, .typo-ol ul {
  list-style: circle;
}

/* 同 ul/ol,在文章中应用 table 基本格式 */
.typo table th, .typo table td, .typo-table th, .typo-table td, .typo table caption {
  border: 1px solid #ddd;
  padding: 0.5em 1em;
  color: #666;
}

.typo table th, .typo-table th {
  background: #fbfbfb;
}

.typo table thead th, .typo-table thead th {
  background: #f1f1f1;
}

.typo table caption {
  border-bottom: none;
}

/* 去除 webkit 中 input 和 textarea 的默认样式  */
.typo-input, .typo-textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

.typo-em, .typo em, legend, caption {
  color: #000;
  font-weight: inherit;
}

/* 着重号,只能在少量(少于100个字符)且全是全角字符的情况下使用 */
.typo-em {
  position: relative;
}

.typo-em:after {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
}

/* Responsive images */
.typo img {
  max-width: 100%;
}

给每个元素都加了.typo
将typo.html里的内容从

copy到


运行查看效果
在这里插入图片描述
修改样式:
在这里插入图片描述

访问页面https://daneden.github.io/animate.css/
在这里插入图片描述
下载后将需要用到的文件copy到static/css目录下
在这里插入图片描述
引入css
在这里插入图片描述
在这里插入图片描述
添加效果后,网页显示会有一个变化(先显示内容,后显示图片)

代码高亮显示
访问网站http://github.com/PrismlS/prism
将需要的文件copy到static/lib/prism目录下
在这里插入图片描述

获取css

在这里插入图片描述

获取JS
在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述
在这里插入图片描述

效果:
在这里插入图片描述
目录生成组件
1、生成导航目录
2、点击微信显示二维码
先做右边工具条(实质就是一个竖着的buutom组合)放在中间内容下面:
先定义一个button
在这里插入图片描述
留言区域定义一个comment
在这里插入图片描述

再到留言区域直接定义id
在这里插入图片描述
在这里插入图片描述
查看效果:
在这里插入图片描述

给图标去掉颜色
在这里插入图片描述
看一下效果:
在这里插入图片描述
加入icon居中显示:
在这里插入图片描述
看下效果:
在这里插入图片描述
接下来做一个从底部直接滑到顶部的一个效果
在这里插入图片描述
刷新查看效果
在这里插入图片描述
点击图标,就会自动跳转到顶部
接下来要设置一下这几个图标的位置
先要定义一下样式
在这里插入图片描述
在这里插入图片描述
然后把它放在一个div里面
在这里插入图片描述
间隔
在这里插入图片描述

运行查看效果

在这里插入图片描述
生成目录
在这里插入图片描述
在这里插入图片描述
访问网站
https://tscanlin.github.io/tocbot/
下载所需内容并拷贝到目录static/lib/tocbot目录下
在这里插入图片描述
引入css
在这里插入图片描述
引入js
在这里插入图片描述
初始化
在这里插入图片描述
根据标题生成目录数
在这里插入图片描述
刷新点击目录看下效果
在这里插入图片描述
设置div宽度
在这里插入图片描述
刷新一下看看效果
在这里插入图片描述
在这里插入图片描述

如图:选到相应的目录,会出现相应的内容

微信二维码

在这里插入图片描述
二维码元素
之前关于我页面有写过,可以直接复制下来用
js控制部分
在这里插入图片描述
加入一个css值
在这里插入图片描述

二维码插件链接

访问https://davidshimis.github.io/qrcodeis/将需要的文件拷贝到static/lib/qrcode目录下
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

平滑滚动


访问网页https://github.com/flesler/jquery.scrollTo
引入cdn
在这里插入图片描述
在这里插入图片描述
完成后点击小三角按钮就可以滑动到顶部

滚动侦测waypoints

在显示页面顶部的时候右侧导航栏不出现
访问http://imakewebthings.com/waypoints/
将需要用到的文件拷贝到static/lib/waypoints目录里
在这里插入图片描述
引入js
在这里插入图片描述
在这里插入图片描述
设置样式
在这里插入图片描述
查看效果:

显示页面顶端的时候导航栏默认不显示
在这里插入图片描述
往下滑一点,导航栏就会显示出来
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
目标检测(Object Detection)是计算机视觉领域的一个核心问题,其主要任务是找出图像中所有感兴趣的目标(物体),并确定它们的类别和位置。以下是对目标检测的详细阐述: 一、基本概念 目标检测的任务是解决“在哪里?是什么?”的问题,即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态,加上成像时光照、遮挡等因素的干扰,目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题: 分类问题:判断图像中的目标属于哪个类别。 定位问题:确定目标在图像中的具体位置。 大小问题:目标可能具有不同的大小。 形状问题:目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类: Two-stage算法:先进行区域生成(Region Proposal),生成有可能包含待检物体的预选框(Region Proposal),再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法:不用生成区域提议,直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列(YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等)、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例,YOLO将目标检测视为回归问题,将输入图像一次性划分为多个区域,直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征,使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层,通过卷积层提取图像特征,通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域,为人们的生活带来了极大的便利。以下是一些主要的应用领域: 安全监控:在商场、银行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值