码迷，mamicode.com
首页 > 其他好文 > 详细

[美化] 博客园美化历程

时间：2019-10-02 12:50:27      阅读：74      评论：0      收藏：0      [点我收藏+]

标签：更改   自定义   aci   cfs   sed   正则表达   pos   func   ring   

目录

标题上写着美化，但怎么看自己的界面，仿佛每条线都在呐喊着：“实际上是简化吧！” /扶额

在入驻博客园的一周时间里，我使用各种课上时间抽空研究了一下博客园的页面定制CSS代码、HTML和JS这些看了半天也搞不明白的东西，并将原来的模板“SimpleMemory”改成了现在的样子。

开端

首先百度“博客园 css”，发现有不少前辈都把自己的css样式表直接贴了出来……但对我来说，这跟博客园自带的无数主题没有什么区别呀……哦好吧可能多一些交互特效。但是看了十多个都没有和自己审美一致的就很难受，更不用说有些人自己的主页都崩了/捂脸，这让我怎么敢直接抄代码2333。

不过还是有好心人稍微讲解了一下基本原理，这里感谢@mskitten的写给前端白痴的博客园样式定制指南。这大概是第一篇让我稍微了解到，想自定义自己的界面到底应该从何处下手的博文。我也很喜欢他的css，但是显然我更喜欢自己动手做一个哈哈。另外就是@夏日浅笑的这篇博客园样式美化，这位大佬的博客园可以说是很好看了，然而他又用WordPress建了一个更漂亮的个人主页……膜膜膜。我直接无脑copy了他所有的去广告部分。

最后在实现代码行号、版权信息和目录的js代码上，还要感谢一下这两位大佬@呆尐兔兔的js代码（虽然我用不了），还有@Bravo Yeung的博文（虽然我照着做也弄不好），我看@呆尐兔兔传到github上的代码也有人反馈了设置不成功但是没有下文。不过有人参考前面那位大佬的东西造出了一个我能直接copy且运行成功的代码！@蒟蒻ｍqd请这位大佬请不要妄自菲薄，在我看来您最厉害/捂脸，贴一下原博文地址以表敬意：https://www.cnblogs.com/mmmqqdd/p/10848560.html

具体的css

净化页面

之前说了这些是copy的，后来发现人家竟然连标题都取消显示了，哈哈，目前我的代码并没有去掉那么多乱七八糟的东西。

    //完全都是未知的东西，反正看起来不是什么好东西
    #cnblogs_c1{
        display: none;
    }
    #cnblogs_c2{
        display: none;
    }
    #ad_t2{
        display: none;
    }
    #kb_block{
        display:none
    }
    #under_post_news{
        display:none
    }
    #header{
        display:none
    }
    #BlogPostCategory{
        display: none;
    }
    .postDesc{
        border-bottom:none;
    }
    .newsItem .catListTitle {
        display: none;
    }
    #profile_block {
        display: none;
    }
    //这是作者个人信息，后来加原创声明以后就去掉了
    #author_profile_follow{
        display: none;
    }
    #author_profile {
        display: none;
    }

标题的蜜汁动画

    //原本被取消的
    #topics .postTitle{
        display: none;
    }

本来我觉得取消标题无所谓啊，而且我不喜欢博客园这个能乱动的标题（后来发现只是我选的主题是这样的啦～），那我在内容里加个H1标题就好，后来在加目录之后让我为难了，因为目录（至少我不会放到正文里）只能加在正文和标题之间……
但是这个动画在个人主页看还蛮好看的，所以后来想保留个人主页的动画，去掉内容里的标题动画，于是找到了绝妙的定位方法让主题自带的动画在文章链接中不显示pointer-events: none; 大概是无视鼠标，独自美丽23333

    #topics .postTitle{
        pointer-events: none;
        padding-bottom: 0.6em;
        margin-left: -15px;
        font-size: 2em !important;
        border-bottom: 1px solid #eee;
    }

改一下主页的比例

