博客自定义css和js

2022/7/30 23:24:18

本文主要是介绍博客自定义css和js,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

页面css

html {
  --body-bg: #fff;
  --font-color: #454d64;
  --border-color: #d8dee4;
  --a-color: #4569d4;
  --theme: #4569d4;
  font-size: 14px;
  --max-width: 1320px;
  --input-bg: #eaecefbf;
  --table-bg: #f9fafb;
  --table-border-color: #ebedf1;
  --box-shadow: 0 0 12px rgb(0 0 0 / 20%);
}
.html-night {
  --body-bg: #242525;
  --font-color: #b3ab9e;
  --border-color: #3f4141;
  --a-color: #6190c6;
  --theme: #32498e;
  --input-bg: #373737;
  --table-bg: #272827;
  --table-border-color: #ebedf1;
  --box-shadow: 0 0 12px rgb(0 0 0 / 88%);
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--body-bg);
  color: var(--font-color);
  line-height: 1.6;
  font-size: 1rem;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
input {
  outline: 0;
  background-color: var(--input-bg);
  border: 0;
  color: inherit;
}
#home {
  padding-top: 56px;
}
#top_nav,
#blogTitle,
.blogStats,
#header {
  display: none;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #141414;
  color: #9d9d9d;
  line-height: 56px;
  height: 56px;
}
header > div {
  margin: 0 auto;
  max-width: var(--max-width);
}
header > div > #blog-nav {
  padding: 0 32px;
  display: flex;
}
#blog-nav a {
  margin-right: 20px;
}
header a:hover {
  color: #fff;
}
#main {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--max-width);
  display: flex;
  align-items: flex-start;
}
#mainContent {
  flex: 1;
  overflow: hidden;
  padding: 1px 32px;
}
#mainContent > .forFlow > div,
#myposts {
  padding: 0;
  margin: 0;
}
#mainContent > .forFlow > .PostListTitle,
#mainContent .category-block-title,
#mainContent .entrylistTitle {
  font-size: 18px;
  line-height: 42px;
  margin: 0;
  padding: 0;
  font-style: italic;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}
#myposts > .PostList {
  margin: 0;
}
#myPosts > div {
  margin: 0;
  font-size: inherit;
}
#mainContent .dayTitle a {
  display: none;
}
.postTitl2 a,
.postTitle2,
.entrylistPosttitle {
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 0;
}
.c_b_p_desc {
  color: #7d7d7d;
}
.day .postDesc,
#myposts .postDesc2,
.entrylistItemPostDesc {
  color: #7d7d7d;
  padding: 20px 0 14px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
}
#topics > .post > .postTitle {
  margin: 0;
  padding: 0;
}
#cb_post_title_url {
  font-size: 24px;
  font-weight: 500;
  padding: 10px 0 !important;
}
#cnblogs_post_body {
  border-top: 1px solid var(--border-color);
}
.cnblogs-markdown {
  padding-top: 16px;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}
