网页开发中用到的插件
1、编辑器Markdown
https://pandao.github.io/editor.md/
用法:
-
将文件下载下来,解压缩
-
将解压后的文件中的一些文件导入自己的项目中
-
引入css样式
<link rel="stylesheet" href="../css/editormd.css" />
-
引入js文件
<script src="js/jquery.min.js"></script> <script src="../editormd.min.js"></script>
-
定义textarea标签
<div class="field"> <div id="md-content" style="z-index: 1 !important;"> <textarea name="content" placeholder="博客内容" style="display: none;"> [TOC] #### Disabled options - TeX (Based on KaTeX); - Emoji; - Task lists; - HTML tags decode; - Flowchart and Sequence Diagram; </textarea> </div> </div>
-
定义js
<script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("对应包含textarea的id", { width : "90%", height : 640, syncScrolling : "single", path : "../lib/" }); /* // or testEditor = editormd({ id : "test-editormd", width : "90%", height : 640, path : "../lib/" }); */ }); </script>
2、内容排版typo.css
https://github.com/sofish/typo.css
用法:
-
下载源文件
-
将css文件导入项目
-
由于typo.css中的样式和semantic ui中的样式有些冲突所有稍微修改一下typo.css中的样式
@charset "utf-8"; .typo p { font-size: 16px; font-weight: 300; line-height: 1.8; text-align: justify; } .typo li { font-weight: 300; padding: 4px 0; } /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ .typo article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } /* HTML5 媒体文件跟 img 保持一致 */ .typo audio, canvas, video { display: inline-block; } /* 要注意表单元素并不继承父级 font 的问题 */ .typo button, input, select, 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, 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, abbr { border-bottom: 1px dotted; font-variant: normal; } /* 添加鼠标问号,进一步确保应用的语义是正确的(要知道,交互他们也有洁癖,如果你不去掉,那得多花点口舌) */ .typo abbr { cursor: help; } /* 一致的 del 样式 */ .typo del { text-decoration: line-through; } .typo address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 400; } /* 去掉列表前的标识, li 会继承,大部分网站通常用列表来很多内容,所以应该当去 */ .typo ul, 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%; }
3、动画animate.css
https://daneden.github.io/animate.css/
用法:
-
下载css文件或者使用在线的cdn
-
cdn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
4、代码高亮
https://prismjs.com/
用法:
-
官网下载自己喜欢的样式的css和js文件
-
将文件引入项目
-
将代码用pre标签包裹,并加上language-css类
<pre> <code class="language-css"> p { color: red } </code> </pre>
5、目录生成
https://tscanlin.github.io/tocbot/
用法:
-
官网下载源文件后,将文件目录dist中的css和js文件导入项目
-
进行初始化
tocbot.init({ // Where to render the table of contents. // 在显示目录的区域添加js-toc tocSelector: '.js-toc', // Where to grab the headings to build the table of contents. // 在需要生成目录的内容中添加js-toc-content contentSelector: '.js-toc-content', // Which headings to grab inside of the contentSelector element. headingSelector: 'h1, h2, h3', // For headings inside relative or absolute positioned containers within content. hasInnerContainers: true, });
6、二维码生成
https://davidshimjs.github.io/qrcodejs/
用法:
-
下载源文件
-
将其中的js文件导入项目
-
引入js文件
-
添加如下代码
var qrcode = new QRCode("需要显示二维码标签的id", { text: "跳转到的网站", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H });
7、滚动条平滑滚动
https://github.com/flesler/jquery.scrollTo
用法:
-
引入cdn
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
-
在回到顶部中添加id然后添加js代码
$("#toTop-button").click(function () { $(window).scrollTo(0,500); })
8、滚动监测
用法:
-
下载源文件,解压将lib目录下的js文件导入项目
-
项目引用js文件
-
添加如下js代码
var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } })