0 Money "精彩导读" DIY之全攻略

编辑文章时,使用过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 即可)

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

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

[dh]标签:

标签:

1. dh

复制代码

替换内容: (注意修改img的地址)

1. <style>.pl .tindex2{padding:5px;width:90%;border:1px solid#CCC;background:url(http://Your site/static/image/postbg/2.jpg);line-height:28px}
   
2. .pl .tindex2 h3{margin-bottom:10px;padding-left:0;border-bottom:1px #ccc dotted;text-align:center}
   
3. .cl1:after{clear:both;display:block;visibility:hidden;height:0;content:"."}
   
4. .cl1{zoom:1}
   
5. .list-h li{float:left;overflow:hidden;padding-left:22px;width:{2}px;height:28px;border-bottom:1px dashed #cdcdcd;background:url(http://Your site/static/image/common/ico_mulu.png) no-repeat 10px center;color:#f33;text-align:left;font-family:arial}
   
6. .list-s li{vertical-align:top;overflow:hidden;padding-left:22px;width:{2}px;height:28px;border-bottom:1px dashed #cdcdcd;background:url(http://Your site/static/image/common/ico_mulu.png) no-repeat 10px center;color:#f33;font-family:arial}
   
7. .list-h li a:visited{color:#800080}
   
8. .list-s li a:visited{color:#800080}
   
9. </style>
   
10. <div align="center">
    
11. <div class="tindex2 cl1">
    
12. <h3 style="border-bottom: 1px dashed #CDCDCD;">{3}&nbsp;<img style="width: 12px; height: 12px;" src="http://Your site/static/image/common/main_spinner.gif" alt="Wonderful directory navigation"/></h3>
    
13. <script type="text/javascript">var daohang="{1}";switch(daohang){case"h":document.write('<div><ul class="list-h">');break;case"s":document.write("");break;case"sh":document.write('<ul class="list-h">');break}</script>

复制代码

例子:

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.原创文章(文章来源: http://bbs.asiaidc.net/thread-398-1-1.html),版权共享,可无条件无限制自由转载.

推荐阅读:

《为你的文章页面加入倒计时功能》https://discuz.dismall.com/thread-3600470-1-1.html

來看看謝謝大大你分享

老闆 发表于 2015-3-1 14:59
來看看謝謝大大你分享

多谢支持!

Asiaidc.net 发表于 2015-3-16 18:03
多谢支持!

恩不客氣友人
日後希望都多關照喔