有什么方法可以使 a href 外部化吗？

【问题标题】：Is there any way to make the a href external?有什么方法可以使 a href 外部化吗？
【发布时间】：2019-06-13 01:11:36
【问题描述】：

我想知道是否有任何方法可以在外部管理 a href。这样我就不必处理更新每个 html 文件中的链接。

我不确定 PHP 是否可以处理该问题或使用 cpython。如果有人能指出我正确的方向。这将非常有帮助。谢谢。

<nav>
        <ul>
            <li>
                <a href="index.html">Homepage</a>
                <ul>
                    <li><a href="sitemap.html">Sitemap</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li><a href="certification.html">Certifications</a></li>
                </ul>
            </li>
            <li>
                <a href="web_development/webdevelopment.html">Web Development</a>
                    <ul>
                        <li><a href="web_development/html.html">HTML</a></li>
                        <li><a href="web_development/css.html">CSS</a></li>
                        <li><a href="web_development/javascript.html">JavaScript</a></li>
                        <li><a href="web_development/jquery.html">jQuery</a></li>
                        <li><a href="web_development/ascii.html">ASCII Table</a></li>
                    </ul>
            </li>
            <li>
                <a href="programming_languages/programming.html">Programming Languages</a>
                <ul>
                    <li><a href="programming_languages/c.html">C</a></li>
                    <li><a href="programming_languages/c++.html">C++</a></li>
                    <li><a href="programming_languages/java.html">Java</a></li>
                </ul>
            </li>
            <li>
                <a href="scripting_languages/scripting.html">Scripting Languages</a>
                <ul>
                    <li><a href="scripting_languages/python.html">Python</a></li>
                    <li><a href="scripting_languages/bash.html">Bash</a></li>
                    <li><a href="scripting_languages/unixshell.html">Unix Shell Script</a></li>
                    <li><a href="scripting_languages/php.html">PHP</a></li>
                </ul>
            </li>
            <li>
                <a href="operating_system/os.html">Operating System</a>
                <ul>
                    <li><a href="operating_system/windows.html">Windows</a></li>
                    <li><a href="operating_system/linux.html">Linux</a></li>
                    <li><a href="operating_system/mac.html">Mac</a></li>
                </ul>
            </li>
            <li>
                <a href="about/aboutme.html">About Me</a>
                <ul>
                    <li><a href="about/CV.html">CV</a></li>
                    <li><a href="about/reflection.html">Reflection</a></li>
                    <li><a href="about/portfolio.html">Portfolio</a></li>
                </ul>
            </li>
        </ul>
    </nav>`

编辑； 我的网站到目前为止没有更改并使用上面的代码

http://imgur.com/2K2p5PO

用 Ema4rl 的解决方案和&lt;?php include 'page.php';?&gt;

http://imgur.com/LMrIwjW

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="google-site-verification" content="MCQUXJvcfRxBpOiSL14SrYWBsaiaXT8xB_LunwccElI" />
    <title>Homepage</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">

<!-- CSS here -->
    <link rel="stylesheet" type="text/css" href="template.css">
<!-- JavaScript here -->
    <script src="externalscript.js" type="text/javascipt"></script>
<!-- PHP here -->

<!-- Python here -->

</head>

<body>
    <div class="nested">
        <div class="header">
            <div class="logo">
                <a href="/index.html"><img src="../images/codex.jpg" alt="echo Codex" width="154" height="156" class="topleft"/></a>
            </div>
            <div class="title">
                    <br>
                    <h1>Codex</h1>
                    <h4><b>Scientia Potentia Est. Knowledge is Power</b></h4>
            </div>
            <div class="search">
                <script>
                      (function() {
                        var cx = '002444324895425384483:h-an5qvcpci';
                        var gcse = document.createElement('script');
                        gcse.type = 'text/javascript';
                        gcse.async = true;
                        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                            '//www.google.com/cse/cse.js?cx=' + cx;
                        var s = document.getElementsByTagName('script')[0];
                        s.parentNode.insertBefore(gcse, s);
                      })();
                    </script>
                    <gcse:search></gcse:search>
            </div>
        </div>
        <div class="menu">
            <?php include 'page.php';?>
        </div>
        <div class="main">
            <div class="sidebar">
                <ul>
                    <li><a href="sitemap.html">Sitemap</a></li>
                    <li><a href="/contact.html">Contact Us</a></li>
                </ul>
            </div>
            <div class="content">
                <h1>Welcome to the Castillo's Vault</h1>
                <p>This website is built for general and specific knowledges about the world of computing such as</p>
                    <ul>
                        <li>Coding</li>
                        <li>Rules of coding</li>
                        <li>Operating System</li>
                        <li>Hacking world</li>
                        <li>Portfolio</li>
                        <li>CV</li>
                        <li>And much more</li>
                    </ul>
                <p>At the moment, I am designing the webpages by using Notepad++. It will take a long time until the website is at the stage where I feel like it is completed. The website is not even nearly done.</p>
                <p>The website will be continuously being updated. There are always new information that are being released about the world of Internet and its medium. The medium are the computers which can be divided into desktop, laptop, tablet, even mobile phone.</p>
                <p>This website is created by Hugo-Daniel Castillo for the purpose of education and revising. If there is any queries or comments, please email hugodanielcastillo@vaultofcastillo.comuv.com</p>
                <br>
            </div>
        </div>
        <div class="end">
            <footer>
                <p>Made by Hugo-Daniel Castillo <br>Coventry University Student<br>Ethical Hacking and Networking Security</p>
            </footer>
        </div>
    </div>
</body>

</html>

【问题讨论】：

  • 如果您使用 html，您可以为链接创建一个 xml 文件，也可以创建一个 php 文件，甚至可以从数据库中提取链接。什么你只使用 php 或 php 框架？
  • &lt;?php include 'nav.php';?&gt;
  • stackoverflow.com/questions/4908932/dynamic-navigation-in-php
  • @DanteFañaBadia，如果我使用 name.html 而不是 name.php 可以吗？如果是后一种选择，我是否必须将 html 文件重新定义为 php？我还不确定PHP。我对那种语言不是很流利。
  • @Hugo-DanielCastillo 您需要重命名所有文件，否则服务器将无法理解 php 代码。

标签： php html


【解决方案1】：

似乎您没有使用 PHP 框架或 PHP（根本）。实现这一点的最简单方法是使用带有文件包含的 PHP。

如果我需要实现这一点，我会将链接的来源与页面分开，这样我就可以轻松地将来源更改为数据库模型，甚至是 API。


nav-links.php

    - 包含所有链接的单独文件

<?php

return array(
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Web Development" => "web_development/index.html",
        array(
            "HTML" => "web_development/html.html",
            "CSS" => "web_development/css.html",
            "JavaScript" => "web_development/javascript.html",
            "jQuery" => "web_development/jquery.html",
            "ASCII Table" => "web_development/ascii.html"
        )
    ),
    // to be completed...
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    )
);


nav.php

    - 链接所在的主页

<?php

$links = require 'nav-links.php';

// check if the $links array is not empty (to avoid errors)
if ( ! empty($links))
{
    echo '<ul>';

    foreach ($links as $section)
    {
        echo '<li>';

        foreach ($section as $title => $link)
        {
            // check if it is a sub-array or a home/index link
            if ( ! is_array($link))
            {
                echo "<a href=\"{$link}\">{$title}</a>";
            }
            else
            {
                echo '<ul>';

                foreach ($link as $t => $l)
                {
                    echo "<li><a href=\"{$l}\">{$t}</a></li>";
                }

                echo '</ul>';
            }
        }

        echo '</li>';
    }

    echo '</ul>';
}

【讨论】：

  • 如何显示结果截图？此外，第 3 行的 nav-links.php 存在语法错误，带有意外的“=”。
  • 将其上传到图像托管服务并使用降价显示在评论中。嘿！我刚刚修正了nav-links.php 中的一个错字。将return = array 更改为return array。
  • 我也刚刚注意到错字。谢谢@Hugo-DanielCastillo
  • 是的，我也想通了。还以 ?> 结束 php 文件，我将更新我的网站，看看是否可行。很快就会上传原始网站和您的代码。这是我第一次使用stackoverflow。忍受我。
  • 只需将 index.html 更改为 index.php 并包含nav.php，如您的问题更新所示。 我刚刚将 page.php 重命名为 nav.php
【解决方案2】：

实现这一点的最简单方法是使用 PHP 的文件包含，但这也意味着您需要执行以下操作：

  1. 将所有 Web 文件更改为 PHP 文件扩展名（如 index.php、windows.php 等）
  2. 要将文件扩展名保留为 html，请将您的网络服务器配置为翻译 url，以便 index.html 在内部更改为 index.php
    • 这通常需要使用.htaccess
    • 或将其更改为全局webserver，但正如评论所述，这不是首选方法。

现在我假设您使用的是最常见的 Apache 网络服务器。

使用最简单的，它并不是最灵活的，但它是在此过程中学习一些 PHP 的好方法：

<?php /* navbar.php */ ?>
<nav>
  <ul>
    <li>
      <a href="index.html">Homepage</a>
      <ul>
        <li><a href="sitemap.html">Sitemap</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="certification.html">Certifications</a></li>
      </ul>
    </li>
  </ul>
  ... etc
</nav>

现在所有其他文件：

<?php /* index.php */ 
  include 'navbar.php';
?>

<?php /* sitemap.php */ 
  include 'navbar.php';
?>

<?php /* certification.php */ 
  include 'navbar.php';
?>

现在，如果您需要更改导航，只需更改 1 个文件即可。但如前所述，它并不是真正动态的，但是您可以通过将更复杂的 PHP 代码插入 navbar.php

来使其更具动态性

现在稍微发挥你的想象力，因为这并非必须仅应用于导航栏。您可以在页面上制作页脚、页眉或任何其他重复代码：

<!-- index.php -->
<html>
  <head>
  <?php
    include 'header.php'; // containing contents of <head></head>
  ?>
  </head>
  <body>
    <?php include 'navbar.php'; ?>
    <p>Here is my text for index.php</p>
    <?php include 'footer.php'; ?>
  </body>
</html>

【讨论】：

  • 不要将您的网络服务器配置为开始执行任何旧的 HTML 作为 PHP。有一天，您可能真的想要提供静态 HTML，并且您不希望它发生冲突。如果您在重新配置 Web 服务器时遇到麻烦，那么设置重写规则以在 HTML 文件不存在时加载相应的 PHP 文件会容易得多。
  • 虽然我个人从来不需要显示静态 HTML，但我可以看到您的方法是两全其美的最佳方法。因此，我也更改了 URL 以反映这一点。
  • 在每个目录的配置文件之外配置你的服务器要好得多，因为它们必须被解析和处理每个请求。这是非常低效的。此外，.htaccess 仅适用于 Apache。无论您使用什么服务器，最好在服务器启动时加载的应用程序配置中配置您的重写规则。这并不意味着您不能将配置与您的代码仓库一起保存......这只是意味着您不必在每次有人访问页面时都解析配置。
【解决方案3】：

如果您不想使用任何服务器端处理，您可以使用来自w3chools 的简单 javascript 库：

<html>
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <body>
        <div w3-include-html="nav.html"></div> <!-- nav.html will be put in this palce -->
        <script>
        w3IncludeHTML(); //you have to call this function to include snippets
        </script>
    </body>
</html>

其他选项是使用 html imports:

<link rel="import" href="nav.html">

请注意，目前只有Chrome and Opera 支持此选项。

最后，您可以使用标签iframe。 

<iframe src="nav.htm"></iframe>

实际上，这是不久前网站组装的方式。 Here 您有 90 年代网站外观的示例。如果您检查导航，您会看到它是基于嵌套 iframe 构建的。

现在是not recommended 创建新网站的方式。

【讨论】：

  • 这是一个动态的html文件吗？这实际上很有趣，每次我在 content.html 或在本例中为 nav.html 中添加新的 html 文件时，它会更新信息吗？所有网络浏览器都支持它吗？
  • 是的，当您在您的网站上重新加载您使用过任何此 sn-ps 的任何页面时，它将更新。
  • 我不会使用那个库。首先，您正在从第三方加载一个您无法控制的库，通过 HTTP 任何人都可以进行劫持。你至少可以下载这个 JS 文件，自己检查它，然后把它放到你的代码中。这也将阻止 W3 Schools 更新它并破坏您的网站。接下来，该脚本甚至不使用标准属性，例如data- 属性。最后，并非所有爬虫都运行 JavaScript，因此您的内容将被遗漏并且不会被许多人索引。 （虽然，这每天都不是问题。）
  • 可以说从cdn下载的每一个js都是不安全的。例如，jQuery 可能有一天会变成恶意代码。因此，您必须问自己是否信任提供者。如果不下载代码并从自己的服务器提供它。对于ajax-crawling，这是可能的，但它是requires additional tag。我不知道为什么 w3 不使用 data- 属性，如果您不希望您的网站有效，这是一个问题。您可以获取代码并将其更改为接受data 属性或与之相处:)
猜你喜欢
  • 1970-01-01
  • 2016-02-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-27
  • 1970-01-01
  • 2014-07-01
  • 2011-12-06
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode