设为首页收藏本站

亚洲数据论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 2569|回复: 1
打印 上一主题 下一主题

【资源】 0 Money "精彩导读" DIY之全攻略

[复制链接]

566

主题

752

帖子

14

精华

Rank: 7Rank: 7Rank: 7

积分
3694
1694 枚
0 枚
2 枚
跳转到指定楼层
楼主
发表于 2015-2-17 20:01:58 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 勇敢的心 于 2015-2-17 21:19 编辑

编辑文章时,使用过DZ "目录" 功能的童鞋相信会对它的强大功能深深折服,它可以跳转到指定的页面,甚至是一帖子的tid和pid,想跳转哪里就跳转到哪里,好不惬意!有的小伙伴问我同篇文章之内又该如何用锚点建立跳转链接?类似全文导读的功能?仔细研究了下,这个还真没法直接做到(至少我没发现),真想用的话只能上 HTML代码,或者使用[index]标签的tid和pid跳转功能,(有些麻烦,而且必须事先将文章切割为几个部分分散到不同的楼层中,很明显很不方便且无法在同一楼层内实现).


一个偶然的机会,偶然的灵感: 既然使用HTML代码可以实现,为何不将其转化为DZ代码使用呢? 于是说做就做,经过近两周的努力(主要是技术太菜,基本上是从零学起)和多次的测试,已经基本完工,遂急不可待的拿出来分享给大家! tips: 如果你懒得理解或不能理解上面说了些什么,好吧,直接用图片代替以上的文字吧!



好,接下来,有兴趣,有需要的小伙伴们一起开工尽情DIY吧!


一.添加Discuz!代码


共需添加4个自定义Discuz!代码(我比你更嫌多,无奈一个dz代码最多只支持3个动态参数),按步骤来逐个添加不容易明白的地方会有详细的解释说明.


1.下载并解压附件中的图片,将其上传至/static/image/common/目录. (想以后升级方便的话可以在/common下新建一文件夹, "图标文件 / 描述" 这里填写为对应的/common/xxx/xxx.png 即可) daohang.zip (11.3 KB, 下载次数: 79)


2.登录你的管理后台->界面-->左侧编辑器设置--->自定义Discuz! 代码 按照下图所示填写相应的内容,最后点击提交按钮完成添加.注意 "显示顺序" 这里请根据自己情况填写.



3.添加之后依次点击进入每个新加代码右侧的详情页面,添加以下内容:


[dh]标签:


标签:
  1. dh
复制代码

替换内容: (注意修改img的地址)
游客,如果您要查看本帖隐藏内容请回复

例子:
  1. [hp]添加文章导航目录[/hp]
复制代码

解释:
  1. 添加贴内顶部全文导航目录
复制代码

参数个数:
  1. 3
复制代码

参数提示语:
  1. 1. 请输入导航排版样式, 横版输入: <strong><font color="Red">h</font></strong>&nbsp;&nbsp;竖版输入: <strong><font color="Red">s</font></strong>&nbsp;&nbsp;两者兼顾: <strong><font color="Red">sh</font></strong>
  2. 2. 请输入列表宽度,参考值: 横版&nbsp;<strong><font color="Red">520</font></strong>&nbsp;&nbsp;竖版&nbsp;<strong><font color="Red">330</font></strong>
  3. 3. 请输入导航标题, 如: <strong><font color="Red">全文导航</font></strong>
复制代码

嵌套次数:
  1. 2
复制代码

允许使用此代码的用户组:
  1. 自行设置
复制代码



[hli]标签


标签:
  1. hli
复制代码

替换内容:
  1. <script type="text/javascript">var li='<li><a href="#{1}">{2}</a></li>';var lidiv="{3}";if(lidiv=="ulend"){document.write(li+'</ul></div>')}else if(lidiv=="end"){document.write(li+'</ul></div></div></div>')}else{document.write(li)}</script>
复制代码

例子:
  1. [hli=a1,一. 我们都在互联网的表层] [/hli]
复制代码

解释:
  1. 导航中的list,竖版中放置[sli]标签后使用
复制代码

参数个数:
  1. 3
复制代码

