Javascript Bookdown和gitbook

我是一个比较有经验的bookdown用户——一个项目完美地完成了复杂和格式化的LaTeX和HTML输出，我对此感到满意

另一个项目是严格意义上的HTML，我想插入一个javascript脚本，我在其他项目中使用过这个脚本，当页面滚动到设定的数量时，它会添加一个“转到顶部”链接。它无处不在。。。除了簿记。我使用include在标题和正文之后添加适当的行

我怀疑是gitbook的上一个和下一个箭头阻止了它的工作，它出现在每个页面上，在每个HTML窗口的左右两侧占据90像素的条纹。我不知道如何测试这一点……除了如果我只是导出原始HTML，那么最重要的东西就会工作

我的问题是:

在我的一生中，我都不知道如何在不使用gitbook主题的情况下从bookdown构建HTML输出。如果您通过示例学习，文档确实很难理解。这是我在index.rmd中的yaml标题

--- 
title: "Quarks, Spacetime, and the Big Bang"
author: "Raymond Brock"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
bookdown::gitbook:
  config:
    toc:
      collapse: section
      toc_depth: 1
      scroll_highlight: yes
      before: null
  number_sections: TRUE
output:
  bookdown::gitbook:
    includes:
      after_body: myscripts.html
      in_header: mybutton_style.html
  bookdown::html_book:
    css: mystyle.css
    includes:
      after_body: myscripts.html
      before_body: mybutton.html
      in_header: mybutton_style.html
documentclass: book
bibliography: [AtG2.bib]
biblio-style: apalike
link-citations: yes
description: 'A high level romp through the smallest and the largest things in the universe'
cover-image: images/beginning/higgs.jpg
---

您可以看到includes，它为totothetop链接添加了必要的代码（注意，我有一个幻灯片javascript，它工作得很好，验证了我对includes的使用）

myscripts.html

 <!-- slide show -->

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i20 | | document.documentElement.scrollTop>20）{
mybutton.style.display=“block”；
}否则{
mybutton.style.display=“无”；
}
}
//当用户单击按钮时，滚动至文档顶部
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}

mybottonstyle.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 600px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>

身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：20px；
}
#myBtn{
显示：无；
位置：固定；
底部：20px；
右：600px；
z指数：99；
字号：18px；
边界：无；
大纲：无；
背景色：红色；
颜色：白色；
光标：指针；
填充：15px；
边界半径：4px；
}
#myBtn：悬停{
背景色：#555；
}

我如何摆脱gitbook的东西，只生成干净的HTML驱动的css，但仍然保留TOC侧边栏

或者，如果我必须在侧边栏中使用gitbook，我如何才能去掉我认为妨碍javascript进入顶部工具的左右箭头片段？对于TOC侧栏，它们是多余的，根本不需要

---

你为什么编辑我的帖子？