_site/intro.html

<!DOCTYPE html>
<html lang="en">
  

  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1">

  <title>Home</title>
  <meta name="description" content="Books with Jupyter and Jekyll- zhishi wang">

  <link rel="canonical" href="http://0.0.0.0:4000//intro.html">
  <link rel="alternate" type="application/rss+xml" title="YOUR BOOK NAME" href="http://0.0.0.0:4000//feed.xml">

  <meta property="og:url"         content="http://0.0.0.0:4000//intro.html" />
<meta property="og:type"        content="article" />
<meta property="og:title"       content="Home" />
<meta property="og:description" content="Books with Jupyter and Jekyll- zhishi wang" />
<meta property="og:image"       content="" />


  <script type="application/ld+json">
  {
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage":
    "http://0.0.0.0:4000//intro.html",
  "headline":
    "Home",
  "datePublished":
    "2019-06-26T22:27:18-05:00",
  "dateModified":
    "2019-06-26T22:27:18-05:00",
  "description":
    "Books with Jupyter and Jekyll- zhishi wang",
  "author": {
    "@type": "Person",
    "name": "YOUR AUTHOR NAME"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Data 100 at UC Berkeley",
    "logo": {
      "@type": "ImageObject",
      "url": "http://0.0.0.0:4000/",
      "width": 60,
      "height": 60
    }
  },
  "image": {
    "@type": "ImageObject",
    "url": "http://0.0.0.0:4000/",
    "height": 60,
    "width": 60
  }
}

  </script>
  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css ">
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

  <!-- <link rel="manifest" href="/manifest.json"> -->
  <!-- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#efae0a"> -->
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-TileImage" content="/mstile-144x144.png">
  <meta name="theme-color" content="#233947">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="/images/logo/favicon.ico">

  <!-- MathJax Config -->
  <!-- Allow inline math using $ and automatically break long math lines -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true,
        processEnvironments: true
    },
    CommonHTML: {
        linebreaks: {
            automatic: true,
        },
    },
});
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML' async></script>

  <!-- DOM updating function -->
  <script>
const runWhenDOMLoaded = cb => {
  if (document.readyState != 'loading') {
    cb()
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', cb)
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState == 'complete') cb()
    })
  }
}

// Helper function to init things quickly
initFunction = function(myfunc) {
  runWhenDOMLoaded(myfunc);
  document.addEventListener('turbolinks:load', myfunc);
};
</script>

  <!-- Define some javascript variables that will be useful in other javascript -->
  <script>
    const site_basename = '/';
  </script>

  <!-- Add AnchorJS to let headers be linked -->
  <script src="/assets/js/anchor.min.js"  type="text/javascript"></script>
  <script>

initFunction(function () {
    anchors.add("main h1, main h2, main h3, main h4")
});

</script>

  <!-- Include Turbolinks to make page loads fast -->
  <!-- https://github.com/turbolinks/turbolinks -->
  <script src="/assets/js/turbolinks.js" async></script>
  <meta name="turbolinks-cache-control" content="no-cache">

  <!-- Load nbinteract for widgets -->
  

  <!-- Load Thebelab for interactive widgets -->
  <!-- Include Thebelab for interactive code if it's enabled -->


<!-- Display Thebelab button in each code cell -->
<script>
/**
 * Set up thebelab button for code blocks
 */

const thebelabCellButton = id =>
  `<a id="thebelab-cell-button-${id}" class="btn thebebtn o-tooltip--left" data-tooltip="Interactive Mode">
    <img src="/assets/images/edit-button.svg" alt="Start interactive mode">
  </a>`


const addThebelabButtonToCodeCells =  () => {

  const codeCells = document.querySelectorAll('div.input_area > div.highlighter-rouge:not(.output) pre')
  codeCells.forEach((codeCell, index) => {
    const id = codeCellId(index)
    codeCell.setAttribute('id', id)
    if (document.getElementById("thebelab-cell-button-" + id) == null) {
      codeCell.insertAdjacentHTML('afterend', thebelabCellButton(id));
    }
  })
}

initFunction(addThebelabButtonToCodeCells);
</script>


<script type="text/x-thebe-config">
    {
      requestKernel: true,
      binderOptions: {
        repo: 'YOUR-ORG/YOUR-REPO',
        ref: 'gh-pages',
      },
      codeMirrorConfig: {
        theme: "abcdef"
      },
      kernelOptions: {
        name: 'python3',
      }
    }
</script>
<script src="https://unpkg.com/thebelab@0.4.0/lib/index.js"></script>
<script>
    /**
     * Add attributes to Thebelab blocks
     */

    const initThebelab = () => {
        const addThebelabToCodeCells = () => {
            console.log("Adding thebelab to code cells...");
            // If Thebelab hasn't loaded, wait a bit and try again. This
            // happens because we load ClipboardJS asynchronously.
            if (window.thebelab === undefined) {
                setTimeout(addThebelabToCodeCells, 250)
            return
            }

            // If we already detect a Thebelab cell, don't re-run
            if (document.querySelectorAll('div.thebelab-cell').length > 0) {
                return;
            }

            // Find all code cells, replace with Thebelab interactive code cells
            const codeCells = document.querySelectorAll('.input_area pre')
            codeCells.forEach((codeCell, index) => {
                const id = codeCellId(index)
                codeCell.setAttribute('data-executable', 'true')

                // Figure out the language it uses and add this too
                var parentDiv = codeCell.parentElement.parentElement;
                var arrayLength = parentDiv.classList.length;
                for (var ii = 0; ii < arrayLength; ii++) {
                    var parts = parentDiv.classList[ii].split('language-');
                    if (parts.length === 2) {
                        // If found, assign dataLanguage and break the loop
                        var dataLanguage = parts[1];
                        break;
                    }
                }
                codeCell.setAttribute('data-language', dataLanguage)

                // If the code cell is hidden, show it
                var inputCheckbox = document.querySelector(`input#hidebtn${codeCell.id}`);
                if (inputCheckbox !== null) {
                    setCodeCellVisibility(inputCheckbox, 'visible');
                }
            });

            // Remove the event listener from the page so keyboard press doesn't
            // Change page
            document.removeEventListener('keydown', initPageNav)
            keyboardListener = false;

            // Init thebelab
            thebelab.bootstrap();

            // Remove copy buttons since they won't work anymore
            const copyAndThebeButtons = document.querySelectorAll('.copybtn, .thebebtn')
            copyAndThebeButtons.forEach((button, index) => {
                button.remove();
            });

            // Remove outputs since they'll be stale
            const outputs = document.querySelectorAll('.output *, .output')
            outputs.forEach((output, index) => {
                output.remove();
            });
        }

        // Add event listener for the function to modify code cells
        const thebelabButtons = document.querySelectorAll('[id^=thebelab], [id$=thebelab]')
        thebelabButtons.forEach((thebelabButton,index) => {
            if (thebelabButton === null) {
                setTimeout(initThebelab, 250)
                return
            };
            thebelabButton.addEventListener('click', addThebelabToCodeCells);
        });
    }

    // Initialize Thebelab
    initFunction(initThebelab);
</script>


  <!-- Load the auto-generating TOC -->
  <script src="/assets/js/tocbot.min.js"  type="text/javascript"></script>
  <script>
var initToc = function () {
  tocbot.init({
    tocSelector: 'nav.onthispage',
    contentSelector: '.c-textbook__content',
    headingSelector: 'h2, h3',
    orderedList: false,
    collapseDepth: 6,
    listClass: 'toc__menu',
    activeListItemClass: "",  // Not using
    activeLinkClass: "", // Not using
  });
  tocbot.refresh();
}
initFunction(initToc);
</script>

  <!-- Google analytics -->
  <script src="/assets/js/ga.js" async></script>

  <!-- Clipboard copy button -->
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" async></script>

  <!-- Load JS that depends on site variables -->
  <script>
/**
 * Set up copy/paste for code blocks
 */
const codeCellId = index => `codecell${index}`

const clipboardButton = id =>
  `<a id="copy-button-${id}" class="btn copybtn o-tooltip--left" data-tooltip="Copy" data-clipboard-target="#${id}">
    <img src="/assets/images/copy-button.svg" alt="Copy to clipboard">
  </a>`

// Clears selected text since ClipboardJS will select the text when copying
const clearSelection = () => {
  if (window.getSelection) {
    window.getSelection().removeAllRanges()
  } else if (document.selection) {
    document.selection.empty()
  }
}

// Changes tooltip text for two seconds, then changes it back
const temporarilyChangeTooltip = (el, newText) => {
  const oldText = el.getAttribute('data-tooltip')
  el.setAttribute('data-tooltip', newText)
  setTimeout(() => el.setAttribute('data-tooltip', oldText), 2000)
}