也是一位博主介绍的教程，使用了前两步，找不到原文链接了。

    #home {
        margin: 0 auto;
        width: 90%;
        min-width: 950px;
        background-color: #fff;
        padding: 30px;
        margin-top: 50px;
        margin-bottom: 50px;
        box-shadow: 0 2px 6px rgba(100,100,100,.3);
    }

另一些改动

    //内容与右边界贴的太近，加了一个边。
    #mainContent {
        min-height: 200px;
        padding: 0 0 10px 0;
        *padding-top: 10px;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        float: right;
        margin-left: -22em;
        width: 100%;
    }
    //把侧边栏挪到左边
    #sideBar {
        margin-top: 0px;
        width: 250px;
        min-height: 200px;
        padding: 0 0 0 5px;
        float: left;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        colour: 112233;
    }
    #sideBar h1 {
        font-size: 30px;
    }
    //一堆自己看着不爽就挪来挪去的东西
    #topics {
        width: 95%;
        padding: 0 50px 10px 10px;
    }
    .day {
        width: 95%;
        padding: 0px 50px 10px 10px;
    }
    #cnblogs_post_body {
        margin: 20px 0;
    }
    #div_digg {
        margin-top: -60px;
    }
    #comment_form_container .comment_textarea {
        width: 800px;
    }
    .commentbox_title {
        width: 800px;
    }
    //主题自带的Markdown引用蜜汁双引号，屏蔽掉
    .postBody blockquote {
        background-image: none;
    }

侧边栏的html

    <!--悄悄加了一个链接-->
    <div>
        <h1 class="winng">
            <a href="https://www.cnblogs.com/winng/">
                winng
            </a> 
        </h1>
        <br>
    <!--去掉了标题栏所以又加上几个链接-->
        <h3 class="sign">
            <a href="https://i.cnblogs.com/Configure.aspx">
                no game, no life.
            </a> 
        </h3>
        <br>
    <!--照猫画虎地加了一个图片-->
        <img src="https://files-cdn.cnblogs.com/files/winng/winngcover.bmp">
    </div>
    <br>
    <br>
    <div>
        <li>
            <a href="https://msg.cnblogs.com/send/winng">
                站内联系
            </a> 
        </li>
        <li>
            <a href="https://www.cnblogs.com/winng/MyDiary.html">
                我的日记
            </a> 
        </li>
    </div>

js代码的添加

在之前提到的文章里copy到了拥有添加目录、添加版权声明、添加代码行号功能的js代码（包括一些css样式表），但原来的代码存在两点问题：

  1. 目录功能在没有目录的时候也会显示一个目录
  2. 版权声明并不应该出现在我写的文章里，博客园告诉我文章是用来放转载的东西的，我不希望它有版权声明……（好像日记里出现也没什么用，但是我懒得再改了）

在没有目录的情况下不显示目录

    if (($("#cnblogs_post_body h2,#cnblogs_post_body h3")).length==0)
        return false;

查了一下js的筛选器……然后发现这是一个叫做jQuery的东西（显然最后也不知道jQuery到底是什么），但反正我搞清楚了怎样判断没筛选出任何东西，这就够了/叉腰。

在url存在 article 的时候不显示版权声明

    url = window.location.href;
    var reg=/.articles./;
    if(reg.test(url)){
       return false;
    }

稍微看了看正则表达式，然后写了这样一个东西。

js附带的css

