从零开始用github架设静态网站入门(4) - 其他小功能制作

用之前的篇幅，已经大概跟大家介绍完静态网站的基本技巧，理论上要做出一个网站是没有什麽问题了，BUT我们肯定是不会就此停下脚步的，锦上添花就是工程师的天命阿。所以这篇主要跟大家介绍一些，其实也不是很重要，但可以让网站看起来更酷一点的小东西。

Bootstrap元件模组 - Navigate bar

Bootstrap除了我们之前介绍的基本按钮之外，也提供了很多其他比较复杂的元件模组让我们使用，到官网文件的Component区就可以看到这些清单了。

这边我们就拿Navigate bar做举例，Navigate bar一般是一个在网页上方，供使用者选取页面或其他功能的一个栏位，像这样。

至於使用方法，在点进去Component – Navbar的页面後，就有一些简单的物件介绍和模板程序码，我的习惯是直接拿模板贴进来，再按照自己的需求去改，这里我们稍微介绍一下这个Navbar模板程序码有哪些可以修改的地方。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
//这里是整个Navbar的板块，可以调整他的大小和颜色
  <a class="navbar-brand" href="#">Navbar</a>
//这是最左边的按钮，一般会把它超连结到首页并换成自己的LOGO
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
//这一串应该是可以指定Navbar上的元素要怎麽呈现，可以是收起来然後游标移上去才展开之类的，但我没有改过@@
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
//这里有各种类型的按钮类型可以选，可以按自己的需求增减
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
//这里是一个下滑式选单的物件，可以把需要的连结放进去，调整他是要预设收起来之类的
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
//这是一个网站内搜索的功能，但可能是比较复杂的网站才会用，我是没有放
  </div>
</nav>

Video insertion

除了使用Bootstrap提供的元件外，插入一些影片或是图片更有可能是架设网站的主要目的，接下来就介绍一下怎麽搭配网格系统把这些元素好好地排版在我们的网站里，以下是以Demo网站内怎麽摆放影片来做示范。

            <div id="video_container">
//先用一个<div>当作放所有影片的板块
                <div class="container">
//接着有一个第一行的容器，我们需要三个”row”来分别摆放”标题”、影片跟”版本”
                    <div class="row">
                        <h4>Shape of you</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
//这里因为希望同一行会有四个影片，所以我们用3个column当宽度
                            <video width="500" height="200" controls>
                                <source src="videos/Shapeofyou1.mp4" type="video/mp4">      
                                </video>
//这里是说明如何摆进影片，我们使用video标签加入control属性会让影片有可以选择进度的控制条，不然会只能双击开始或暂停。video标签内含一个source标签指定影片地址，还有不要忘记要指定影片的编码类型
                            <p>Human-made accompaniment</p>        
                        </div>
                        <div class="col-md-3">
                            <video width="500" height="200" controls>
                                <source src="videos/Shape of you 2.mp4" type="video/mp4">    
                                </video>
                            <p>AI accompaniment</p>     
                        </div>
                        <div class="col-md-3">
                            <video width="500" height="200" controls>
                                <source src="videos/Shape of you 3.mp4" type="video/mp4">     
                                </video>
                            <p>Original accompaniment</p>    
                        </div>
                        <div class="col-md-3">
                            <video width="500" height="200" controls>
                                <source src="videos/Shape of you 4.mp4" type="video/mp4">                      
                                </video>
                            <p>Pure vocal</p>
                        </div>
                    </div>
                </div>
		</div>

JavaScript - 寄信功能

因为觉得拆成两篇讲有点水，就索性放在一起了XDDD

JavaScript是一种可以内嵌在HTML让浏览器编译的程序语言，大多数的语法我认为跟Python蛮类似的，但这里就不多做叙述，如果有一点其他程序语言的基础的话，我认为看懂JavaScript应该不困难，如果没有其他程序语言的基础的话… 那就顺手学一个Python，不会很花时间的。

就像前面有提过的，只要使用script标签就可以在HTML内直接执行JavaScript语句，但我们这里不多作介绍，一方面是这很直观，另一方面是除非你真的只写几行，不然这麽做会让你的HTML文件很难阅读。

接着，我们开始介绍要怎麽将JavaScript写在另一个档案内，供浏览器执行，并完成简单的寄信功能。另外，本篇的程序主体源自这里，作者还有另外讲了其他小功能，有兴趣的人可以看看。

