Hexo-使用靜態生成器，建立blog(1/3)本地端

Posted on

系列文章

  1. 先確認電腦已經安裝下列軟體
    • Node.js(補充：檢查電腦是否已經安裝Node.js，可以在terminal中輸入node -v)
    • Git

  2. Mac需要先關閉系統完整保護(SIP)
    (當在Mac上嘗試開啟一些第三方軟體的時候，可能會受到SIP的限制而無法正常使用。)

    • 先查看SIP開啟/關閉狀態
      在terminal中輸入csrutil status
      • 如果看到「System Integrity Protection status: enabled」代表SIP開啟
      • 如果看到「System Integrity Protection status: disabled」，代表 SIP是關閉的。

    • 在Mac上關閉SIP

      step1. 重新啟動Mac開機鍵時，同時按Command+R鍵

      step2. 出現彈出視窗後，在螢幕左上方的「工具程式」選單中點按「終端機」。

      step3. 啟動「終端機」視窗後，在「終端機(terminal)」中輸入csrutil disable

      step4. 關閉「終端機」視窗，並重新開機。

      補充： 待整個回合(下載Hexo完畢)結束之後，記得修改SIP狀態為開啟，重複上述動作，在「終端機(terminal)」中輸入csrutil enable。

  1. 正式開始下載Hexo
    開始透過npm安裝Hexo，在terminal中輸入安裝指令：

    1
    $ npm install hexo-cli -g

  2. 初始化資料夾
    使用指令建立資料夾，在建立的同時給予命名，並自動初始化資料夾內的檔案結構(示範：以’blog’作為資料夾名稱)，請依序執行下方指令

    1
    2
    3
    $ hexo init <folder name>
    $ cd <folder name>
    $ npm install

    建立完成後，專案資料夾會有下列檔案：

  3. 在本地端開啟blog網頁
    完成上述流程後，在terminal輸入啟用本地端伺服器的指令

    1
    $ hexo server

    本地端伺服器已經啟用

    即可在瀏覽器中檢視blog畫面(http://localhost:4000)

  4. 新增文章在blog中
    在blog資料夾的內層中找到_posts資料夾，並將.md檔案拖曳至於其中

使用Hexo，建立blog(上)新增文章

Posted on

使用Hexo，建立blog(上)新增文章

若要更換主題，可以參考下一篇文章使用Hexo，建立blog(下)自定義主題

環境安裝

  1. 先確認電腦已經安裝下列軟體
    • Node.js(補充：檢查電腦是否已經安裝Node.js，可以在terminal中輸入node -v)
    • Git

  2. Mac需要先關閉系統完整保護(SIP)
    (當在Mac上嘗試開啟一些第三方軟體的時候，可能會受到SIP的限制而無法正常使用。)

    • 先查看SIP開啟/關閉狀態
      在terminal中輸入csrutil status
      • 如果看到「System Integrity Protection status: enabled」代表SIP開啟
      • 如果看到「System Integrity Protection status: disabled」，代表 SIP是關閉的。

    • 在Mac上關閉SIP

      step1. 重新啟動Mac開機鍵時，同時按Command+R鍵

      step2. 出現彈出視窗後，在螢幕左上方的「工具程式」選單中點按「終端機」。

      step3. 啟動「終端機」視窗後，在「終端機(terminal)」中輸入csrutil disable

      step4. 關閉「終端機」視窗，並重新開機。

      補充： 待整個回合(下載Hexo完畢)結束之後，記得修改SIP狀態為開啟，重複上述動作，在「終端機(terminal)」中輸入csrutil enable。

  1. 正式開始下載Hexo
    開始透過npm安裝Hexo，在terminal中輸入安裝指令：

    1
    $ npm install hexo-cli -g

  2. 初始化資料夾
    使用指令建立資料夾，在建立的同時給予命名，並自動初始化資料夾內的檔案結構(示範：以’blog’作為資料夾名稱)，請依序執行下方指令

    1
    2
    3
    $ hexo init <folder name>
    $ cd <folder name>
    $ npm install

    建立完成後，專案資料夾會有下列檔案：

  3. 在本地端開啟blog網頁
    完成上述流程後，在terminal輸入啟用本地端伺服器的指令

    1
    $ hexo server

    本地端伺服器已經啟用

    即可在瀏覽器中檢視blog畫面(http://localhost:4000)

  4. 新增文章在blog中
    在blog資料夾的內層中找到_posts資料夾，並將.md檔案拖曳至於其中

使用Hexo，建立blog(下)自定義主題

Posted on

使用Hexo，建立blog(下)自定義主題

接續上一篇文章使用Hexo，建立blog(上)新增文章

push上github

  1. 先在github新增一個repository，命名邏輯為

    1
    2
    [github account].github.io
    例：leahlin912.github.io

  2. 複製該repository的網址(例：`git@github.com:leahlin912/leahlin912.github.io.git`)

  3. 用vscode(或其他編譯器)打開_config.yml檔案，並修改# Deployment的部分

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: git@github.com:leahlin912/leahlin912.github.io.git
      branch: master

  4. 安裝git

    1
    $ npm install hexo-deployer-git --save

  5. 輸入指令，將網站佈署到伺服器上

    1
    $ hexo deploy -g

  6. 設定repository的主題
    在github的該repository頁面，進入「setting」

    往下滑，點按「change theme」

  7. 在瀏覽器中查看網址，成功！https://leahlin912.github.io/

  8. 若有檔案更新，則重複輸入指令

    1
    hexo deploy -g

更換主題

  1. 選擇要套用的主題
    [Themes]
    (https://hexo.io/themes/index.html)

  2. 點進該主題的github頁面

  3. 在README.md中，依照install指令複製起來，並在terminal中進入blog資料夾中執行指令完畢

  4. 用vscode開啟blog資料夾，並進入_config.yml檔案中，修改主題theme(參考readme中開發者定義的theme名稱)

  5. 因為檔案有更新，所以需要在terminal輸入指令

    1
    hexo deploy -g

JavaScript-使用API串接公開第三方資源

Posted on

何為API?

API(Application Program Interface)意即應用程式的接口，用於定義軟體與軟體之間銜接所需的溝通方法。換句話說，API是讓軟體與軟體互相串接溝通橋樑。

網站可以使用Web APIs 銜接第三方軟體，獲得第三方端點(endpoint)中含有JSON格式的資料。

Web APIs透過HTTP協議方法，向第三方的公開URL端點發出需求。

開始串接一個API

  • 閱讀API文件：Studio Ghibli API documentation
  • 取得API endpoint：
    在API文件中，滑到films部分，右側會看到GET /films，其中的URL就是API endpoint，點進這個URL會看到一個陣列中包含多個物件，並以JSON格式呈現

  • 使用HTTP請求獲取資料：

    1. 在.js檔案中，創造一個「XMLHttpRequest」物件，並指派給request變數。
    2. 使用open()函式連接，必要的參數包含「請求方法(‘GET’)」及「API端點的URL」
    3. 請求完畢後，我們就有權限進使用onload()函式，進到資料中
    4. 最後，send()正式送出請求
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      // Create a request variable and assign a new XMLHttpRequest object to it.
      var request = new XMLHttpRequest()

      // Open a new connection, using the GET request on the URL endpoint
      request.open('GET', 'https://ghibliapi.herokuapp.com/films')

      request.onload = function () {
        // Begin accessing JSON data here
        }
      }

      // Send request
      request.send()

  • 處理HTTP回傳資料：

    1. 回傳值為JSON格式，必須先使用用JSON.parse()將JSON轉換為javascript物件
    2. 接下來就可以對資料做處理了。例：這裡的資料為陣列，所以下方用forEach()一一讀取陣列中的物件，並且印出每個物件的title
1
2
3
4
5
6
7
// Begin accessing JSON data here
var data = JSON.parse(this.response)

data.forEach(movie => {
  // Log each movie's title
  console.log(movie.title)
})
  • 處理錯誤error：
    每次HTTP發出請求，就會回傳status code，常見的錯誤為404(Not found)，成功為200(OK)。判斷request.status，如果成功就執行印出資料，否則就印出error
1
2
3
4
5
6
7
8
9
10
// Begin accessing JSON data here
var data = JSON.parse(this.response)

if (request.status >= 200 && request.status < 400) {
  data.forEach(movie => {
    console.log(movie.title)
  })
} else {
  console.log('error')
}

接續，在頁面上顯示API資料

  • index.html中有一個div容器，設為id=’root’

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link href="style.css" rel="stylesheet" />
      </head>

      <body>
        <div id="root"></div>
        
        <script src="scripts.js"></script>
      </body>
    </html>

  • 在script.js取得root元素

    1
    const app = document.getElementById('root')

  • 在網頁左上放一個logo

    1
    const logo = document.createElement('img')

  • 新增一個div標籤元素，並且用class定義其css樣式

    1
    2
    const container = document.createElement('div')
    container.setAttribute('class', 'container')

  • 將新增的元素放到網頁上

    1
    2
    app.appendChild(logo)
    app.appendChild(container)

  • 繼續在container中填充回傳值資料

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    data.forEach(movie => {
      // Create a div with a card class
      const card = document.createElement('div')
      card.setAttribute('class', 'card')

      // Create an h1 and set the text content to the film's title
      const h1 = document.createElement('h1')
      h1.textContent = movie.title

      // Create a p and set the text content to the film's description
      const p = document.createElement('p')
      movie.description = movie.description.substring(0, 300) // Limit to 300 chars
      p.textContent = `${movie.description}...` // End with an ellipses

      // Append the cards to the container element
      container.appendChild(card)

      // Each card will contain an h1 and a p
      card.appendChild(h1)
      card.appendChild(p)
    })

成果

參考來源

使用github page顯示靜態網頁

Posted on

使用github page顯示靜態網頁

設定github綁定金鑰

  1. 在本地端新增ssh資料夾
  2. 取得公鑰、私鑰，將公鑰貼上github
  3. 新增ssh完成

repository推上GitHub

  1. 在github 新增 repository
  2. git commit
  3. git remote add origin git@github.com:leahlin912/111.git
  4. git push -u origin master

repository推上GitHub Page

  1. 建立新的branch: git branch gh-pages
  2. 推上github: git push origin gh-pages
  3. 需要注意的是首頁要命名為index.html
  4. 到[github name].github.io/[repository name]網址查看，你的網頁已經展示在這個網址。

補充說明

  • 切換分支：git checkout <branch name>
    (切換分支的同時，新增分支git checkout -b <branch name>)
  • 合併分支：git merge <another branch name>

  • 更新到伺服器端：git push

  • 補充-第一次更新到伺服器：git push -u origin master(設定預設的remote為origin ; 設定預設的branch為master)

申請API憑證-以Youtube Data API為例

Posted on

申請API憑證-以Youtube Data API為例

流程概念

  1. 申請憑證
  2. 將key加入到專案中

申請API Key

  1. 使用google帳號，進入Google Cloud Platform(GCP)

  2. 從左上漢堡標籤，進入「API和服務>資訊主頁」

  3. 點按「啟用API」按鈕

  4. 進到到API函式庫頁面，選擇要使用的API(也可以透過搜尋bar找到該API)

  5. 選擇啟用該API

  6. 頁面中提示要先「建立憑證」

  7. 依照專案需求，填寫表格

  8. 依照個人需求、必要，限制金鑰

  • 應用程式限制：若無限制，任何人皆可在任何裝置上使用這組API金鑰；若有限制，則會進行審核，資料符合的使用者才可使用
  • API限制：可限制該API僅可用來獲取哪些服務Google服務，避免因使用其他服務導致流量超過配額，或被其他人用來獲取其他服務

  1. 勾選起該憑證

  2. 將Key複製到自己的專案中

將Key加入至專案中

API金鑰的使用時機(未完)

Posted on

API金鑰的使用時機(未完)

API金鑰 VS. 使用者憑證token

Google Cloud Endpoints 能夠處理 API 金鑰與驗證機制，『API 金鑰用於專案，驗證則是用於使用者』

  • API 金鑰：用於識別呼叫的專案 (即應用程式或網站)，以便讓呼叫任務對應至正確的API

  • 使用者驗證token：用於辨識使用者，即使用應用程式或網站的使用者

API金鑰

API金鑰提供功能

  • 專案識別：辨識發出API呼叫的應用程式與專案
  • 專案授權：檢查該應用程式是否已獲得呼叫API的存取權，並且確認應用程式是否已經在專案中開啟API

使用者憑證token

使用token驗證機制有兩大目的

  • 使用者驗證：安全地驗證進行呼叫的使用者是否符合其宣稱的身分
  • 使用者授權：檢查使用者是否擁有權限發出要求

Bootstrap-使用Lightbox影像燈箱

Posted on

bootstrap-使用Lightbox影像燈箱

什麼是Lightbox？

  • 網路上有多種他人設計好的燈箱插件，通常都是響應式jQuery燈箱函式庫，用來快速建立及設計漂亮的彈出式影像燈箱，優化網頁中photo gallery的展示效果。

    引入Lightbox

  • 參考lightbox for bootstrap的指令，首先將cdn複製到專案中

CSS
放在<head>中

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />

JS
放在<body>結束前

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

概念

主要功能是點選其中一張照片，該張照片會以燈箱方式展開

  • 結構分為兩層
    • 外層<a>定義燈箱展示的照片，以及展示後的大小
    • 內層<img>定義原始照片
  • 在外層<a>使用bootstrap自定義的data-toggle設定啟用lightbox功能;data-lightbox將多張照片群組起來，在左右切換照片時可以辨識為同一群組的照片
  • 最後添加jquery程式碼，避免預設效果，而採用引入的lightbox效果展示

    實作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     <div class="container">
        <div class="row">
            <div class="col-4">
                <a href="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-2.jpg" 
                data-toggle="lightbox" data-gallery="img-gallery" data-height="560" data-width="560">
                    <img src="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-2.jpg" alt="" class="img-fluid">
                </a>
            </div>
            <div class="col-4">
                <a href="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-3.jpg" 
                        data-toggle="lightbox" data-gallery="img-gallery" data-height="560" data-width="560">
                    <img src="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-3.jpg" alt="" class="img-fluid">
                </a>
            </div>
            <div class="col-4">
                <a href="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-7.jpg" 
                data-toggle="lightbox" data-gallery="img-gallery" data-height="560" data-width="560">
                    <img src="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-7.jpg" alt="" class="img-fluid">
                </a>
            </div>
        </div>
    </div>
1
2
3
4
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});

