Question

我正在构建一个简单的网页。但是有几十个子页面。这个人组织他的业务的方式意味着电话号码在任何一周负责接听电话的人之间不断变化。有没有办法可以更改单行文本（例如在css文件中），并且所有子页面上发布的电话号码会根据负责接听电话的人每周更改一次？
从那以后，我学到了足够的知识，将模板从凌乱的html /表格代码更改为使用css的代码更精简的外观。

Answer 1

如果符合您的浏览器支持资料，您可以通过::after伪元素执行此操作：http://caniuse.com/#feat=css-gencontent
请注意，IE8（唯一不支持::after而不是:after的'常用'浏览器）明年初就是EOL（将成为非常高兴）。

虽然这是一种非常糟糕的方式 - 你应该使用CSS来进行演示 而不是 信息，我是不要告诉你不要，如果这只是一个临时的黑客，当你实施一些不那么糟糕的事情时，你可以避免头痛。

操作方法示例：http://dabblet.com/gist/b4bd30443cdbd810d8a8

Call <span class="data-onCallPhnNum"></span> for help.

.data-onCallPhnNum::after{
    content:"(555)-555-5555";
}

请注意，这样做的主要缺点是 如果浏览器无法呈现::after伪元素，则无法回退。

更好，您可以包含这样的Javascript文件：

        [....]
        <script type="text/javascript" src="phonenum.js"></script>
    </body>
</html>

并且在phonenum.js中使用js（及其预期的HTML使用）是：

(function(){
    var phnNum = "(555)-555-5555";
    var phnLnks = document.getElementsByClassName("data-onCallPhnNum");
    for(var i = phnLnks.length >>> 0; i--;){
        phnLnks[i].href = "tel:" + phnNum;
        phnLnks[i].innerHTML = phnNum;
    }
})();

Call <a href="page-with-phone-number.html" class="data-onCallPhnNum">the number listed on our contact page</a> for assistance.

这可以完成同样的事情，只有在关闭js的浏览器上工作，有自然回退，移动浏览器有可点击的电话号码，并且没有使用CSS获取信息。

你仍然应该最终将它移动到一个数据库中并将数字拉到服务器端，但是为了在真正的解决方案准备就绪之前节省头痛，或者你会这样做。

编辑注意：啤酒会向CBroe提出建议tel:协议以及回退的正式化。

Answer 2

还有另外两个选项，严格来说，它们都不是HTML解决方案。

Server Side Includes是一种选择，尽管它们已经失宠了。

另一种选择是使用服务器端模板系统，例如PHP。

使用一个文件显示大量网页

2 个答案: