html - 为侧边栏创建单独的文件以存储并轻松编辑

Question

我很难找到解决这个问题的方法。这3天我一直在寻找，没有找到任何结果，所以我来这里问。我想将我的边栏保存在一个单独的文件中，这样它可以在我的 index.html 中节省一些空间，并且也可以在其他页面中使用。这就是我想要的侧边栏:(注意:我使用了 Bootstrap 的 UI“Bootflat”)

<h1 align="center">Calendar</h1>
 <div class="row" align="center">
    <div class="col-md-4" align="center">
        <div class="calendar" align="center">
            <div class="years clearfix">
                <div class="unit prev"><em></em></div>
                <div class="monyear">DECEMBER 2015</div>
                <div class="unit next"><em></em></div>
            </div>
            <div class="days">
                <div class="clearfix">
                    <div class="unit linkcur">SU</div>
                    <div class="unit linkcur">MO</div>
                    <div class="unit linkcur">TU</div>
                    <div class="unit linkcur">WE</div>
                    <div class="unit linkcur">TH</div>
                    <div class="unit linkcur">FR</div>
                    <div class="unit linkcur">SA</div>
                </div>
                <div class="clearfix">
                    <div class="unit older linkcur"><b>29</b></div>
                    <div class="unit older linkcur"><b>30</b></div>
                    <div class="unit linkcur"><b>1</b></div>
                    <div class="unit linkcur"><b>2</b></div>
                    <div class="unit linkcur"><b>3</b></div>
                    <div class="unit linkcur"><b>4</b></div>
                    <div class="unit linkcur"><b>5</b></div>
                    <div class="unit linkcur"><b>6</b></div>
                    <div class="unit linkcur"><b>7</b></div>
                    <div class="unit linkcur"><b>8</b></div>
                    <div class="unit linkcur"><b>9</b></div>
                    <div class="unit linkcur"><b>10</b></div>
                    <div class="unit linkcur"><b>11</b></div>
                    <div class="unit linkcur"><b>12</b></div>
                    <div class="unit linkcur"><b>13</b></div>
                    <div class="unit linkcur"><b>14</b></div>
                    <div class="unit linkcur"><b>15</b></div>
                    <div class="unit linkcur"><b>16</b></div>
                    <div class="unit linkcur"><b>17</b></div>
                    <div class="unit linkcur"><b>18</b></div>
                    <div class="unit linkcur"><b>19</b></div>
                    <div class="unit linkcur"><b>20</b></div>
                    <div class="unit linkcur"><b>21</b></div>
                    <div class="unit linkcur"><b>22</b></div>
                    <div class="unit linkcur"><b>23</b></div>
                    <div class="unit linkcur"><b>24</b></div>
                    <div class="unit linkcur"><b>25</b></div>
                    <div class="row tooltip-demo"><div class="unit active linkcur" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="left" title="Launch Day"><b>26</b></div></div>
                    <div class="unit linkcur"><b>27</b></div>
                    <div class="unit linkcur"><b>28</b></div>
                    <div class="unit linkcur"><b>29</b></div>
                    <div class="unit linkcur"><b>30</b></div>
                    <div class="unit linkcur"><b>31</b></div>
                    <div class="unit older linkcur"><b>1</b></div>
                    <div class="unit older linkcur"><b>2</b></div>
                    <div class="unit older linkcur"><b>3</b></div>
                    <div class="unit older linkcur"><b>4</b></div>
                    <div class="unit older linkcur"><b>5</b></div>
                    <div class="unit older linkcur"><b>6</b></div>
                    <div class="unit older linkcur"><b>7</b></div>
                    <div class="unit older linkcur"><b>8</b></div>
                    <div class="unit older linkcur"><b>9</b></div>
                </div>
            </div>
        </div>

</div>
</div>
<hr>

如您所见，它占用了大量空间。我想把这段代码放在一个单独的文件中，这样我就可以轻松地将它连接到我的其他页面并轻松编辑它。请帮忙!

