个人博客【页面插件集成】---学习09

最新推荐文章于 2023-06-18 10:05:40 发布
最新推荐文章于 2023-06-18 10:05:40 发布
阅读量274 收藏
点赞数 2
分类专栏： spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uoprewqsnh/article/details/117651867
版权

文章目录

一、思维导图

在这里插入图片描述

二、Markdown

1、网上学习

网址：https://pandao.github.io/editor.md/

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown。

2、下载

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

3、创建lib文件夹，放入插件

在这里插入图片描述

4、使用插件

  • 编写blogs-input.html
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

5、运行查看效果

在这里插入图片描述

  • 手机端
    在这里插入图片描述

6、下载样式

7、解压出来把typo.css拷贝到css下

在这里插入图片描述

8、编写博客详情

  • text-align: justify; 两端对齐
  • class=“ui table” 移动端
  • 导入外部链接
    在这里插入图片描述
  • 运用外部链接
    在这里插入图片描述

9、把type.html中中间部分复制过来

在这里插入图片描述

10、运行查看效果

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

三、动画插件

网址：https://animate.style/
在这里插入图片描述

  • 下载下来拷贝到css中
    在这里插入图片描述

1、查看使用方法

在这里插入图片描述

2、引入外部样式

在这里插入图片描述

3、运用动画样式

在这里插入图片描述

4、运行查看效果

在这里插入图片描述

5、高亮

网址：https://github.com/PrismJS/prism
在这里插入图片描述
官网：https://prismjs.com/

6、下载

在这里插入图片描述

  • 一共下载两种，一是js，另外一种css

7、拷贝在lib下

  • 在lib下创建prism文件夹
    在这里插入图片描述
    在这里插入图片描述

8、引入外部高亮链接

在这里插入图片描述

9、使用高亮样式

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

10、运行查看效果

在这里插入图片描述

11、添加目录，留言，微信，返回头部

在这里插入图片描述

12、运行查看效果

在这里插入图片描述

13、目录生成插件

网址：https://tscanlin.github.io/tocbot/
在这里插入图片描述

14、下载

在这里插入图片描述

15、拷贝到lib中

  • 创建tocbot目录，把它拷贝在 这里
    在这里插入图片描述

16、引入外部链接

-css
在这里插入图片描述
-js
在这里插入图片描述

17、编写blog.html

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

  • tocSelector: ‘.js-toc’, 要把目录初始化到那个区域，通过css来选用滴

18、运行查看效果

在这里插入图片描述

19、添加二维码

在这里插入图片描述

在这里插入图片描述

20、运行查看效果

在这里插入图片描述

21、生成二维码

网址：https://davidshimjs.github.io/qrcodejs/

  • 下载
    在这里插入图片描述
  • 拷贝到lib下创建qrcode目录下
    在这里插入图片描述

22、引入外部链接

在这里插入图片描述

23、二维码生成

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

24、运行查看效果

在这里插入图片描述

25、平滑滚动插件

在这里插入图片描述

26、导入样式

在这里插入图片描述

27、编写blog

在这里插入图片描述

在这里插入图片描述

28、运行查看效果

在这里插入图片描述

  • 点击返回头部
    在这里插入图片描述

29、滚动侦测

网址：http://imakewebthings.com/waypoints/

在这里插入图片描述

30、下载

在这里插入图片描述

31、拷贝在lib下

  • 把它放在创建waypoints目录下
    在这里插入图片描述

32、引入外部链接

在这里插入图片描述

33、编写滚动

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

34、运行查看效果

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