const addCopyButtonToCodeCells = () => {
  // If ClipboardJS hasn't loaded, wait a bit and try again. This
  // happens because we load ClipboardJS asynchronously.
  if (window.ClipboardJS === undefined) {
    setTimeout(addCopyButtonToCodeCells, 250)
    return
  }

  const codeCells = document.querySelectorAll('div.c-textbook__content > div.highlighter-rouge > div.highlight > pre, div.input_area pre')
  codeCells.forEach((codeCell, index) => {
    const id = codeCellId(index)
    codeCell.setAttribute('id', id)
    if (document.getElementById("copy-button" + id) == null) {
      codeCell.insertAdjacentHTML('afterend', clipboardButton(id));
    }
  })

  const clipboard = new ClipboardJS('.copybtn')
  clipboard.on('success', event => {
    clearSelection()
    temporarilyChangeTooltip(event.trigger, 'Copied!')
  })

  clipboard.on('error', event => {
    temporarilyChangeTooltip(event.trigger, 'Failed to copy')
  })

  // Get rid of clipboard before the next page visit to avoid memory leak
  document.addEventListener('turbolinks:before-visit', () =>
    clipboard.destroy()
  )
}

initFunction(addCopyButtonToCodeCells);
</script>


  <!-- Hide cell code -->
  <script>
    /**
    Add buttons to hide code cells
    */


    var setCodeCellVisibility = function (inputField, kind) {
        // Update the image and class for hidden
        var id = inputField.getAttribute('data-id');
        var codeCell = document.querySelector(`#${id} div.highlight`);

        if (kind === "visible") {
            codeCell.classList.remove('hidden');
            inputField.checked = true;
        } else {
            codeCell.classList.add('hidden');
            inputField.checked = false;
        }
    }

    var toggleCodeCellVisibility = function (event) {
        // The label is clicked, and now we decide what to do based on the input field's clicked status
        if (event.target.tagName === "LABEL") {
            var inputField = event.target.previousElementSibling;
        } else {
            // It is the span inside the target
            var inputField = event.target.parentElement.previousElementSibling;
        }

        if (inputField.checked === true) {
            setCodeCellVisibility(inputField, "visible");
        } else {
            setCodeCellVisibility(inputField, "hidden");
        }
    }


    // Button constructor
    const hideCodeButton = id => `<input class="hidebtn" type="checkbox" id="hidebtn${id}" data-id="${id}"><label title="Toggle cell" for="hidebtn${id}" class="plusminus"><span class="pm_h"></span><span class="pm_v"></span></label>`

    var addHideButton = function () {
        // If a hide button is already added, don't add another
        if (document.querySelector('div.hidecode input') !== null) {
            return;
        }

        // Find the input cells and add a hide button
        document.querySelectorAll('div.input_area').forEach(function (item, index) {
            if (!item.classList.contains("hidecode")) {
                // Skip the cell if it doesn't have a hidecode class
                return;
            }

            const id = codeCellId(index)
            item.setAttribute('id', id);
            // Insert the button just inside the end of the next div
            item.querySelector('div').insertAdjacentHTML('beforeend', hideCodeButton(id))

            // Set up the visibility toggle
            hideLink = document.querySelector(`#${id} div.highlight + input + label`);
            hideLink.addEventListener('click', toggleCodeCellVisibility)
        });
    }


    // Initialize the hide buttos
    var initHiddenCells = function () {
        // Add hide buttons to the cells
        addHideButton();

        // Toggle the code cells that should be hidden
        document.querySelectorAll('div.hidecode input').forEach(function (item) {
            setCodeCellVisibility(item, 'hidden');
            item.checked = true;
        })
    }

    initFunction(initHiddenCells);

