javascript - 将页面标题添加到网站标题下方的现有页面

Question

我的客户有一个现有的横幅网站标题，在 7 年多之后，他们现在希望在页面横幅文本下方有另一行引用页面标题。我试图避免进入每一页来添加一行文本并提出以下解决方案。它并不完美(也不一定是完美的)，但您是否发现这种方法有任何不可预见的问题？

<cfparam name="url.CurrentPage" default="">
<div id="wideheader">
<div id="wideheadermain">
    <h1 id="title">
    <div class="PageBannerText">Technology Lab
    <span id="CurrentPage"><cfswitch expression="#url.CurrentPage#">
        <cfcase value="Update">
            Update Project Data
        </cfcase>
        <cfcase value="Tracker">
            Project Tracker
        </cfcase>
        <cfcase value="ProjectLog">
            Project Log
        </cfcase>
        <cfcase value="Portfolio">
            Project Portfolio
        </cfcase>
        <cfcase value="Links">
            Related Links
        </cfcase>
        <cfcase value="Coordinator">
            Coordinator Space
        </cfcase>
        <cfcase value="Request">
            Project Request
        </cfcase>
        <cfcase value="Viewer">
            Project Tracker Read-Only
        </cfcase>
        <cfcase value="LabMgr">
            Lab Manager
        </cfcase>
        <cfcase value="Architect">
            Architect Module
        </cfcase>
        <cfdefaultcase>
            #url.CurrentPage#
        </cfdefaultcase>
    </cfswitch> #cookie.CurrentPage#</span>
        </div>
</div>
 </div>

我可以将上面的代码添加到我的页眉页面，然后在主导航菜单中添加以下代码来设置子页面标题:

<ul>
    <li><a href="Proj/TrackerMenu.cfm?CurrentPage=Project Tracker">Project Tracker</a></li>
    <li><a href="Proj/RequestCopyOrAdd.cfm?CurrentPage=Request a Project">Request a Project</a></li>
    <li><a href="Proj/ViewerMenu.cfm?CurrentPage=Project Viewer">Project Viewer</a></li>
    ...
</ul>

我知道这并不完美，但我相信这将覆盖网站的 90-95%。

我的另一个想法是用 span 标签包装子页面横幅文本并给它一个 ID，然后使用 jQUery 设置文本。我可以编写一个例程来评估当前 URL，然后相应地设置子页面横幅文本。

TIA

Answer 1

一个更简单的解决方案是将标题存储在结构中，然后进行查找。

即将其放在 onApplicationStart 中:

<cfset Application.PageTitles = 
    { 'Update'    : 'Update Project Data'
    , 'Tracker'   : 'Projet Tracker'
    ...
    , 'LabMgr'    : 'Lab Manager'
    , 'Architect' : 'Architect Module'
    }/>

^{(注意:如果您使用的是 CF9 或更早版本，则需要在此处使用 = 而不是 :。CF10 和所有版本Railo 和 OpenBD 支持在内联结构中使用 : 或 =。)}

然后用这个替换你的 switch/case block :

<cfif StructKeyExists(Application.PageTitles,Url.CurrentPage)>
    <cfset PageTitle = Application.PageTitles[Url.CurrentPage] />
<cfelse>
    <cfset PageTitle = Url.CurrentPage />
</cfif>

#HtmlEditFormat(PageTitle)#

您可以在菜单中使用类似的内容，因此无需在多个地方更新标题。

另请注意 HtmlEditFormat 的使用以防止可能的 HTML/脚本注入(inject)。

您还应该将其添加到 cookie 变量和任何其他用户提供的变量(加上任何不保证不包含可能更改 HTML 的字符的变量)。