首先是在css里需要加的，对博客园markdown的美化（？）……反正做那个js的大佬表示把这些都贴上就行，我后来又改了一些（主要就是换了自己喜欢的Fira Code的字体）。

    @font-face {
      font-family: octicons-anchor;
      src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
    }
    #cnblogs_post_body {
      margin: 20px 0;
    }
     
    .cnblogs-markdown {
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      color: #333;
      overflow: hidden;
      font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      word-wrap: break-word;
    }
     
    .cnblogs-markdown a {
      background: transparent;
    }
     
    .cnblogs-markdown a:active,
    .cnblogs-markdown a:hover {
      outline: 0;
    }
     
    .cnblogs-markdown strong {
      font-weight: bold;
    }
     
    .cnblogs-markdown h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }
     
    .cnblogs-markdown img {
      border: 0;
    }
     
    .cnblogs-markdown hr {
      box-sizing: content-box;
      height: 0;
    }
     
    .cnblogs-markdown pre {
      overflow: auto;
    }
     
    .cnblogs-markdown code,
    .cnblogs-markdown kbd,
    .cnblogs-markdown pre {
      font-family: monospace, monospace;
      font-size: 1em;
    }
     
    .cnblogs-markdown input {
      color: inherit;
      font: inherit;
      margin: 0;
    }
     
    .cnblogs-markdown html input[disabled] {
      cursor: default;
    }
     
    .cnblogs-markdown input {
      line-height: normal;
    }
     
    .cnblogs-markdown input[type="checkbox"] {
      box-sizing: border-box;
      padding: 0;
    }
     
    .cnblogs-markdown table {
      border-collapse: collapse;
      border-spacing: 0;
    }
     
    .cnblogs-markdown td,
    .cnblogs-markdown th {
      padding: 0;
    }
     
    .cnblogs-markdown * {
      box-sizing: border-box;
    }
     
    .cnblogs-markdown input {
      font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    }
     
    .cnblogs-markdown a {
      color: #4183c4;
      text-decoration: none;
    }
     
    .cnblogs-markdown a:hover,
    .cnblogs-markdown a:active {
      text-decoration: underline;
    }
     
    .cnblogs-markdown hr {
      height: 0;
      margin: 15px 0;
      overflow: hidden;
      background: transparent;
      border: 0;
      border-bottom: 1px solid #ddd;
    }
     
    .cnblogs-markdown hr:before {
      display: table;
      content: "";
    }
     
    .cnblogs-markdown hr:after {
      display: table;
      clear: both;
      content: "";
    }
     
    .cnblogs-markdown h1,
    .cnblogs-markdown h2,
    .cnblogs-markdown h3,
    .cnblogs-markdown h4,
    .cnblogs-markdown h5,
    .cnblogs-markdown h6 {
      margin-top: 15px;
      margin-bottom: 10px;
      line-height: 1.1;
    }
     
    .cnblogs-markdown blockquote {
      margin: 0;
    }
     
    .cnblogs-markdown ul,
    .cnblogs-markdown ol {
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
    }
     
    .cnblogs-markdown ol ol,
    .cnblogs-markdown ul ol {
      list-style-type: lower-roman;
    }
     
    .cnblogs-markdown ul ul ol,
    .cnblogs-markdown ul ol ol,
    .cnblogs-markdown ol ul ol,
    .cnblogs-markdown ol ol ol {
      list-style-type: lower-alpha;
    }
     
    .cnblogs-markdown dd {
      margin-left: 0;
    }
     
    .cnblogs-markdown code {
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
      font-size: 12px;
    }
     
    .cnblogs-markdown pre {
      margin-top: 0;
      margin-bottom: 0;
      font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
    }
     
    .cnblogs-markdown .octicon {
      font: normal normal normal 16px/1 octicons-anchor;
      display: inline-block;
      text-decoration: none;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
     
    .cnblogs-markdown .octicon-link:before {
      content: '\f05c';
    }
     
    .cnblogs-markdown>*:first-child {
      margin-top: 0 !important;
    }
     
    .cnblogs-markdown>*:last-child {
      margin-bottom: 0 !important;
    }
     
    .cnblogs-markdown a:not(:link):not(:visited) {
      color: inherit;
      text-decoration: none;
    }
     
    .cnblogs-markdown .anchor {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      padding-right: 6px;
      padding-left: 30px;
      margin-left: -30px;
    }
     
    .cnblogs-markdown .anchor:focus {
      outline: none;
    }
     
    .cnblogs-markdown h1,
    .cnblogs-markdown h2,
    .cnblogs-markdown h3,
    .cnblogs-markdown h4,
    .cnblogs-markdown h5,
    .cnblogs-markdown h6 {
      position: relative;
      margin-top: 1em;
      margin-bottom: 16px;
      font-weight: bold;
      line-height: 1.4;
    }
     
    .cnblogs-markdown h1 .octicon-link,
    .cnblogs-markdown h2 .octicon-link,
    .cnblogs-markdown h3 .octicon-link,
    .cnblogs-markdown h4 .octicon-link,
    .cnblogs-markdown h5 .octicon-link,
    .cnblogs-markdown h6 .octicon-link {
      display: none;
      color: #000;
      vertical-align: middle;
    }
     
    .cnblogs-markdown h1:hover .anchor,
    .cnblogs-markdown h2:hover .anchor,
    .cnblogs-markdown h3:hover .anchor,
    .cnblogs-markdown h4:hover .anchor,
    .cnblogs-markdown h5:hover .anchor,
    .cnblogs-markdown h6:hover .anchor {
      padding-left: 8px;
      margin-left: -30px;
      text-decoration: none;
    }
     
    .cnblogs-markdown h1:hover .anchor .octicon-link,
    .cnblogs-markdown h2:hover .anchor .octicon-link,
    .cnblogs-markdown h3:hover .anchor .octicon-link,
    .cnblogs-markdown h4:hover .anchor .octicon-link,
    .cnblogs-markdown h5:hover .anchor .octicon-link,
    .cnblogs-markdown h6:hover .anchor .octicon-link {
      display: inline-block;
    }
     
    .cnblogs-markdown h1 {
      padding-bottom: 0.3em;
      font-size: 2.25em !important;
      line-height: 1.2;
      border-bottom: 1px solid #eee;
    }
     
    .cnblogs-markdown h1 .anchor {
      line-height: 1;
    }
     
    .cnblogs-markdown h2 {
      padding-bottom: 0.3em;
      font-size: 1.5em !important;
      line-height: 1.225;
      border-bottom: 1px solid #eee;
    }
     
    .cnblogs-markdown h2 .anchor {
      line-height: 1;
    }
     
    .cnblogs-markdown h3 {
      font-size: 1.25em!important;
      line-height: 1.43;
    }
     
    .cnblogs-markdown h3 .anchor {
      line-height: 1.2;
    }
     
    .cnblogs-markdown h4 {
      font-size: 1.1em !important; 
    }
     
    .cnblogs-markdown h4 .anchor {
      line-height: 1.2;
    }
     
    .cnblogs-markdown h5 {
      font-size: 1em !important;
    }
     
    .cnblogs-markdown h5 .anchor {
      line-height: 1.1;
    }
     
    .cnblogs-markdown h6 {
      font-size: 1em !important;
      color: #777;
    }
     
    .cnblogs-markdown h6 .anchor {
      line-height: 1.1;
    }
     
    .cnblogs-markdown p,
    .cnblogs-markdown blockquote,
    .cnblogs-markdown ul,
    .cnblogs-markdown ol,
    .cnblogs-markdown dl,
    .cnblogs-markdown table,
    .cnblogs-markdown pre {
      margin-top: 0;
      margin-bottom: 16px;
    }
     
    .cnblogs-markdown hr {
      height: 4px;
      padding: 0;
      margin: 16px 0;
      background-color: #e7e7e7;
      border: 0 none;
    }
     
    .cnblogs-markdown ul,
    .cnblogs-markdown ol {
      padding-left: 2em;
      font-size: 14px;
    }
     
    .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 dl {
      padding: 0;
    }
     
    .cnblogs-markdown dl dt {
      padding: 0;
      margin-top: 16px;
      font-size: 1em;
      font-style: italic;
      font-weight: bold;
    }
     
    .cnblogs-markdown dl dd {
      padding: 0 16px;
      margin-bottom: 16px;
    }
     
    .cnblogs-markdown blockquote {
      color: #333;
      padding: 10px 15px;
      border: none;
      border-left: 10px solid #D6DBDF;
    }
     
    .cnblogs-markdown blockquote>:first-child {
      margin-top: 0;
    }
     
    .cnblogs-markdown blockquote>:last-child {
      margin-bottom: 0;
    }
     
    .cnblogs-markdown table {
      display: block;
      width: 100%;
      overflow: auto;
      word-break: normal;
      word-break: keep-all;
    }
     
    .cnblogs-markdown table th {
      font-weight: bold;
    }
     
    .cnblogs-markdown table th,
    .cnblogs-markdown table td {
      padding: 6px 13px;
      border: 1px solid #ddd;
    }
     
    .cnblogs-markdown table tr {
      background-color: #fff;
      border-top: 1px solid #ccc;
    }
     
    .cnblogs-markdown table tr:nth-child(2n) {
      background-color: #f8f8f8;
    }
     
    .cnblogs-markdown img {
      max-width: 100%;
      box-sizing: border-box;
    }
     
    .cnblogs-markdown code {
      padding: 0;
      padding-top: 0.2em;
      padding-bottom: 0.2em;
      margin: 0;
      font-size: 85%;
      background-color: rgba(0,0,0,0.04);
      border-radius: 3px;
      border: none !important;
      display: inline-block;
    }
     
    .cnblogs-markdown code:before,
    .cnblogs-markdown code:after {
      letter-spacing: -0.2em;
      content: "\00a0";
    }
     
    /*only for syntaxhighlighter */
    /*--start--*/
    .cnblogs-markdown .syntaxhighlighter table td.code {
      width:95% !important; 
    }
     
    .cnblogs-markdown .syntaxhighlighter code {
      font-family: "Fira Code","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;
      padding: 0 !important;
      border-radius: 0 !important;
      background-color: transparent !important;
    }
     
    .cnblogs-markdown .syntaxhighlighter code:before,
    .cnblogs-markdown .syntaxhighlighter code:before {
      letter-spacing: -0.5em;
    }
    /*--end--*/
     
    .cnblogs-markdown pre>code {
      padding: 0;
      margin: 0;
      font-size: 100%;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0;
    }
     
    .cnblogs-markdown .highlight {
      margin-bottom: 16px;
    }
     
    .cnblogs-markdown .highlight pre,
    .cnblogs-markdown pre {
      padding: 16px;
      overflow: auto;
      font-size: 85%;
      line-height: 1.45;
      background-color: #f7f7f7;
      border-radius: 3px;
    }
     
    .cnblogs-markdown .highlight pre {
      margin-bottom: 0;
      word-break: normal;
    }
     
    .cnblogs-markdown pre {
      word-wrap: normal;
    }
     
    .cnblogs-markdown code, .cnblogs-post-body code {
        font-family: "Fira Code",sans-serif!important;
    }
    .cnblogs-markdown pre code {
      display: inline;
      max-width: initial;
      padding: 0;
      margin: 0;
      overflow: initial;
      line-height: inherit;
      word-wrap: normal;
      background-color: transparent;
      border: 0;
    }
     
    .cnblogs-markdown pre code:before,
    .cnblogs-markdown pre code:after {
      content: normal;
    }
     
    .cnblogs-markdown kbd {
      display: inline-block;
      padding: 3px 5px;
      font-size: 11px;
      line-height: 10px;
      color: #555;
      vertical-align: middle;
      background-color: #fcfcfc;
      border: solid 1px #ccc;
      border-bottom-color: #bbb;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #bbb;
    }
     
    .cnblogs-markdown .pl-c {
      color: #969896;
    }
     
    .cnblogs-markdown .pl-c1,
    .cnblogs-markdown .pl-mdh,
    .cnblogs-markdown .pl-mm,
    .cnblogs-markdown .pl-mp,
    .cnblogs-markdown .pl-mr,
    .cnblogs-markdown .pl-s1 .pl-v,
    .cnblogs-markdown .pl-s3,
    .cnblogs-markdown .pl-sc,
    .cnblogs-markdown .pl-sv {
      color: #0086b3;
    }
     
    .cnblogs-markdown .pl-e,
    .cnblogs-markdown .pl-en {
      color: #795da3;
    }
     
    .cnblogs-markdown .pl-s1 .pl-s2,
    .cnblogs-markdown .pl-smi,
    .cnblogs-markdown .pl-smp,
    .cnblogs-markdown .pl-stj,
    .cnblogs-markdown .pl-vo,
    .cnblogs-markdown .pl-vpf {
      color: #333;
    }
     
    .cnblogs-markdown .pl-ent {
      color: #63a35c;
    }
     
    .cnblogs-markdown .pl-k,
    .cnblogs-markdown .pl-s,
    .cnblogs-markdown .pl-st {
      color: #a71d5d;
    }
     
    .cnblogs-markdown .pl-pds,
    .cnblogs-markdown .pl-s1,
    .cnblogs-markdown .pl-s1 .pl-pse .pl-s2,
    .cnblogs-markdown .pl-sr,
    .cnblogs-markdown .pl-sr .pl-cce,
    .cnblogs-markdown .pl-sr .pl-sra,
    .cnblogs-markdown .pl-sr .pl-sre,
    .cnblogs-markdown .pl-src {
      color: #183691;
    }
     
    .cnblogs-markdown .pl-v {
      color: #ed6a43;
    }
     
    .cnblogs-markdown .pl-id {
      color: #b52a1d;
    }
     
    .cnblogs-markdown .pl-ii {
      background-color: #b52a1d;
      color: #f8f8f8;
    }
     
    .cnblogs-markdown .pl-sr .pl-cce {
      color: #63a35c;
      font-weight: bold;
    }
     
    .cnblogs-markdown .pl-ml {
      color: #693a17;
    }
     
    .cnblogs-markdown .pl-mh,
    .cnblogs-markdown .pl-mh .pl-en,
    .cnblogs-markdown .pl-ms {
      color: #1d3e81;
      font-weight: bold;
    }
     
    .cnblogs-markdown .pl-mq {
      color: #008080;
    }
     
    .cnblogs-markdown .pl-mi {
      color: #333;
      font-style: italic;
    }
     
    .cnblogs-markdown .pl-mb {
      color: #333;
      font-weight: bold;
    }
     
    .cnblogs-markdown .pl-md,
    .cnblogs-markdown .pl-mdhf {
      background-color: #ffecec;
      color: #bd2c00;
    }
    .cnblogs-markdown .pl-mdht,
    .cnblogs-markdown .pl-mi1 {
      background-color: #eaffea;
      color: #55a532;
    }
     
    .cnblogs-markdown .pl-mdr {
      color: #795da3;
      font-weight: bold;
    }
     
    .cnblogs-markdown .pl-mo {
      color: #1d3e81;
    }
     
    .cnblogs-markdown kbd {
      display: inline-block;
      padding: 3px 5px;
      font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
      line-height: 10px;
      color: #555;
      vertical-align: middle;
      background-color: #fcfcfc;
      border: solid 1px #ccc;
      border-bottom-color: #bbb;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #bbb;
      padding-top: 20px;
    }
     
    .cnblogs-markdown .task-list-item {
      list-style-type: none;
    }
     
    .cnblogs-markdown .task-list-item+.task-list-item {
      margin-top: 3px;
    }
     
    .cnblogs-markdown .task-list-item input {
      margin: 0 0.35em 0.25em -1.6em;
      vertical-align: middle;
    }
     
    .cnblogs-markdown :checked+.radio-label {
      z-index: 1;
      position: relative;
      border-color: #4183c4;
    }
     
    .cnblogs-markdown .hljs {
       border: none !important;
    }
    #cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td {
       border: none !important;
       padding: 0;
    }
     
    .postCon {
       font-size: 14px;
    }
     
    .cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
        font-family: "Fira Code",sans-serif!important;
       font-size: 13px! important;
    }
     
    .cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
       font-family: "Fira Code",sans-serif!important;
       font-size: 13px!important;
       line-height: 1.5!important;
       padding: 5px!important;
    }
    
    #cnblogs_post_body table, .cnblogs-post-body table {
       border: none !important;
       border-collapse: collapse;
       word-break: break-word;