参数提示语:   
  1. 1. 请输入文中对应链接id,如 : <strong><font color="Red">a1</font></strong>
  2. 2. 请输入链接标题文本,如 : <strong><font color="Red">一. 我们都在互联网的表层</font></strong>
  3. 3. 请输入<strong><font color="Red">空格</font></strong>, 末尾标题请输入: <strong><font color="Red">end</font> 注意! </strong>在竖版中使用,一小段结束时输入: <strong><font color="Red">ulend</font></strong> (代表</ul></div>);全段结尾时输入: <strong><font color="Red">end</font></strong> (代表</ul></div></div></div>).<hr class="l" /><div align="center"><strong><font color="Blue">【完整横版导航示例】</font></strong></div><hr class="l" />[dh=<strong><font color="Red">h</font></strong>]<strong><font color="Red">全文导航</font></strong>[/dh][hli=<strong><font color="Red">id1</font></strong>,<strong><font color="Red">一. 我们都在互联网的表层</font></strong>]<strong><font color="Red">空格</font></strong>[/hli][hli=<strong><font color="Red">id2</font></strong>,<strong><font color="Red">二. 另一个平行的互联网世界</font></strong>]<strong><font color="Red">end</font></strong>[/hli]
复制代码

嵌套次数:
  1. 1
复制代码

允许使用此代码的用户组:
  1. 自行设置
复制代码



[sli]标签


标签:
  1. sli
复制代码

替换内容:
  1. <div style="float:left; display: inline-block; text-align:left; margin-right: 20px;"><p style="text-indent:1em"><strong>{1}</strong></p>
  2. <ul class="list-s">
  3. <li><a href="#{2}">{3}</a></li>
复制代码

例子:
  1. [sli=第一章,a1]我们都在互联网的表层[/sli]
复制代码

解释:
  1. 竖版导航list,需配合hli使用
复制代码

参数个数:
  1. 3
复制代码

参数提示语:
  1. 1. 请输入竖版分段标题,如: <strong><font color="Red">第一章</font></strong>
  2. 2. 请输入文中对应链接id,如: <strong><font color="Red">a1</font></strong>
  3. 3. 请输入链接标题: <hr class="l" /><div align="center"><strong><font color="Blue">【完整竖版导航示例】</font></strong></div><hr class="l" />[dh=<font color="Red">s</font>]<strong><font color="Red">全文导航</font></strong>[/dh]<strong>[sli=<font color="Red">第一章</font></strong>,<strong><font color="Red">id1</font></strong>]这里输入<strong><font color="Red">第一行文本</font>[/sli]</strong>[hli=<strong><font color="Red">id2</font></strong>,<strong><font color="Red">第二行文本</font></strong>]此处输入一个<strong><font color="Red">空格</font></strong>[/hli][hli=<strong><font color="Red">id3</font></strong>,<strong><font color="Red">第三行文本</font></strong>]<strong><font color="Red">ulend</font></strong>[/hli]<strong>[sli=<font color="Red">第二章</font></strong>,<strong><font color="Red">id4</font></strong>]<strong><font color="Red">第一行文本</font>[/sli]</strong>[hli=<strong><font color="Red">id5</font></strong>,<strong><font color="Red">第二行文本</font></strong>]<strong><font color="Red">end</font></strong>[/hli]
复制代码

嵌套次数:
  1. 1
复制代码

允许使用此代码的用户组:
  1. 自行设置
复制代码



[id]标签


标签:
  1. id
复制代码

替换内容:
  1. <div id="{1}"></div>
复制代码

例子:
  1. [id]a1[/id]
复制代码

解释:
  1. 设置文中锚点id
复制代码

参数个数:
  1. 1
复制代码

参数提示语:
  1. 1. 请输入自定义锚点id,如: <strong><font color="#ff0000">a1</font></strong>
复制代码

嵌套次数:
  1. 1
复制代码

允许使用此代码的用户组:
  1. 自行设置
复制代码



4.这一步也是非常关键的一步,修改/template/default/common/header_common.htm文件(请注意备份!)查找<base href="{$_G['siteurl']}" />将其替换为
  1.           <!--{if $_GET[mod] != 'viewthread' }-->
  2.           <base href="{$_G['siteurl']}" />
  3.           <!--{/if}-->
复制代码

<base>标签的作用是让本页面所有引用资源都从根目录查找,单击导航链接标题的话会直接打开"站点+锚点id" ,加上上面的判断语句后才可以在帖子中实现页内跳转,所以这一步也是非常重要的一步.


使用指北