</script>

  <!-- Load custom website scripts -->
  <script src="/assets/js/scripts.js" async></script>

  <!-- Load custom user CSS and JS  -->
  <script src="/assets/custom/custom.js" async></script>
  <link rel="stylesheet" href="/assets/custom/custom.css">

  <!-- Update interact links w/ REST param, is defined in includes so we can use templates -->
  

  <!-- Lunr search code - will only be executed on the /search page -->
  <script src="/assets/js/lunr/lunr.min.js" type="text/javascript"></script>
  <script>var initQuery = function() {
  // See if we have a search box
  var searchInput = document.querySelector('input#lunr_search');
  if (searchInput === null) {
    return;
  }

  // Function to parse our lunr cache
  var idx = lunr(function () {
    this.field('title')
    this.field('excerpt')
    this.field('categories')
    this.field('tags')
    this.ref('id')

    this.pipeline.remove(lunr.trimmer)

    for (var item in store) {
      this.add({
        title: store[item].title,
        excerpt: store[item].excerpt,
        categories: store[item].categories,
        tags: store[item].tags,
        id: item
      })
    }
  });

  // Run search upon keyup
  searchInput.addEventListener('keyup', function () {
    var resultdiv = document.querySelector('#results');
    var query = document.querySelector("input#lunr_search").value.toLowerCase();
    var result =
      idx.query(function (q) {
        query.split(lunr.tokenizer.separator).forEach(function (term) {
          q.term(term, { boost: 100 })
          if(query.lastIndexOf(" ") != query.length-1){
            q.term(term, {  usePipeline: false, wildcard: lunr.Query.wildcard.TRAILING, boost: 10 })
          }
          if (term != ""){
            q.term(term, {  usePipeline: false, editDistance: 1, boost: 1 })
          }
        })
      });

      // Empty the results div
      while (resultdiv.firstChild) {
        resultdiv.removeChild(resultdiv.firstChild);
      }

    resultdiv.insertAdjacentHTML('afterbegin', '<p class="results__found">'+result.length+' Result(s) found</p>');
    for (var item in result) {
      var ref = result[item].ref;
      if(store[ref].teaser){
        var searchitem =
          '<div class="list__item">'+
            '<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">'+
              '<h2 class="archive__item-title" itemprop="headline">'+
                '<a href="'+store[ref].url+'" rel="permalink">'+store[ref].title+'</a>'+
              '</h2>'+
              '<div class="archive__item-teaser">'+
                '<img src="'+store[ref].teaser+'" alt="">'+
              '</div>'+
              '<p class="archive__item-excerpt" itemprop="description">'+store[ref].excerpt.split(" ").splice(0,20).join(" ")+'...</p>'+
            '</article>'+
          '</div>';
      }
      else{
    	  var searchitem =
          '<div class="list__item">'+
            '<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">'+
              '<h2 class="archive__item-title" itemprop="headline">'+
                '<a href="'+store[ref].url+'" rel="permalink">'+store[ref].title+'</a>'+
              '</h2>'+
              '<p class="archive__item-excerpt" itemprop="description">'+store[ref].excerpt.split(" ").splice(0,20).join(" ")+'...</p>'+
            '</article>'+
          '</div>';
      }
      resultdiv.insertAdjacentHTML('beforeend', searchitem);
    }
  });
};

initFunction(initQuery);
</script>
</head>

  <body>
    <!-- .js-show-sidebar shows sidebar by default -->
    <div id="js-textbook" class="c-textbook js-show-sidebar">
      

<nav id="js-sidebar" class="c-textbook__sidebar">
  <a href="https://jupyter.org/jupyter-book/"><img src="/images/logo/logo.png" class="textbook_logo" id="sidebar-logo" data-turbolinks-permanent/></a>
  <h2 class="c-sidebar__title">YOUR BOOK NAME</h2>
  <ul class="c-sidebar__chapters">
    
      
      <li class="c-sidebar__chapter">
        <a class="c-sidebar__entry c-sidebar__entry--active"
          href="/intro.html"
        >
          
          Home
        </a>

        
      </li>

      
      <li class="c-sidebar__chapter">
        <a class="c-sidebar__entry "
          href="https://github.com/jupyter/jupyter-book"
        >
          
          GitHub repository
        </a>

        
      </li>

      
        <li class="c-sidebar__chapter"><a class="c-sidebar__entry" href="/search.html">Search</a></li>
        
      
        <li class="c-sidebar__divider"></li>
        
      
        <li><h2 class="c-sidebar__title">Demo textbook</li>
        
      
      <li class="c-sidebar__chapter">
        <a class="c-sidebar__entry "
          href="/features/features.html"
        >
          
          Features and customization
        </a>

        
          <ul class="c-sidebar__sections ">
            
              
              <li class="c-sidebar__section">
                <a class="c-sidebar__entry "
                  href="/features/markdown.html"
                >
                  
                  Markdown files
                </a>

                
              </li>
              
            
              <li class="c-sidebar__section">
                <a class="c-sidebar__entry "
                  href="/features/notebooks.html"
                >
                  
                  Jupyter notebooks
                </a>

                
              </li>
              
            
          </ul>
        
      </li>

      
  </ul>
  <p class="sidebar_footer">Powered by <a href="https://github.com/jupyter/jupyter-book">Jupyter Book</a></p>
