代码拉取完成,页面将自动刷新
docsify 插件
插件列表
在浏览docsify文档页面时,如果页面内容较多,当垂直方向上的滚动条已滚动的像素值超过指定的像素值时,显示Top
样式的文本框按钮,点击该按钮则会将页面滚动至网页的顶部。
将以下脚本加入index.html
中
<script src="//unpkg.com/@zhg-x/docsify-plugins@1.0.2/src/scroll-to-top.js"></script>
window.$docsify = {
// Other configuration...
scrollToTop: {
auto: true,
text: 'Top',
icon: 'arrow-up-1',
right: 15,
bottom: 15,
width: 50,
height: 40,
offset: 500
}
}
boolean
true
false
,则按钮会一直显示在页面上string
Top
类型:string
默认值:arrow-up-1
描述:图标样式,该属性值有两个可选项:(arrow-up-1
和arrow-up-2
)
arrow-up-1
图标样式如下所示:
arrow-up-2
图标样式如下所示:
注意: 当scrollToTop.text
和scrollToTop.icon
属性都配置时,显示scrollToTop.text
的配置内容
number
15
number
15
number
50
number
40
number
500
auto
为true
时该属性的配置才会生效在每个页面的底部加上页脚
Docsify文档插件开发一文中已经提供了一种添加页脚的方法,详见:Docsify插件开发示例 footer
如下图所示,当页面内容较少时,页脚内容不在页面底部
介于上图的情况,此插件结合内容显示区域高度、文本内容的高度、页脚高度,通过计算,当页面内容较少时(内容显示区域高度大于文章文本内容高度与页脚高度之和时)计算出空余区域的高度,创建空的DIV用来填充,使得页脚处于页面底部。
将以下脚本加入index.html
中
<script src="//unpkg.com/@zhg-x/docsify-plugins@1.2.2/src/custom-footer.js"></script>
const footerHtml = [
'<hr/>',
'<footer>',
'<span><a href="https://www.npmjs.com/package/@zhg-x/docsify-plugins" target="_blank">docsify-plugins</a></span>',
'<span style="margin-left: 20px;"><a href="https://docsify.js.org/#/zh-cn/" target="_blank">docsify文档</a>.</span>',
'</footer>'
].join('');
const footerNode = document.createElement('div');
footerNode.innerHTML = footerHtml;
footerNode.style.padding = '0 30px';
footerNode.style.textAlign = 'center';
window.$docsify = {
// Other configuration...
customFooter: {
// footerElement: footerNode,
textLinks: [
{
tagType: 'a',
text: 'CSDN',
link: 'https://blog.csdn.net/pro_fan'
},
{
tagType: 'text',
text: '更新时间:2022/04/15'
}
]
}
}
boolean
true
footerElement
且 footerElement
不是预期类型时,会将该配置项的值置为 false
,不显示页脚内容。数组
[
{
tagType: '[必填]标签类型',
id: '[可选]元素id属性',
text: '[必填]文本信息',
link: '[如果是超链接,则必填]链接地址',
style: { // 可选
'CSS样式名称': 'CSS样式值'
}
}
]
textLinks: [
{
tagType: 'a', // 标签类型
text: 'CSDN',
link: 'https://blog.csdn.net/pro_fan'
},
{
tagType: 'img',
id: 'my-img',
text: 'img',
style: {'height': '20px'},
link: 'https://unpkg.com/@zhg-x/resources@1.0.0/assets/images/arrow-up-1.png'
},
{
tagType: 'text',
text: '更新时间:2022/04/15'
}
]
{'CSS属性名': 'CSS属性值'}
height: 50px
等,更多默认属性请打开控制台选区页脚元素进行查看null
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。