js完整代码

//未知的内容
<link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.7.0/dist/highlightjs-line-numbers.min.js"></script>
    <script>
        $(function () {
        /* markdown模式下为代码加入行号, 调用插件highlightjs-line-numbers.js */
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
        });
    </script>
    <script type="text/javascript">
        var setMyBlog = {
            setCopyright: function() { //设置版权信息，转载出处自动根据页面url生成，这里应该把自己的名字写上
            var info_str = '<hr></hr><p>作者：<a target="_blank">@winng</a><br>'+
                '本文为作者原创，转载请注明出处：<a class="uri"></a></p>',
            info = $(info_str),
            info_a = info.find("a"),
            url = window.location.href;
            var reg=/.articles./; //没有技术水平的正则
            if(reg.test(url)){
                return false;
            }
            $(info_a[0]).attr("href","https://www.cnblogs.com/winng"); //然后在这里贴上自己的主页地址
            $(info_a[1]).attr("href",url).text(url);
            $("#cnblogs_post_body").append(info);
        },
        setCodeRow: function(){
            // 代码行号显示
            var pre = $("pre.sourceCode"); //选中需要更改的部分
            if(pre && pre.length){
                    pre.each(function () {
                        var item = $(this);
                        var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
                        item.html(item.html().replace(/<[^>]+>/g, "    ")); //将<pre>标签中的html标签去掉
                        item.removeClass().addClass("brush: " + lang + ";"); //根据语言添加笔刷
                        SyntaxHighlighter.all();
                    })
                }
                },
        setAtarget: function() {
                    // 博客内的链接在新窗口打开
                    $("#cnblogs_post_body a").each(function () {
                        this.target = "_blank";
                    })
                },
        setContent: function() {
            // 根据h2、h3标签自动生成目录
            var captions_ori = $("#cnblogs_post_body h2"),
                    captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
                content = $("<blockquote><h4>目录</h4></blockquote>");
            if (($("#cnblogs_post_body h2,#cnblogs_post_body h3")).length==0)  //没有水平的判断
                return false;
            $("#cnblogs_post_body").prepend(content.append(captions));
            var index = -1;
                captions.replaceWith(function(){
                    var self = this;
                    if(self.tagName == "H2" || self.tagName == "h2"){
                        // 设置点击目录跳转
                        index += 1;
                    $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]);
                        return '<a href="#_caption_' + index + '"><strong>' + self.innerHTML + '</strong></a><br>';
                    } else {
                        return "?  "  + self.innerHTML + "<br>";
                    }
                });
            },
        runAll: function() {
                            /* 运行所有方法
                             * setAtarget() 博客园内标签新窗口打开
                             * setContent() 设置目录
                             * setCopyright() 设置版权信息
                             * setCodeRow() 代码行号显示
                             */
                            this.setAtarget();
                        this.setContent();
                        this.setCopyright();
                        this.setCodeRow();
                    }
                }
                setMyBlog.runAll();
</script>

结语

也不知道有没有人跟我一样不知道markdown自带一个叫做Toc的目录，用的时候只要用[]把Toc框起来就可以了，感觉很好看……所以说折腾那半天目录我为什么啊/捂脸。

//找到了css格式里会让目录看起来怪怪的一行，改掉就好了
.cnblogs-markdown ul, .cnblogs-markdown ol {
    padding: 10px 0px 0px 0px;
}

所以直接注释掉this.setContent();，然后每篇想加个目录的随笔里加上TOC就可以了qvq

[美化] 博客园美化历程

标签：更改   自定义   aci   cfs   sed   正则表达   pos   func   ring   

原文地址：https://www.cnblogs.com/winng/p/cnblogs_css.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！