成果

My Project-MoMA Museum-Collection page

Bootstrap-使用輪播幻燈片Carousal

Posted on

Bootstrap-使用輪播幻燈片Carousal

元件結構

carousal由三個小元件組成，controllers跟indicators 可以選擇性的增加

  • sliders
  • controls
  • indicators

sliders

  • 套用的class分為三層
    • carousal
    • carousal-inner
    • carousal-item
  • .carousal為一個外層容器，在這一層添加data-ride="carousel"讓輪播器自動播放。
  • .carousal-inner主要是讓空間寬度為全版width: 100%;
  • .carousal-item代表一個slide的，裡面可以置放所有文字、圖片內容。在該層添加active代表輪播一開始的畫面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="carouselExample" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="img/bg1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="img/bg2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="img/bg3.jpg" alt="Third slide">
            </div>
        </div>
    </div>

controls

  • 程式碼位置，包在carousal中
  • 左按鈕，套用的class分為兩層
    • <a>標籤中，套用carousel-control-prev
    • <span>標籤中，套用carousel-control-prev-icon
  • 右按鈕，套用的class分為兩層
    • <a>標籤中，套用carousel-control-prev
    • <span>標籤中，套用carousel-control-next-icon
  • 在<a>層主要是定義按鈕的作用目的位置
    • href放上作用caroudal的id(也就是外層carousal的id)
    • data-slide="prev"是bootstrap自定義的屬性，用來轉換上一個或下一個項目
    • role＝”bottom”用來幫助殘障人士，可以借助閱讀器判斷該元件為按鈕
  • 在<span>層主要就比較純粹定義按鈕的樣式
  • 每個<a>中包含兩個<span>，一個是給一般使用者看的，另外一個是給身障人士可以透過screen reader讀取辨識的
    • aria-hidden=true" 可以讓朗讀軟體讀不到此元件。相反的，sr-only 這個 class 是只有使用朗讀程式才可以讀取到的
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- <div id="carouselExample" class="carousel slide" data-ride="carousel"> -->
<!-- 位置放在carousal中 -->

    <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    