1. 首先，开一个.js的档案

2. 这边我们另外开了一个页面contact.html，把主页的程序码都贴过来，并把不需要的文字段落删掉，之後在Navbar中设定跟主页各有按钮可以互相连结，以区分不同的功能页面。
   

3. 在body标签的底部引入这个.js档案，之所以不放在head内是因为HTML是一个顺序编译的语言，意思是他会把head内所有的指令都执行过後，才会接者显示网页内的其他元素，而如果你的.js档跟显示网页没有直接关系，那就没有理由让使用者等到执行完才能浏览你的网站。

<script src="script.js"></script>

4. 在contact.html内，开始设计让使用者输入资讯的板块。

            <form   enctype="text/plain" accept-charset="utf-8">
//我们用一个form标签建立一个可以内含让使用者输入资讯的板块
                <!-- 寄件者姓名    -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 offset-md-2 text-center">
                            <h2 style="font-size: 20; font-weight: 600; margin-bottom: 20; color: grey;">寄信给作者</h2>
                            <input class="input-bar" id="nameText" type="text" name="Name"  value size="60" placeholder="  姓名(name)" >  
// placeholder中输入还没有输入内容时，预设会显示的文字                 
                            <!-- 寄件者email -->
                            <input class="input-bar" id="emailText" type="email" name="Email"  value size="60" placeholder="  Email" >
                            
                            <!-- 寄件者电话 -->
                            <input class="input-bar" id="telText"type="tel" name="Phone"  value size="60" placeholder="  电话(phone)" >
                            
                            <!-- 邮件主旨 -->
                            <input class="input-bar" id="subText" type="text" name="Subject"  value size="60" placeholder="  主旨(subject)" >
                                    
                            <!-- 邮件内容 -->
                            <textarea class="input-bar" id="bodyText" name="your-message" cols="40" rows="10"  aria-required="true" placeholder="  你的讯息(Your Message)" ></textarea>
                            
                            <!-- 传送按钮 -->
                            <div>
                                <input class="btn" type="button" value="送出讯息" onclick="submitHandler();" 
                                style="    
                                font-family: 'OPEN SANS';
                                font-weight: 600;
                                font-size: 18px;
                                margin-top: 40;">
                                <a id="mailTo" ></a>
//这里首先是一个按钮在按下时，会呼叫submitHandler()这个函数。而这个a标签是一个我们用来借用超连结指令进行信件发送的媒介，细节我们会在.js档案里面介绍
                            </div>
                        </div>
                    </div>
                </div>
                
             </form>

5. 在.js档中，把寄信的函数写出来。

//按下传送按钮後执行
function submitHandler(){
    var to = "[email protected]";
//写死的传送对象 就是要传送的信箱，不会显示在网页上
    var subject = subText.value;
//读取ID为 subText物件中的值，我们在上方的input物件已经先设好这个id了
//把user填的资料都塞到 mail body 中
    var body = ""+'%0A%0A%0A';
//%0A是换行 换了三行
        body += "From："+nameText.value+'%0A';
        body += "Email："+emailText.value+'%0A';
        body += "Tel："+telText.value;
//传送的主要程序码
    mailTo.href="mailto:"+to+"?subject="+subject+"&body="+body;
    mailTo.click();
//这里我们藉由将先宣告的a标签超连结地址改为”mailto:”，浏览器就会帮我们打开信箱的预设应用程序，并把所有使用者输入好的资讯带进去，接着我们让a标签触发click()，以此触发这个超连结
}

其实严格来说，寄送信件这个功能已经不太算是静态网站的范畴了，但也不是个复杂的功能，就不用太计较了XDD。至此我们已经大致完成这个网页了，剩下的问题只有要怎麽让网路上的其他人也可以看到它，这件事情我们会在下一篇内完成，那麽我们就下次再见啦～

相关文章

从零开始用github架设静态网站入门(1) - 介绍&环境搭建
从零开始用github架设静态网站入门(2) - HTML & Bootstrap
从零开始用github架设静态网站入门(3) - CSS客制化
从零开始用github架设静态网站入门(4) - 其他小功能制作
从零开始用github架设静态网站入门(5) - 部署到Github Pages