.cnblogs-markdown a {
  color: var(--a-color);
}
.cnblogs-markdown a:hover {
  text-decoration: underline;
}
.cnblogs-markdown p,
.cnblogs-markdown blockquote,
.cnblogs-markdown ul,
.cnblogs-markdown ol,
.cnblogs-markdown dl,
.cnblogs-markdown table,
.cnblogs-markdown pre,
.cnblogs-markdown details {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cnblogs-markdown hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0 !important;
  background-color: var(--color-border-default);
  border: 0 !important;
}
.cnblogs-markdown blockquote {
  padding: 0 1em !important;
  border-left: 0.25em solid var(--border-color);
  color: inherit;
}
.cnblogs-markdown blockquote > :first-child {
  margin-top: 0;
}
.cnblogs-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.cnblogs-markdown h1,
.cnblogs-markdown h2,
.cnblogs-markdown h3,
.cnblogs-markdown h4,
.cnblogs-markdown h5,
.cnblogs-markdown h6 {
  margin-top: 24px !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.cnblogs-markdown h1 tt,
.cnblogs-markdown h1 code,
.cnblogs-markdown h2 tt,
.cnblogs-markdown h2 code,
.cnblogs-markdown h3 tt,
.cnblogs-markdown h3 code,
.cnblogs-markdown h4 tt,
.cnblogs-markdown h4 code,
.cnblogs-markdown h5 tt,
.cnblogs-markdown h5 code,
.cnblogs-markdown h6 tt,
.cnblogs-markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}
.cnblogs-markdown h1 {
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--border-color);
}
.cnblogs-markdown h2 {
  padding-bottom: 0.3em;
  font-size: 1.5em !important;
  border-bottom: 1px solid var(--border-color);
}
.cnblogs-markdown h3 {
  font-size: 1.25em;
}
.cnblogs-markdown h4 {
  font-size: 1em;
}
.cnblogs-markdown h5 {
  font-size: 0.875em;
}
.cnblogs-markdown h6 {
  font-size: 0.85em;
}
.cnblogs-markdown .hs-item a {
  display: none;
}
.cnblogs-markdown .hs-item:hover a {
  display: initial;
  color: var(--a-color);
  text-decoration: none;
}
.cnblogs-markdown .hs-item button {
  display: none;
}
.cnblogs-markdown summary h1,
.cnblogs-markdown summary h2,
.cnblogs-markdown summary h3,
.cnblogs-markdown summary h4,
.cnblogs-markdown summary h5,
.cnblogs-markdown summary h6 {
  display: inline-block;
}
.cnblogs-markdown summary h1 .anchor,
.cnblogs-markdown summary h2 .anchor,
.cnblogs-markdown summary h3 .anchor,
.cnblogs-markdown summary h4 .anchor,
.cnblogs-markdown summary h5 .anchor,
.cnblogs-markdown summary h6 .anchor {
  margin-left: -40px;
}
.cnblogs-markdown summary h1,
.cnblogs-markdown summary h2 {
  padding-bottom: 0;
  border-bottom: 0;
}
.cnblogs-markdown ul,
.cnblogs-markdown ol {
  padding-left: 2em;
}
.cnblogs-markdown ul.no-list,
.cnblogs-markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}
.cnblogs-markdown ol[type="1"] {
  list-style-type: decimal;
}
.cnblogs-markdown ol[type="a"] {
  list-style-type: lower-alpha;
}
.cnblogs-markdown ol[type="i"] {
  list-style-type: lower-roman;
}
.cnblogs-markdown div > ol:not([type]) {
  list-style-type: decimal;
}
.cnblogs-markdown ul ul,
.cnblogs-markdown ul ol,
.cnblogs-markdown ol ol,
.cnblogs-markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
.cnblogs-markdown li > p {
  margin-top: 16px;
}
.cnblogs-markdown li + li {
  margin-top: 0.25em;
}
.cnblogs-markdown dl {
  padding: 0;
}
.cnblogs-markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.cnblogs-markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.cnblogs-markdown table {
  display: block;
  width: 100%;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border-color: var(--border-color) !important;
}
.cnblogs-markdown table th {
  font-weight: 600;
  background: var(--input-bg) !important;
}
.cnblogs-markdown th,
.cnblogs-markdown td {
  border-color: var(--border-color) !important;
}
.cnblogs-markdown table img {
  background-color: transparent;
}
.cnblogs-markdown img {
  max-width: 100%;
  box-sizing: content-box;
}
.cnblogs-markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}
.cnblogs-markdown :not(pre, div, td) > code,
.blogpost-body :not(pre, div, td) > code {
  background: 0;
  font-family: inherit;
  font-size: 1em;
  padding: 0;
}
.cnblogs-markdown code br,
.cnblogs-markdown tt br {
  display: none;
}
.cnblogs-markdown del code {
  text-decoration: inherit;
}
.cnblogs-markdown samp {
  font-size: 85%;
}
.cnblogs-markdown pre {
  position: relative;
  padding: 25px 0 !important;
  word-wrap: normal;
  border-radius: 4px;
}
.cnblogs-markdown pre > .btns-pre {
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 999;
}
.cnblogs-markdown pre > .btns-pre button {
  font-size: 12px;
  color: #333;
}
.cnblogs-markdown pre > code {
  font-size: 14px;
  padding: 0 25px !important;
  max-height: 700px;
  overflow: auto;
  white-space: pre-wrap !important;
}
#blog-comments-placeholder > .feedback_area_title {
  border-bottom: 1px solid var(--border-color);
  padding: 20px 0 6px;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
}
#blog-comments-placeholder > .feedbackItem {
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0 8px;
}
.feedbackItem > .feedbackListSubtitle > .feedbackManage {
  float: right;
}
.feedbackManage a {
  display: inline-block;
  color: var(--font-color);
  margin-left: 14px;
  border-bottom: 1px solid var(--theme);
  padding: 0 !important;
  line-height: 20px;
}
.feedbackListSubtitle > a {
  color: var(--a-color);
}
.feedbackListSubtitle > .layer {
  background: var(--theme);
  color: #fff;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 12px;
}
.feedbackListSubtitle > .comment_date {
  margin: 0 14px;
  font-size: 85%;
}
.feedbackListSubtitle > .feedbackCon {
  padding: 16px 0 0;
}
#sideBar {
  width: 296px;
  overflow-x: hidden;
}
#sideBarMain {
  position: fixed;
  max-width: 268px;
  top: 70px;
  z-index: 800;
  bottom: 4px;
  overflow-y: auto;
}
#sideBar a {
  color: inherit;
}
#sideBar a:hover {
  color: var(--a-color);
}
#sideBarMain.affix {
  top: 70px;
}
#sideBarMain > div {
  border-left: 1px solid var(--border-color);
  padding-left: 28px;
  padding-right: 28px;
}
#profile_block {
  margin: 0;
  padding: 0;
}
#sideBarMain .catListTitle {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
  line-height: 32px;
}
#sideBarMain .catListTitle + * {
  margin: 0 0 6px;
}
#sideBarMain .div_my_zzk {
  display: flex;
}
#sideBarMain .input_my_zzk {
  flex: 1;
  min-width: 118px;
  width: auto;
}
#sidebar_toptags ul {
  display: flex;
  flex-wrap: wrap;
}
#sidebar_toptags li {
  margin: 0 8px 10px 0;
}
#sidebar_toptags li a {
  white-space: nowrap;
  display: block;
  font-size: 12px;
  background-color: var(--input-bg);
  padding: 2px 8px;
  border-radius: 4px;
}
#sidebar_toptags li a:hover {
  color: #fff;
  background-color: var(--theme);
}
#toc-container {
  margin: 10px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