<!-- </div> -->

indicators

  • 程式碼位置，包在carousal中
  • 使用<ol>及<li>列表結構
    • <ol>標籤中，套用carousel-indicators
    • 每一個<li>標籤，就搭配到一個slide，若為預設可視的slide，class則添加active
1
2
3
4
5
6
7
8
9
10
<!-- <div id="carouselExample" class="carousel slide" data-ride="carousel"> -->
<!-- 位置放在carousal中 -->

<ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
  
<!-- </div> -->

==Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to=”2”, which shifts the slide position to a particular index beginning with 0.==

補：改變每一張slide停留的時間

Bootstrap 預設每張幻燈片停留時間為5000毫秒(5秒)，可以用interval改變停留時間(單位為毫秒)。

1
2
3
$('.carousel').carousel({
  interval: 1000
})

補：滑鼠滑入slide，不暫停輪播

Bootstrap 預設當滑鼠滑入slide時，輪播會暫停
，可以修改為pause:false。

1
2
3
$('.carousel').carousel({
  pause: false
})

參考bootstrap部分原始碼

  • .carousel-inner
  • .carousel-item
  • .carousel-item .actice
  • .carousel-control-prev
  • .carousel-control-next
  • .carousel-control-prev-icon
  • .carousel-control-next-icon
  • .carousel-indicators

成果

My Project-LonelyPlanet-Home page-Header

建立boiler樣板(下)-引入Font Awesome

Posted on

建立boiler樣板(下)-引入Font Awesome

什麼是Font Awesome？

  • 用於網頁中加入icon的圖示庫，原理是把圖示icon都製作成文字的字型(fonts)，再透過CSS的去呼叫icon顯示出來。
  • 相較於載入一張圖片，loading的負擔較低
  • 可以透過指令放大縮小，不會造成像素失真的問題

    引入fontawesome

  1. 進入fontawesome的「start」頁面
  2. 將cdn複製貼上到<head>中
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  1. 即可開始使用
© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量次
Theme by hiero