Chapter 2 HTML/CSS 2

2.1 教材

2.2 學習主題

  • 建立一個Project.

  • Rmd檔引入外部檔案。

  • 路徑。

2.3 主題內容

2.3.1 建立Project

File > New Project > New Directory/Existing Directory

2.3.2 Rmd frontmatter

  • 由Rmd產生單純html檔的設定
output: 
  html_document:
    theme: null
    highlight: null
    mathjax: null
    self_contained: false
  • head content外部引入
output:
  html_document:
    includes:
      in_header: "外部檔案路徑"

若frontmatter已有output > html_document設定，只需貼上includes的部份，如：

output: 
  html_document:
    theme: null
    highlight: null
    mathjax: null
    self_contained: false
    includes:
      in_header: "外部檔案路徑"
  • after-body content外部引入
output:
  html_document:
    includes:
      after_body: "外部檔案路徑"

若frontmatter已有output > html_document > includes設定，只需貼上after_body的部份，如：

output: 
  html_document:
    theme: null
    highlight: null
    mathjax: null
    self_contained: false
    includes:
      in_header: "外部檔案路徑"
      after_body: "外部檔案路徑"

2.3.3 Rmd產生body內容

  • 其他body部份放入html語法。

Rmd裡，frontmatter以外的部份knit完都會是body的內容，如果要在body裡放html 語法有兩種作法：

  1. 直接放html語法（但不可內縮超過一層）

內縮一層可以

<table>
  <tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
  </tr>
  <tr>
  <td>Alfreds Futterkiste</td>
  <td>Maria Anders</td>
  <td>Germany</td>
  </tr>
</table>

內縮兩層不行

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>
  1. 先插入一個r chunk (點Knitr鍵右邊的Insert > R 可產生r chunk), 再輸入
htmltools::includeHTML("外部html檔案")

此法不受html語法內縮幾層影響。

2.4 課後練習

2.4.1 A

下載資料匣02_A_exercise完成page1.Rmd及subpage/page2.Rmd使兩者knit完的html畫面如下，使用table及img相關html tags.

2.4.2 B

網頁設計往往會使用某些現成架構（framework）來簡化設計過程，如Bootstrap。要使用現成framework通常需要在head及after body加上某些html語句。請使用Rmd，依Bootstrap Quick Start 下載02_B_exercise.Rmd（必需有加入Google classroom此連結才會有效），透過includes設定來產生Bootstrap的架構。