#toc-container > .toc-top {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
}
#toc ul {
  padding-left: 16px;
}
#toc li {
  line-height: 1.8;
}
#toc a {
  margin: 2px 0;
}
#toc .active > a {
  color: var(--a-color);
  border-bottom: 1px solid var(--a-color);
}
#toc .active-last > a {
  color: var(--a-color);
  border-bottom: 1px solid var(--a-color);
}
#footer {
  text-align: center;
  padding: 24px;
}
#page_end_html {
  max-width: var(--max-width);
  margin: 0 auto;
}
#blog-btns {
  position: fixed;
  z-index: 999;
  bottom: 60px;
  right: 56px;
  bottom: 70px;
}
#blog-btns span {
  display: block;
  margin-bottom: 10px;
  border-radius: 50%;
  font-weight: bold;
  background: var(--body-bg);
  box-shadow: var(--box-shadow);
  font-size: 18px;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
#blog-btns .icon-arrow-up {
  display: none;
}
#blog-btns.affix .icon-arrow-up {
  display: block;
}
#blog-btns span:hover {
  color: #fff;
  background: var(--theme);
  transition: all 0.2s;
}
#blog-btns > .rotated {
  transform: rotate(90deg);
}

页首HTML

<link
  rel="stylesheet"
  href="https://at.alicdn.com/t/font_2872767_90rgncq7s0u.css"
