有没有办法让href外部?

时间:2016-11-07 23:03:37

标签: php html

我想知道是否有任何方法可以在外部管理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的解决方案和<?php include 'page.php';?>

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>

3 个答案:

答案 0 :(得分:2)

似乎你没有使用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>';
}

答案 1 :(得分:1)

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

  1. 将所有网络文件更改为PHP文件扩展名(如index.php,windows.php等)
  2. 要将文件扩展名保留为html,请将您的网络服务器配置为翻译网址,以便将index.html内部更改为index.php
    • 这通常需要使用.htaccess
    • 或全局更改webserver,但正如评论所述,这不是首选方法。
  3. 现在,我假设您使用的是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>
    

答案 2 :(得分:0)

如果您不想使用任何服务器端处理,可以使用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方式创建新网站。