时间戳

首页 > 解决方案 > 如何从 rmarkdown paged-HTML 文档中的特定页面中排除 HTML DIV？

javascript - 如何从 rmarkdown paged-HTML 文档中的特定页面中排除 HTML DIV？

问题描述

我在 Rmarkdown 上使用分页 HTML 文档模板，我想删除使用自定义 CSS 和 HTML 创建的页眉和页脚。我尝试使用 :not()但无法在 CSS 中指定选择器，因为我不确定要使用哪个选择器。

（更新：我能够想出一个我可以使用的凌乱的解决方法，在页眉和页脚的 CSS 中，我调整了页眉的“顶部”属性和页脚的“底部”属性。）

@media print {
  div.divHeader { 
    position: fixed;
    top: 452px;#page length in pixels
    left: 0;
  }
}
@media print {
  div.divFooter { 
    position: fixed;
    bottom: -452px; # negative since using Bottom not Top *note: not real size
    left: 0;
  }
}

但是，如果有一个不那么迂回的方式来实现这一点，下面是我尝试过的，请帮忙提出一个更清洁的建议。

我为页眉和页脚定义了一个单独的 div，它们各自的元素如下：

---
title: "Title Here"
author: 
date: 
output:
  pagedown::html_paged:
    toc: true
    self_contained: false
    css:
      - default-fonts
      - default
      - custom-page-portrait.css
      - Pagesplit.css
knit: pagedown::chrome_print

---
<div class="divFooter">
   <div class="divFooter--line"> <body><hr></body> </div>
   <div class="divFooter--ReportDate"style = "font-family:calibri;"> **Report Date:**<br>10/12/112</div>
   <div class="divFooter--ReportAnalyst" style = "font-family:calibri;"> **Report Analyst**<br>John Smith</div>
   <div class="divFooter--HoldingsDate" style = "font-family:calibri;"> **Holdings Date**<br>December 31, 2018</div>

</div>


<div class="divHeader">
  <div class="divHeader--left" style = "font-family:calibri;"> **Header Left**<br>under half</div>
  <div class="divHeader--right" style = "font-family:calibri;"> **Header Right**<br>under half</div>

</div>

和 CSS

/*Header*/
@media screen {
  div.divHeader {
    display: none;
  }
}
@media print {
  div.divHeader { 
    position: fixed;
    top: 0;
    left: 0;
  }
}
/*https://www.w3schools.com/howto/howto_css_style_header.asp*/
/* http://getbem.com/introduction/ */
.divHeader {
  position: relative;
  padding: 10px;
  text-align: center;
  background: #F15A55;/*not real colour*/
  color: white;
  font-size: 25px;
  width: 100%;
  height:8%;
  float: none;
}

.divHeader--left {
  position: absolute;
  text-align: left;
  float: left;
  left: 50px;
  top: 10px;
}

.divHeader--right {
  position: absolute;
  text-align: right;
  float: right;
  right: 50px;
  top: 10px;
}

页脚 css 类似。

页面的原始自定义 css 是：

@page {
  size: 8.3in 11.7in;
}

/* store some string variables */
.shorttitle1 {
  string-set: h1-text content(text);
}

.shorttitle2 {
  string-set: h2-text content(text);
}

/* left page */
.running-h1-title {
  position: running(runningH1Title);
  width: var(--running-title-width);
  text-overflow: ellipsis;
  overflow: hidden;
}
.running-h1-title:before {
  content: string(h1-text);
}

@page :first{
    content: "Some text";
    position: relative;
    
  }
@page :first {
  @top-left {
     content: none;
  }
  @top-right {
    content: none;
  }
  @bottom-right {
    content: none !important;
  }
  background-image: var(--front-cover);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@page {
  @bottom-left{
    <div class="footerObj"> 
      <hr>
      <p>A Name.</p>
    </div>;
  }
}
.footerObj {
  top: 10px;
  text-indent: 100px;
}
@page :left {
  @bottom-right {
    content: counter(page);
  }
}

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

/* Front cover */
.front-cover {
  break-after: page;
}

/* page breaks; aka CSS fragmentation */
.level1 {
  break-before: page;
}
.section > h1, .section > h2, .section > h3, .section > h4, .section > h5, .section > h6 {
  break-after: avoid;
}
.footnotes {
  break-before: always;
  break-after: always;
}
.figure {
  break-inside: avoid;
}

/* do not break captions */
caption {
  break-inside: avoid;
  break-after: avoid;
}

标签： javascripthtmlcssr-markdownpagedown

解决方案

推荐阅读