/>
<header>
  <div>
    <div id="blog-nav">
      <a href="https://www.cnblogs.com/" target="_blank">博客园</a>
      <a href="https://www.cnblogs.com/actudou/">首页</a>
      <a
        id="blog_nav_rss"
        class="menu"
        href="javascript:void(0)"
        data-rss="https://www.cnblogs.com/ctudou/rss/"
        >订阅</a
      >
      <a href="https://msg.cnblogs.com/send/user_2008" target="_blank">联系</a>
      <a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" target="_blank"
        >新随笔</a
      >
      <a href="https://i.cnblogs.com/" target="_blank">管理</a>
    </div>
  </div>
</header>

页脚HTML

<div id="blog-btns" data-spy="affix" data-offset-top="80">
  <div>
    <span class="iconfont icon-arrow-up"></span>
    <span class="iconfont icon-shouqi btn-sidebar"></span>
    <span class="iconfont icon-day btn-theme"></span>
  </div>
  <span class="btn-control rotated iconfont icon-ellipsis"></span>
</div>
<script src="https://files.cnblogs.com/files/blogs/372275/affix-scrollspy.min.js?t=1658853262"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<!-- <script src="https://blog-static.cnblogs.com/files/blogs/372275/affix.min.js?t=1658852259"></script> -->

<!-- <script src="https://blog-static.cnblogs.com/files/blogs/712181/scrollspy.js"></script> -->