</nav>

      
      <!-- Empty sidebar placeholder that we'll auto-fill with javascript -->
      <aside class="sidebar__right">
          <header><h4 class="nav__title"><i class="fa fa-list"></i>   On this page</h4></header>
          <nav class="onthispage">
          </nav>
      </aside>
      
      <main class="c-textbook__page" tabindex="-1">
          <div class="o-wrapper">
            <div class="c-sidebar-toggle">
  <!-- We show the sidebar by default so we use .is-active -->
  <button
    id="js-sidebar-toggle"
    class="hamburger hamburger--arrowalt is-active"
  >
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
    <span class="c-sidebar-toggle__label">Toggle Sidebar</span>
  </button>
</div>

            
            <div class="c-textbook__content">
              <h1 id="books-with-jupyter-and-jekyll--zhishi-wang">Books with Jupyter and Jekyll- zhishi wang</h1>

<p><img src="https://circleci.com/gh/jupyter/jupyter-book.svg?style=svg" class="left" /></p>

<p>Jupyter Books lets you build an online book using a collection of Jupyter Notebooks
and Markdown files. Its output is similar to the excellent <a href="https://bookdown.org/yihui/bookdown/">Bookdown</a> tool,
and adds extra functionality for people running a Jupyter stack.</p>

<p>For an example of a book built with Jupyter Books, see the <a href="https://www.textbook.ds100.org/">textbook for Data 100</a> at UC Berkeley.</p>

<p>Here are a few features of Jupyter Books</p>

<ul>
  <li>All course content is written in markdown and Jupyter Notebooks, stored in <code class="highlighter-rouge">notebooks/</code></li>
  <li>The Jupyter Book repo comes packaged with helper scripts to convert these into Jekyll pages (in <code class="highlighter-rouge">scripts/</code>) that can be hosted for free on GitHub</li>
  <li>Pages can have <a href="https://mybinder.org">Binder</a> or JupyterHub links automatically added for interactivity.</li>
  <li>The website itself is based on Jekyll, and is highly extensible and can be freely-hosted on GitHub.</li>
  <li>There are lots of nifty HTML features under-the-hood, such as Turbolinks fast-navigation and
click-to-copy in code cells.</li>
</ul>

<h2 id="getting-started">Getting started</h2>

<p>To get started, you may be interested in the following links.
Here are a few links of interest:</p>

<ul>
  <li>
    <p><strong><a href="features/features">Quickstart</a></strong> is a quick demo and overview of Jupyter Books.</p>
  </li>
  <li>
    <p><strong><a href="guide/01_overview">The Jupyter Book Guide</a></strong>
will step you through the process of configuring and building your own Jupyter Book.</p>
  </li>
  <li>
    <p><strong><a href="https://github.com/jupyter/jupyter-book">The Jupyter Book template repo</a></strong> is the template
repository you’ll use as a start for your Jupyter Book.</p>
  </li>
  <li>
    <p><strong>A demo of the Jupyter Book</strong> can be browsed via the sidebar to the left.</p>
  </li>
</ul>

<h2 id="installation">Installation</h2>

<p>Here’s a brief rundown of how to create your own Jupyter Book using this site. For a more
complete guide, see <a href="guide/01_overview">the Jupyter Book guide</a>.</p>

<ul>
  <li>Fork the Jupyter Book template repo</li>
  <li>Replace the demo notebooks in <code class="highlighter-rouge">content/</code> with your own notebooks and markdown files.</li>
  <li>Create a Table of Contents yaml file by editing <code class="highlighter-rouge">_data/toc.yaml</code>.</li>
  <li>Generate the Jekyll markdown for your notebooks by running <code class="highlighter-rouge">scripts/generate_book.py</code></li>
  <li>Push your changes to GitHub (or wherever you host your site)!</li>
</ul>

<h2 id="acknowledgements">Acknowledgements</h2>

<p>Jupyter Books was originally created by <a href="http://www.samlau.me/">Sam Lau</a> and <a href="https://predictablynoisy.com">Chris Holdgraf</a>
with support of the <strong>UC Berkeley Data Science Education Program and the Berkeley
Institute for Data Science</strong>.</p>


              <nav class="c-page__nav">
  
    
    <a id="js-page__nav__prev" class="c-page__nav__prev" href="">
      〈 <span class="u-margin-right-tiny"></span> 
    </a>
  

    <a id="js-page__nav__next" class="c-page__nav__next" href="https://github.com/jupyter/jupyter-book">
      GitHub repository <span class="u-margin-right-tiny"></span> 〉
    </a>
  
</nav>

            </div>
          </div>
        </div>
      </main>
    </div>

  </body>
</html>