对博客来一场“复习提纲式”的打印优化

前言

虽然说过暂时不写技术类的文章，不过嘛Stellar针对打印样式完全没有优化，无论纵向还是横向都是相当炸裂，只能再研究下了

不过话说回来，最近几次文章其实都是围绕编写笔记而写的，再加一篇吧

方法

使用@media print 媒体查询调整css样式

@media print {
  /* 隐藏元素 */
  .l_left,
  .l_right,
  .top.bread-nav.footnote,
  div#read-next,
  div#post-ai,
  div#related-posts,
  div#comments,
  section#license,
  section#share,
  #link-icon,
  footer {
    display: none;
  }
  .md-text psw {
    color: unset;
    background: unset;
    border: 3px dashed var(--block-border);
  }
  /* 隐藏锚点 */
  .markdownIt-Anchor {
    display: none; /* 隐藏原始链接内容 */
  }
  /* 修改背景和边框 */
  .article.banner {
    background: none;
    border-bottom: 1px dashed var(--block-border);
  }

  /* 调整边框圆角和内边距 */
  .banner,
  .banner.top {
    border-radius: 0;
  }

  .banner .bottom,
  table {
    padding: 0rem;
  }

  /* 取消grid布局 */
  #start {
    display: unset;
  }
  /* 调整字的上下边距 */
  p {
    margin: 0 !important;
  }
  /* 调整标题的上外边距 */
  h1,h2,h3,h4,h5, h6 {
    margin: 0 !important;
  }

  /* 限制图片高度 */
  img {
    max-height: 100vh;
  }
  .md-text {
    max-width: 100%;
    line-height:unset;
  }
}