• 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件、模板主题售前、售后问题请联系QQ:5916171

技巧教程 [小工具] 为XenForo编辑器添加锚点(Anchor)及传送功能

YYT

UID
18
注册
2017/10/06
消息
78
反馈评分
332
黄金
10,212.3G
什么是锚点?
是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。
效果就是,当你点击锚点传送链接,它可以将你直接滑到对应的锚点位置
经常使用github或者使用markdown写文档的朋友应该相当熟悉


怎么实现?
这里利用的是Xenforo自带的BBcode与html进行替换的功能
1585819835523.png

[REPLY]首先,让我们新建一个自定义BB代码,用于设置锚点
BB代码标签命名为“anchor”(可自定义),标题描述随便填就行
替换模式中选择简单替换即可,支持选项参数选择“是”
HTML替换栏中像下面这样填:
HTML:
<style>
    .anchor {
        padding-top: 115px;
</style>
<a class="anchor" id="{option}">{text}</a>
解释一下,下面的<a>标签就是对应的html锚点代码
而上面的style部分是因为Xenforo的导航栏会随着页面下滑跟着浮动向下
而锚点默认会被置于窗口顶部,也就是会被浮动的导航栏遮挡住
所以我们给锚点设置一定的距离上边间隔(115px是我设的,可以根据具体情况更改)
如果有更好的解决方法也欢迎跟我说!!(padding实属无奈之举,可能会带来问题)
图标的话自己选一个fontawesome填一下就好(建议使用anchor)然后保存退出

那至此锚点的BBcode替换也就完成了,接下来我们来做锚点传送链接的替换

让我们再新建一个自定义BB代码替换,用于传送至指定锚点
BB代码标签设置为“toanchor”(可自定义),标题描述还是随意
替换模式中也选择简单替换,支持选项参数同样选择“是”
HTML替换栏这样填:
HTML:
<a href="{option}">{text}</a>
此处需要说明的是{option}前没有写上#是因为大部分人输入习惯会自几带上#
而且不默认带#也可以更方便进行跨贴锚点的传送
然后选择一个合适的图标保存即可[/REPLY]

两个代码自定义完成后在BB代码按钮管理器中添加到编辑器里之后即可快速应用了

1585821665635.png
1585821702444.png

支持一下呗~也研究了好一会~
想看效果的可以到MineBBS:https://www.minebbs.com/
 
最后编辑:

9527

Cnury 站长
UID
259
注册
2019/01/30
消息
32
反馈评分
82
黄金
2,641.2G
    Windows 10 Chrome 78.0.3904.108
  • #2
好!:icon-evil:
 
  • 支持
反馈: YYT

小关_

打酱油的路过~~
管理成员
UID
255
注册
2019/01/25
消息
489
反馈评分
1,412
黄金
7,860.5G
    Windows 10 Chrome 80.0.3987.149
  • #3
支持~ (y) :ROFLMAO:
 
  • 支持
反馈: YYT
顶部 底部