<script>
  $(document).ready(function () {
    $("#blog-btns .icon-arrow-up").on("click", function () {
      $("html,body").animate({ scrollTop: 0 });
    });
    var theme = localStorage.getItem("theme") || "day";
    var showSide = true;
    if (theme != "day") {
      $("html").addClass("html-night");
      $("#blog-btns .btn-theme").addClass("icon-night");
    }
    $("#blog-btns .btn-theme").on("click", function () {
      $(this).toggleClass("icon-night");
      theme = theme == "day" ? "night" : "day";
      $("html").toggleClass("html-night");
      localStorage.setItem("theme", theme);
    });

    $("#blog-btns>.btn-control").on("click", function () {
      $(this).toggleClass("rotated").siblings().slideToggle("fast");
    });
    $("#blog-btns .btn-sidebar").on("click", function () {
      $(this).toggleClass("icon-zhankai");
      $("#sideBarMain").css({ "max-width": showSide ? "0" : "276px" });

      $("#sideBar").animate({ width: showSide ? "0" : "296px", speed: "fast" });
      showSide = !showSide;
    });
    function createLi(el, index) {
      return $("<li></li>").html(
        $("<a></a>")
          .attr("href", "#" + el.textContent)
          .text(el.textContent)
      );
    }
    function createToc(selector) {
      var hs = $(selector);
      if (hs.length === 0) {
        return false;
      }
      var min = {
        value: hs[0].tagName[1],
        index: 0,
      };

      hs.each(function (index, el) {
        if (el.tagName[1] - min.value < 0) {
          min = {
            index: index,
            value: el.tagName[1],
          };
        }
      });
      var arr = [];
      var toc = $("<ul></ul>");

      var preLevel = ""; //父级序号
      var parentLi = ""; //父级li
      hs.each(function (index, el) {
        var li = createLi(el);

        var t = el.tagName[1];
        $(el).addClass("hs-item");
        if (
          t === min.value ||
          index === 0 ||
          (index < min.index && t === hs[0].tagName[1])
        ) {
          toc.append(li);
          arr = [];
          preLevel = "";
          parentLi = li;
        } else {
          var r = t - hs[index - 1].tagName[1];
          preLevel = arr[0].li.data("level");
          if (r === 0) {
            arr[0].li.after(li);
            preLevel = preLevel.slice(0, preLevel.lastIndexOf("."));
          } else if (r > 0) {
            arr[0].li.append($("<ul></ul>").append(li));
            parentLi = arr[0].li;
          } else {
            var item = arr.find(function (value) {
              return t > value.el.tagName[1];
            });
            item.li.children("ul").append(li);
            preLevel = item.li.data("level");
            parentLi = item.li;
          }
          preLevel += ".";
        }
        var span = $('<span class="li-level"></span>');
        li.data({
          level: preLevel + "" + (li.index() + 1),
        })
          .children("a")
          .prepend(span.text(li.data("level") + ". "));

        $(el)
          .attr("id", el.textContent)
          .prepend(span.clone())
          .append(
            $("<a>#</a>").attr({
              href: "#" + el.id,
            })
          );

        // if (parentLi.children("li").length >= 2) {
        //   var toggle = $('<button class="li-toggle">-</button>');
        //   parentLi.prepend(toggle);
        //   toggle.on("click", function () {
        //     if (toggle.text() == "-") {
        //       toggle.text("+").siblings("ul").slideUp("fast");
        //     } else {
        //       toggle.text("-").siblings("ul").slideDown("fast");
        //     }
        //   });
        // }

        arr.unshift({
          el: el,
          li: li,
        });
        // $(el).text(li.data('level')+hs[index].text())
      });
      return toc;
    }
    function addPreBtn() {
      var pres = $("#cnblogs_post_body pre");
      if (pres.length == 0) {
        return;
      }
      pres.each(function (index, el) {
        var foldBtn = $(
          '<button class="iconfont icon-arrow-down icon-arrow-right cnb-code-toolbar-item">折叠</button>'
        );
        var code = $(this).children("code");
        var copyBtn = $('<button class="btn-copy">复制</button>').attr(
          "data-clipboard-text",
          code.text()
        );

        $(el).prepend(
          $('<div class="btns-pre"></div>').append(foldBtn).append(copyBtn)
        );
        foldBtn.on("click", function () {
          $(this).toggleClass("icon-arrow-down");
          code.slideToggle("fast");
        });
        var c = new ClipboardJS(copyBtn[0]);
        c.on("success", function () {
          // copyBtn.removeClass("icon-copy").addClass("icon-check");
          copyBtn.text("已复制");
        });
        c.on("error", function () {
          copyBtn.text("复制失败");
        });
        $(this).mouseleave(function () {
          // copyBtn.text("").removeClass("icon-check").addClass("icon-copy");
          if (copyBtn.text() == "已复制") {
            copyBtn.text("复制");
          }
        });
      });
    }
    var postId = window.location.pathname.match(/\/p\/(\d+)\./) || null;
    if (postId !== null) {
      addPreBtn();
      var toc = createToc(
        "#cnblogs_post_body h2,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6"
      );
      if (toc !== false) {
        toc.addClass("nav").attr("id", "toc");
        var container = $(
          '<div id="toc-container"><div  class="catListTitle toc-top"><div>目录</div><span class="iconfont icon-arrow-down icon-arrow-right"></span></div></div>'
        ).append(toc);
        $("#leftcontentcontainer").prepend(container);
        $("body").scrollspy({
          target: "#leftcontentcontainer",
          offset: 70,
        });
        var activeLast = $("<div></div>");
        // var hideActiveLast = $("<div></div>");

        $("#leftcontentcontainer").on("activate.bs.scrollspy", function () {
          // activeLast.removeClass("active-last");
          // hideActiveLast.removeClass("active-last");
          // activeLast = $("#leftcontentcontainer>#toc .active")
          //   .slice(-1)
          //   .addClass("active-last");
          // hideActiveLast = $("#leftcontentcontainer>.toc-hide .active")
          //   .slice(-1)
          //   .addClass("active-last");
        });
      }

      $("#toc-container>.toc-top").on("click", function () {
        $("#toc").slideToggle("fast");

        $("#toc-container>.toc-top span").toggleClass("icon-arrow-down");
      });
    }
  });
</script>



这篇关于博客自定义css和js的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程