T17761154460
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
开发小而美的个人博客之页面插件集成
erwaplus的博客
07-02 575
文章目录一、前言二、插件1、编辑器Markdown2、内容排版typo.css3、动画animate.css4、代码高亮prism5、目录生成 Tocbot5、平滑滚动 jquery.scrollTo6、二维码生成 qrcode.js8、补充 一、前言 为了使开发的页面更加美观更具观赏性，还使用了许多插件，例如：编辑器Markdown、内容排版typo.css、动画animate.css、代码高亮prism、目录生成 Tocbot、滚动侦测 waypoints、平滑滚动 jquery.scrollTo、二维
个人博客制作——插件引入
观山奇的博客
06-14 400
页面大部分都已做好，现在进入细节优化。插件的引入 文章目录插件引入1.markdown2.内容排版3.动画引入4.代码高亮5.侧边工具栏及相关插件 插件引入 1.markdown 地址：editor 页面引入插件 修改页面内容 <!-- <textarea name="content" placeholder="博客内容"></textarea> --> <div id="md.
搭建个人博客需要用到的插件
sjgllllll的博客
03-03 215
编辑器 Markdown https://pandao.github.io/editor.md/ 内容排版 typo.css https://github.com/sofish/typo.css 动画 animate.css https://daneden.github.io/animate.css/ 代码高亮 prism https://github.com/PrismJS/prism 目录生成 Tocbot https://tscanlin.github.io/tocbot/ 滚动侦测 wa
个人博客搭建中所用到的一些前端实用插件
qq_41650131的博客
01-14 393
1、Markdown编辑器插件： https://pandao.github.io/editor.md/ 2、中文内容排版插件： https://github.com/sofish/typo.css 3、动画插件： https://daneden.github.io/animate.css/ 4、代码高亮插件： https://github.com/PrismJS/prism...
个人使用插件整理
b453293486的博客
02-16 188
jquery 数字递增 数字动画插件 jquery.running.js jquery.countup.js vue手风琴插件[不是导航]vue-accordion 另外有个vue轮子工厂http://www.wheelsfactory.cn/#/懒得写就自己找 ...
课设毕设基于SSM的多用户博客个人网站-LW+PPT+源码可运行.zip
最新发布
05-17
标题 "课设毕设基于SSM的多用户博客个人网站-LW+PPT+源码可运行.zip" 提供的信息表明，这是一个针对学生课程设计或毕业设计的项目，它是一个多用户博客系统，构建在SSM（Spring、SpringMVC、MyBatis）框架之上。...
react-DevBlog一个使用GatsbyJS和React构建的轻量级可自定义的个人博客模板
08-15
通过以上分析，我们可以了解到DevBlog是如何利用React和GatsbyJS的强大功能，构建出一个轻量级、可自定义的个人博客模板。无论是对于React新手还是经验丰富的开发者，这个模板都是一个很好的学习和实践资源。
课程设计-Flask个人博客系统（数据库 + 运行文档）
12-16
在信息技术领域，构建一个个人博客系统是学习Web开发技术的常见实践项目。本文将深入探讨一个基于Flask框架的个人博客系统，该系统结合了数据库操作，实现了丰富的功能，包括用户登录注册、博客展示与管理等。 一、...
芝麻开门博客网.zip-Java源码项目
04-17
【芝麻开门博客网.zip - Java源码项目】是一个基于Java技术开发的博客系统，它包含了软件工程中的多个重要环节，如需求分析、设计、编码、测试等，是学习和研究Java Web开发的一个实用案例。该项目可能适用于软件...
个人博客系统的设计与实现-源码
09-30
《个人博客系统的设计与实现》是一个典型的Web应用项目，它涵盖了软件工程的多个关键领域，包括前端界面设计、后端服务器开发、数据库管理和用户交互逻辑。在这个项目中，我们可以深入学习到以下重要的IT知识点： 1...
基于Hexo和Butterfly创建个人技术博客，(11) 使用插件增强博客站点能力
编程是一门实践技术
06-18 674
基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入，详细记录了个人建站全过程。系列专题-使用插件增强博客站点能力
个人博客系统文章管理代码集成markdown插件
wyqgg123的博客
07-22 926
概述： ​ 在我实现博客系统的文章管理时，在之前这种操作我都会使用富文本编辑器实现提交，但是因为我再csdn上发表文章的时候有一种编辑器叫markdown编辑器，我平时使用的记笔记软件Typora也是markdown风格，所以我就想在文章管理，以及今后前台发布文章时使用markdown编辑器实现。下面就是我实现markdown的过程。 1、下载editor.md插件 git地址:https://github.com/pandao/editor.md.git npm安装：npm install editor.
（九）博客详情页面(目录生成)插件集成
weixin_48102099的博客
03-24 622
1,做一个绝对目录的导航 步驟： 1.使用垂直方向的buttons <div class="ui vertical icon buttons "> <button type="button" class="ui teal button">目录</button> <a href="#comment-content" class="ui teal button">留言</a> <button type="button"
tocbot.js_使用Tocbot自动生成目录
cune1359的博客
07-04 4734
越来越长的内容正成为一种规范， 受到了Google和用户的广泛欢迎。 但是，阅读带有大量副标题的长格式内容可能有点令人头疼 。 输入Tocbot ，这是一个基于JavaScript的免费内容生成器表 。 这会在任何页面上自动创建一个固定的目录列表，并在您滚动经过每个标题时更新您的位置。 另请阅读： 使用HTML插槽创建自动生成的目录 主页包括完整的预览以及可用来进行所有设置的文档...
【前端插件推荐】8个实用前端插件 --（个人博客必备）
热门推荐
ATFWUS的博客
05-16 3万+
0x01.MarkDown编辑器（Editor.md） 对于个人博客来说，能在线编辑的MarkDown编辑器是必不可少的，它能让你的体验更加美好哦~ 这里推荐的是 Editor.md 这款插件，原因是简洁且功能强大，并且官网上附有详细的示例。 具体可以访问 Editor.md 的官网：http://editor.md.ipandao.com/ 集成详细步骤： 1.下载： 官网下拉，点击github下载。 2.复制必要文件： 3.引入资源： <!-- editormd插件css --&gt
Spring Boot制作个人博客-页面插件集成
qq_48838980的博客
06-09 1752
文章目录一、给blogs-input.html页面添加插件集成（编辑器 Markdown）1、引入editormd.min.css2、添加初始化内容3、初始化markdown编辑器4、优化代码二、给博客详情页面添加插件集成（内容排版typo.css）1、下载样式2、解压压缩包，拷贝typo.css3、引用typo.css4、添加样式5、修改typo.css样式6、修改blog.html中间内容7、添加样式typo.css三、给博客详情页面添加插件集成（动画animate.css）1、访问：https://a
一个好的个人博客网站需要有的网页插件
oNew_Lifeo的博客
06-20 1395
最近自己搭建了一个个人博客网站，在这分享一下用到的网页插件 一、markdow编辑器 一个博客网站最核心的是什么，没错，就是markdown编辑器。markdown编辑器相信大家并不陌生，毕竟CSDN写博客也经常用。 下面是自己的个人博客用到的编辑器插件 附上链接：markdown编辑器Editor.md 二、markdown文本解析 大家都知道，使用markdown编写的文本通过符号来表现样式，比如一个#表示一级标题，##表示二级标题，这时候问题来了，怎么将这些文本保存进数据库怎么将相应的样式渲染到页面
【程序员节特别推送】搭建一个与"技术"无关的博客网站(Java后台)
明月沉江春雾晓
10-24 8322
我一直追求着一种纯粹，写技术博客，就好好地写，心无旁骛。 我目前唯一写作的平台就是CSDN，身边也有一部分人写了一篇文章在各个平台都有发表，我不喜欢这样，我觉得有复制粘贴的功夫，不如多花点时间打磨文章。 同样。我也不喜欢技术博文中掺杂过多的杂质，我讨厌营销号的文章，也讨厌发表大量与技术无关的文章。 于是因为这种状况，很长的一段日子里，我一直都缺失存放原始的感情、梦想、挣扎、无奈、和希望、和爱的空间。所以有了这个博客网站，它能陪我终老吗，不能吧。可能有一天，我写不动了，或许它就自然消散了。但我还是会希望
生成目录插件
大汗水的博客
03-08 646
生成目录插件 访问地址 https://tscanlin.github.io/tocbot/ 2.点击下载 3.下载 4.将该文件夹下的所有内容引入文件 5.引入需要使用文件之后，查看官方文档，进行初始化，将改代码复制到项目文件 6.将前面对应的元素加到自定义的地方即可。 ...
WordPress插件开发全攻略：从入门到精通
"WordPress插件开发全攻略，适合新手学习，涵盖了从插件的基本概念到高级功能的实现，包括插件的结构、动作、过滤器、数据库交互、前端及后台界面构建、JavaScript和CSS的使用以及AJAX集成，并介绍了插件的发布与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值