编辑: PHP 文件是成功的，但它似乎没有显示在页面中。
PHP页面中的结果: The Result in PHP Page
我在首页得到的= What I get in the Homepage

Answer 1

如果您会使用 PHP，您所要做的就是创建一个新的 html 文件，将您的代码放入其中并以 .php 扩展名保存。然后你所要做的就是把

<?php include("Sidebar.php"); ?> 

任何你想要侧边栏的地方。

更新:

将此文件另存为 Sidebar.php。然后在所有具有该代码的 html 页面中，您可以将扩展名重命名为 .php 并放置上面的代码而不是侧边栏，因此您只需在一个文件中进行更改即可更新整个站点它包含在哪里。

<h1 align="center">Calendar</h1>
<div class="row" align="center">
<div class="col-md-4" align="center">
    <div class="calendar" align="center">
        <div class="years clearfix">
            <div class="unit prev"><em></em></div>
            <div class="monyear">DECEMBER 2015</div>
            <div class="unit next"><em></em></div>
        </div>
        <div class="days">
            <div class="clearfix">
                <div class="unit linkcur">SU</div>
                <div class="unit linkcur">MO</div>
                <div class="unit linkcur">TU</div>
                <div class="unit linkcur">WE</div>
                <div class="unit linkcur">TH</div>
                <div class="unit linkcur">FR</div>
                <div class="unit linkcur">SA</div>
            </div>
            <div class="clearfix">
                <div class="unit older linkcur"><b>29</b></div>
                <div class="unit older linkcur"><b>30</b></div>
                <div class="unit linkcur"><b>1</b></div>
                <div class="unit linkcur"><b>2</b></div>
                <div class="unit linkcur"><b>3</b></div>
                <div class="unit linkcur"><b>4</b></div>
                <div class="unit linkcur"><b>5</b></div>
                <div class="unit linkcur"><b>6</b></div>
                <div class="unit linkcur"><b>7</b></div>
                <div class="unit linkcur"><b>8</b></div>
                <div class="unit linkcur"><b>9</b></div>
                <div class="unit linkcur"><b>10</b></div>
                <div class="unit linkcur"><b>11</b></div>
                <div class="unit linkcur"><b>12</b></div>
                <div class="unit linkcur"><b>13</b></div>
                <div class="unit linkcur"><b>14</b></div>
                <div class="unit linkcur"><b>15</b></div>
                <div class="unit linkcur"><b>16</b></div>
                <div class="unit linkcur"><b>17</b></div>
                <div class="unit linkcur"><b>18</b></div>
                <div class="unit linkcur"><b>19</b></div>
                <div class="unit linkcur"><b>20</b></div>
                <div class="unit linkcur"><b>21</b></div>
                <div class="unit linkcur"><b>22</b></div>
                <div class="unit linkcur"><b>23</b></div>
                <div class="unit linkcur"><b>24</b></div>
                <div class="unit linkcur"><b>25</b></div>
                <div class="row tooltip-demo"><div class="unit active linkcur" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="left" title="Launch Day"><b>26</b></div></div>
                <div class="unit linkcur"><b>27</b></div>
                <div class="unit linkcur"><b>28</b></div>
                <div class="unit linkcur"><b>29</b></div>
                <div class="unit linkcur"><b>30</b></div>
                <div class="unit linkcur"><b>31</b></div>
                <div class="unit older linkcur"><b>1</b></div>
                <div class="unit older linkcur"><b>2</b></div>
                <div class="unit older linkcur"><b>3</b></div>
                <div class="unit older linkcur"><b>4</b></div>
                <div class="unit older linkcur"><b>5</b></div>
                <div class="unit older linkcur"><b>6</b></div>
                <div class="unit older linkcur"><b>7</b></div>
                <div class="unit older linkcur"><b>8</b></div>
                <div class="unit older linkcur"><b>9</b></div>
            </div>
        </div>
    </div>