[Beautification] blog garden landscaping course

Beautify the title says, but how to see their own interface, as if each line were shouting: "! Actually simplify it" / the amount of help

In the week Park settled blog, IUse a variety of class timeTaking the time to study a little garden blog page custom CSS code, HTML and JS also saw a long time these things do not understand, and the original template "SimpleMemory" into what it is today.

beginning

First, Baidu 'blog css Park ", found that many seniors see themselves css stylesheets directly attached out ...... but for me, this is no different blog theme park comes with countless ah ...... oh well Some effects may be more interactive. But he looked at more than a dozen and are not consistent with their own aesthetic very uncomfortable, not to mention some people have their own home pages collapse / Behind his, it makes me how dare directly copy the code 2333.

But still there are good people to explain a little about the basic principles, here to thank @mskitten the blog customization garden style guide written for the front idiot . This is probably the first to let me know a little, want to customize their interface in the end should start from where Bowen. I also like his css, but obviously I prefer to DIY a ha ha. The other is @ smile summer of this blog style garden landscaping , the chiefs of the garden blog can be said that a good read, but he has used WordPress to build a more beautiful profile ...... film membrane film. I have no direct brain to copy all of his advertising section.

Finally, on the lines of code to achieve js code number, copyright information and directories, but also to thank these two big brothers @ Bunny stay Ji js code (although I will not take), as well as @Bravo Yeung blog (although I follow suit also fix), I see @ Bunny stay Ji spread code on github feedback was also the setting unsuccessful but not below. But some people refer to the previous chiefs who fashioned a thing I can directly copy the code and run successful! @ Konjac mqd please the bigwigs do not sell ourselves short, it seems to me you are the most powerful / Behind his, posted about the original blog address to pay tribute to the table: https://www.cnblogs.com/mmmqqdd/p/10848560.html

Specific css

Purification page

Before saying these are the copy, and later found that people are not even cancel the show title, ha ha, currently my code does not remove so much a mess of things.

    //完全都是未知的东西，反正看起来不是什么好东西
    #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;
    }

The title of the movie Honey

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

Originally, I think to cancel the title does not matter ah, but I do not like this blog park can tamper with the title (I later found just such a theme is selected friends ~), then I'm content in Riga H1after just fine, then add the directory in title let me embarrassed, because the directory (at least I will not put in the body) can only be applied between the text and the title ......
but the animation look quite nice in profile, so then want to keep personal home page animation, get rid of content in the title animation, and then found a wonderful way to get the positioning that comes with animated themes do not appear in the article link pointer-events: none;is probably ignore the mouse alone beautiful 23333

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

The change in the proportion of home

Tutorial is also a blogger described, using the first two steps, could not find the original link.

    #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);
    }

Other changes

    //内容与右边界贴的太近，加了一个边。
    #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 sidebar

    <!--悄悄加了一个链接-->
    <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>

Add js code

Copy in the article mentioned earlier in to possess 添加目录, 添加版权声明, 添加代码行号JS codes function (including some css stylesheets), but there are two problems the original code:

1. Directory features also appear in the absence of a directory目录
2. Copyright should not appear in my writing 文章, the blog park told me that the article is reproduced to put things, and I do not want it to have a copyright notice ......(Diary appears as if no use, but I'm too lazy again changed)

Directories Do Not Appear in the absence of circumstances directory

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

I checked js filters ...... and then found it was a thing called the jQuery (apparently the last in the end do not know what is jQuery), but anyway, I figure out how the judge did not screen out anything that's enough / akimbo .

In the presence of url articledoes not display the copyright notice time

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

He looked a little regular expressions, and then write such a thing.

js included with css

The first is the need to add css in the beautification of the garden markdown of the blog (?) ...... Anyway, do that js chiefs indicate these are labeled on the line, I later changed some (mainly changed their favorite Fira Codeof the fonts).

    @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 complete code

//未知的内容
<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/[email protected]/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>

Epilogue

Do not know whether there are people like me do not know markdown comes a named Tocdirectory, when used as long as []the Tocbox up on it, it feels good to see that for a long time ...... So toss me why ah directory / Behind his.

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

So direct comment out this.setContent();, and then would like to add a directory of each essay in the TOC will be able to add qvq