其实使用方法与示例已在上面的每个代码中详细说明,完成以上步骤后,返回发贴页面,点击相应的新加Discuz! 代码即可看到,其中红色字体是要输入的具体参数.最后一个[id]标签是在正文中使用的,在导航标题想要链接到的地方点击插入对应的锚点id即可.如果你不嫌麻烦可以再看下接下来的几个实例和说明,当然也许你也会不再感觉这4个Discuz! 代码按钮的阵容庞大,替而代之的是充分展示它的灵活,方便与强大!


  1. [dh=h,520]关于古龙[/dh]
  2. [hli=a1,一. 古龙生平简介] [/hli][hli=a2,二. 古龙妙论精选] [/hli][hli=a3,三. 谁来跟我干杯] [/hli][hli=a4,四. 古龙照片合集] [/hli][hli=a5,五. 古龙小说异名整理] [/hli][hli=a6,六. 新编古龙武侠小说年表 (附:古龙影视资讯年表)] [/hli][hli=a6,七. 书评——满楼花开,明月应照君归来]end[/hli]
复制代码

这是最简单的一个横版导航列表的例子,只需要[dh][hli]两个标签来共同完成.其中dh=h 表示的为横版列表,520代表列表的宽度,可以根据标题的长短自行设置.注意代码中间的空格部分,在列表中表示一个空的参数,最后标题换成一个end来代表该列表的结束,end对应的参数为: </ul></div></div></div>(编辑文章时未开启html代码功能,直接输入这些标签的话会将这些标签转译而至失效!)



横版导航切换到窄版风格时的显示效果




  1. [dh=sh,330]古龙作品全集在线阅读[/dh]
  2. [sli=陆小凤传奇,a1]陆小凤之《绣花大盗》[/sli][hli=a2,陆小凤之《决战前后》] [/hli][hli=a3,陆小凤之《凤舞九天》]ulend[/hli][sli=小李飞刀,b1]小李飞刀《多情剑客无情剑》[/sli][hli=b2,小李飞刀《九月鹰飞》]ulend[/hli][sli=七种武器,c1]七种武器之《长生剑》[/sli][hli=c2,七种武器之《孔雀翎》] [/hli][hli=c3,七种武器之《多情环》] [/hli][hli=c4,七种武器之《离别钩》] [/hli][hli=c5,七种武器之《碧玉刀》] [/hli][hli=c6,七种武器之《拳头》]end[/hli]
复制代码

竖版导航由[dh],[sli][hli]三组标签共同完成.[sli]代表<div><ul>这部分的代码,[hli]则表示每一个<li>元素.注意上面[hli]代码的3个参数,在竖版导航中正常表示<li>元素时和横版同样为一个空格,一小段列表结束时用ulend参数(代表</ul></div>)全导航最后一个列表结束时和横版一样用end参数表示. 每个导航标签都需首尾相连,这对文章的编辑带来了很多的不便,这样做的原因是DZ会对折行内容自动添加<br />标签,从而造成列表排版的混乱.以上代码对应截图如下



最后声明


1.使用前请先测试无误后在正式投入使用,以上任何步骤和内容都可根据自己喜好自行调整,如一些参数和图标等,但一经使用尽量不要再加改动,以防止原文章中已在使用的代码由于参数变更而出现错误;


2.测试所用浏览器为linux/opera和google-chrome,其他浏览器未测,不保证完全适用;


3.由于新手一枚,0基础学起,各种bug在所难免,还请多多指正说明;


4.原创文章,版权共享,可无条件无限制自由转载.




亚洲数据论坛 - 作者版权声明分割线

Respect for the original creation of the hard, the author of : 勇敢的心  In this thanks!



分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
收藏收藏 转播转播 分享分享 【捉Bug达人有奖活动进行中...】报bug 分享淘帖 顶,支持顶,支持 踩,反对踩,反对

是失败让我乐观;
是快乐让我冷静.
因为我有一颗和你一样勇敢的心!

0

主题

2

帖子

0

精华

Rank: 1

积分
11
11 枚
0 枚
0 枚
沙发
发表于 2015-11-11 21:24:21 | 只看该作者
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
Welcome to the Asian data center forum, I wish you all the best!
支持支持 高兴高兴 淡定淡定 惊呆了惊呆了 给力给力 回帖回帖 生气生气 感谢感谢 路过路过
自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|Archiver|站点地图|亚洲数据论坛   

GMT+8, 2017-9-21 09:23

©2009-Infinity  Data Forum Asia

快速回复 返回顶部 返回列表