Menu 使用打字稿将菜单链接标题更改为图像
My typo3网站有一个菜单,其中包含以下打字脚本定义:Menu 使用打字稿将菜单链接标题更改为图像,menu,typo3,typoscript,Menu,Typo3,Typoscript,My typo3网站有一个菜单,其中包含以下打字脚本定义: lib.footernav = HMENU lib.footernav.special = directory lib.footernav.special.value = 38 lib.footernav.entryLevel = 0 lib.footernav.1 = TMENU lib.footernav.1.NO { ATagParams = class = "footer-link" } 菜单很好用。我想做的是,将链接文本
lib.footernav = HMENU
lib.footernav.special = directory
lib.footernav.special.value = 38
lib.footernav.entryLevel = 0
lib.footernav.1 = TMENU
lib.footernav.1.NO {
ATagParams = class = "footer-link"
}
菜单很好用。我想做的是,将链接文本更改为图像,如下所示:
<a class="footer-link" href="index.php?id=43&L=1">Facebook</a>
到
我该怎么做
如果有帮助的话,我还可以为这个facebook链接创建一个新菜单。像这样
lib.footernav.1.NO.stdWrap.wrap=
确保添加一个
wrap.htmlSpecialChars=1
,以避免在编辑器输入HTML特殊字符时破坏HTML代码。另一个解决方案是为每个链接定义自定义类,然后仅为相应链接更改背景图像。这样,您可以通过css完全控制菜单的外观:
lib.footernav.1.NO {
ATagParams = class="footer-link {field:title}"
ATagParams.insertData = 1
}
结果显示以下html:
<a class="footer-link Facebook" href="index.php?id=43&L=1">Facebook</a>
编辑:我推荐上述解决方案,因为它是一个快速且相当干净的设置,可以处理单个菜单项。但是,如果您喜欢打字本教科书中的清晰示例:
lib.footernav = COA
lib.footernav.10 = HMENU
lib.footernav.10 {
special = directory
special.value = 38
excludeUidList = 99
1 = TMENU
1.NO {
ATagParams = class = "footer-link"
}
}
lib.footernav.20 = TEXT
lib.footernav.20 {
field = title
typolink.parameter = 99
typolink.ATagParams = class = "footer-link"
}
假设你的facebook菜单项是PageID99,我建议使用菜单目标页面的“媒体”字段来定义菜单中哪些页面应该使用图像显示。媒体字段可以在页面属性的“资源”选项卡中找到。这是解决您问题的完美方案,因为它允许您为任何菜单项自由选择任何图像:
对于要显示为图像的菜单项,请使用相应菜单页的“媒体”字段,然后选择要使用的图像。对于所有要显示为文本的菜单项,只需将“媒体”字段留空即可
以下是创建该行为的TS代码:
1 = TMENU
1.NO {
ATagParams = class="footer-link"
# Replace menu item text with image if defined in page tab "Resources"-->"Media"
stdWrap.override.cObject = COA
stdWrap.override.cObject{
10 = IMAGE
10.file.import = uploads/media/
10.file.import.field = media
10.altText.field = title
}
}
使用FAL更新Type3 6.2: TYPO3 6.2包括FAL——一种新的媒体资源管理系统。由于页面属性的resources选项卡现在也基于FAL,因此您需要使用不同的打字脚本方法来访问这些图像。以下是最新的解决方案:
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.override.cObject = FILES
stdWrap.override.cObject {
references {
table = pages
fieldName = media
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:uid
file.treatIdAsReference = 1
titleText.data = file:current:title // field:nav_title // field:title
altText.data = file:current:alternative // field:nav_title // field:title
}
# start with first image
begin = 0
# show only one image
maxItems = 1
}
}
}
1=TMENU
1 {
包裹=|
否=1
没有{
wrapItemAndSub=|
stdWrap.override.cObject=文件
stdWrap.override.cObject{
参考资料{
表=页
字段名=媒体
}
renderObj=图像
伦德罗布{
file.import.data=文件:当前:uid
file.treatIdAsReference=1
titleText.data=文件:当前:标题//字段:导航标题//字段:标题
altText.data=文件:当前:可选//字段:导航标题//字段:标题
}
#从第一张图片开始
开始=0
#只显示一个图像
maxItems=1
}
}
}
参数begin
定义应使用多个图像中的哪一个(例如,如果您需要一个图像作为页面的标题背景,另一个图像作为菜单中的图标)
如果增加maxItems
参数,将返回多个图像(如果在“资源”选项卡中定义了多个图像)
如果要将图像附加到菜单文本而不是替换它,则必须将上述代码中的stdWrap.override.cObject更改为.cObject之后的或.cObject
之前的。lib.footerSocialMedia=humenu
lib.footerSocialMedia = HMENU
lib.footerSocialMedia {
special = directory
special.value = 167
1 = TMENU
1 {
wrap = <ul class="social-list right">|</ul>
expAll = 1
noBlur = 1
NO {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.htmlSpecialChars = 1
stdWrap.field =
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
ACT = 1
ACT {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.field =
stdWrap.htmlSpecialChars = 1
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
}
}
lib.footerSocialMedia{
特殊=目录
特殊值=167
1=t菜单
1 {
wrap=
expAll=1
noBlur=1
没有{
wrapItemAndSub=
doNotLinkIt=0
stdWrap.htmlSpecialChars=1
stdWrap.field=
ATagParams=data title=“{field:title}”数据工具提示=“true”
ATagParams.insertData=1
stdWrap.wrap=|
stdWrap.wrap.insertData=1
}
ACT=1
表演{
wrapItemAndSub=|
doNotLinkIt=0
stdWrap.field=
stdWrap.htmlSpecialChars=1
ATagParams=data title=“{field:title}”数据工具提示=“true”
ATagParams.insertData=1
stdWrap.wrap=|
stdWrap.wrap.insertData=1
}
}
}
首先需要在页面->编辑下的页面媒体中添加图像,然后在媒体中添加图像。此外,请使用以下打字脚本:
stdWrap.override.cObject = COA
stdWrap.override.cObject{
10 = IMAGE
10.file.import = uploads/media/
10.file.import.field = media
10.altText.field = title
}
在这种情况下,请记住将图像文件命名为Facebook.gif
。是将所有菜单项更改为图像还是仅更改为Facebook菜单项?pgampes解决方案还可以-但请注意,它将更改所有项目。如果可能,我只想更改facebook的项目。有没有一种方法可以解决单个菜单项的问题?我更新了我的答案-这两种解决方案都可以满足您的需要。如果编辑器在站点标题中输入HTML特殊字符,这将增加一种很好的方法来打破HTML。
lib.footerSocialMedia = HMENU
lib.footerSocialMedia {
special = directory
special.value = 167
1 = TMENU
1 {
wrap = <ul class="social-list right">|</ul>
expAll = 1
noBlur = 1
NO {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.htmlSpecialChars = 1
stdWrap.field =
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
ACT = 1
ACT {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.field =
stdWrap.htmlSpecialChars = 1
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
}
}
stdWrap.override.cObject = COA
stdWrap.override.cObject{
10 = IMAGE
10.file.import = uploads/media/
10.file.import.field = media
10.altText.field = title
}