In emajortaiwan/emajorDV:

Action

knitr::opts_chunk$set(echo = T, eval=F)
library(emajorDV)
library(htmltools); library(rlang)
library(dplyr)
purlActiveRmd_thenPlanMake()
ws %=% webService() # build ws as a promise
ws$serveTheLastModified()

* drake makecondition

放你程式碼所需套件

library(emajorDV)
library(htmltools); library(rlang)
library(dplyr)

* header

• tags$header(), tags$main()分別產生<header> ... </head>, <main>...</main依此類推。

header = {
  tags$header(
    headContent
  )
}

* headContent

• 常用的html tag，可以直接寫用tag name，tags$h1() = <h1>...</h1>, tags$div() = <div> ...</div>.

• (....)的..., attrName="attrValue", "html_text".

  <h1 class="title">This is who I am</h1>

equal to

h1(class="title", "This is who I am")

headContent = {
  h1(
    class="title",
    "This is who I am"
  )
}

main

main = {
  tags$main(
    div(
      class="article",
      mainContent
    )
  )
}

* html複製貼上

mainContent

mainContent = {'<div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>' %>%
            htmlTemplate(text_=.) -> mainContent
          mainContent
          }

footer

footer = {
  tags$footer(
    div(
      class='footer-copyright',
      div(
        class="container",
        " © 2020 EMajor Taiwan",
        a(
          class="grey-text text-lighten-4 right",
          href="https::/emajortaiwan.github.io/home",
          "EMajor Home"
        )
      )
    )
  )

}

外部引入JS

after_body JS

afterBodyJs = {
"
document.addEventListener('DOMContentLoaded', function() {
    M.AutoInit();
  });
" -> initialization

  tags$script(
    initialization
  ) -> afterBodyJs

  afterBodyJs
}

afterBodyJs = htmltools::includeScript("afterbody.js")

body layout

bodyLayout = {
  tags$body(
    header,
    main,
    footer,
    afterBodyJs
  )
}

* Head

Materialize:

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

jQuery:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

deps <- {
  css <-
    htmlDependency(
      name = "materializecss",
      version = "1.0.0",
      src = list(
        href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/"
      ),
      stylesheet = "css/materialize.min.css"
    )
  js <-
    htmlDependency(
      name = "materializejs",
      version = "1.0.0",
      src = list(
        href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/"
      ),
      script = "js/materialize.min.js"
    )
  jquery <-
    htmlDependency(
      name = "jQuery",
      version = "3.5.1",
      src = "",
      head = '<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

'
    )
  deps <- list(
    css = css,
    js = js,
    jquery = jquery
  )
  deps
}

* Output

outputWeblayout = {
  htmlDependencies(bodyLayout) <- deps
  save_html(bodyLayout, file="test.html")
}

emajortaiwan/emajorDV documentation built on Sept. 14, 2020, 8:04 p.m.