JZTXT

主题备份

发布时间 2023-07-06 23:34:28作者: 万般自然

image

image
image
页面定制css


/* 隐藏一些乱七八糟的东西 */
.navbar, 
#top_nav, 
#lnkBlogLogo, 
#cnblogs_ch, 
.ad_text_commentbox, 
#opt_under_post, 
#cnblogs_c1, 
#under_post_card1, 
#cnblogs_c2, 
#under_post_card2,
.postCon, .clear, .dayTitle, #blogTitle h2 {
    display: none;
}

/* 头部 */
.container-fluid {
    align-items: unset !important;
    justify-content: unset !important;
}
.navbar-brand {
    flex: 1;
}
.navbar a:link, .navbar a:active, .navbar a:visited {
    color: #fff;
}
.nav-item a:hover {
    color: orange;
}
.navbar-collapse {
    display: contents !important;
    flex-basis: max-content !important;
}
  .navbar-nav {
    display: flex; /* 使用弹性盒子布局 */
    list-style: none; /* 去除列表样式 */
    padding: 0;
    display: list-item !important;
  }

  .nav-item {
    margin-right: 30px; /* 设置导航项之间的间距 */
    float: left;
  }

/* 首页-文章列表 */
.mb-3 {
    width: 600px;
    height: 200px;
    margin: 0 auto;
}
.mb-3:hover {
    background-color: #f4f4f4;
    box-shadow: 0px 0px 6px 0px;
}
.card-body {
    padding: 10px !important;
}
.g-0,.col-md-8.card-body {
    height: 160px;
}
.card-text{
    font-size: 12px;
}
.mb-3 a{
    text-decoration: none !important;
}
.mb-3 a:hover {
    color: orange;
}
/*  */

页首html

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>

<script type="text/javascript">

</script>

页脚html

<script type="text/javascript" language="javascript">
  const obj = {
    favicon: 'https://img.alicdn.com/imgextra/i1/O1CN01HvRSoA1yfb7WcDsXJ_!!6000000006606-73-tps-32-32.ico'
  }
  // 替换网站icon
  if (obj.favicon) {
    const linkObject = document.createElement('link');
    linkObject.rel = "shortcut icon";
    linkObject.href = obj.favicon;
    document.getElementsByTagName("head")[0].appendChild(linkObject);
  }

  // 导航栏
  function changeNav() {
      const navList = $('#navList li');
//       console.log(navList);
//       console.log(navList[0].children[0].innerText, navList[0].children[0].href);
// console.log(navList[1].children[0].innerText, navList[1].children[0].href);
// console.log(navList[4].children[0].innerText, navList[4].children[0].dataset.rss);
// console.log(navList[5].children[0].innerText, navList[5].children[0].href);
const navListNew = [
    {
        label:navList[0].children[0].innerText,
        link:navList[0].children[0].href,
        active: true
    },
    {
        label:navList[1].children[0].innerText,
        link:navList[1].children[0].href
    },
    {
        label:navList[4].children[0].innerText,
        link:navList[4].children[0].href
    },
    {
        label:navList[5].children[0].innerText,
        link:navList[5].children[0].href
    }
];
let liStrs = [];
  for (const item of navListNew) {
    const { label, link, active } = item;
    liStrs.push(`       
     <li class="nav-item">
        <a class="nav-link" href="${link}">${label}</a>
    </li>`);
    // if (active) {
    // liStrs.push(`       
    //      <li class="nav-item">
    //       <a class="nav-link active" aria-current="page" href="${link}">${label}</a>
    //     </li>`);
    // } else {
    //         liStrs.push(`       
    //            <li class="nav-item">
    //                 <a class="nav-link" href="${link}">${label}</a>
    //            </li>`);
    // }

  }
const str = `
<nav class="navbar bg-dark" data-bs-theme="dark">
    <div class="container-fluid">
    <a class="navbar-brand" href="#">
      逸风小站
    </a>
           <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
       ${liStrs.join('')}
      </ul>
            <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
`;
$('#header')[0].innerHTML = str;
  }
  changeNav();

  // 替换摘要下的作者、时间等
  function replaceAuthAndTime() {
    const postDesc = $('.postDesc');
    if (postDesc && postDesc.length) {
      for (let i = 0; i < postDesc.length; i++) {
        const postDescEle = postDesc[i];
        const firstChildData = postDesc[i].firstChild.data;

        const firstChildDataArr = firstChildData.split('\n');
        const timeStr = firstChildDataArr[0];
        const timeStrNew = timeStr.replace('posted @ ', '');
        let postDescStr = `<span class="create_time">${timeStrNew}</span>&nbsp;&nbsp;&nbsp;&nbsp;`;
        const postDescChildren = postDescEle.children;
        if (postDescChildren && postDescChildren.length) {
          for (let y = 0; y < postDescChildren.length; y++) {
            const postDescChild = postDescChildren[y];
            const postDescChildrenHtml = postDescChild.outerHTML;
            postDescStr += `&nbsp;&nbsp;&nbsp;&nbsp;${postDescChildrenHtml} `;
          }

        }
        postDesc[i].innerHTML = postDescStr;

      }
    }
  }

  // 处理单天合并文章
  function chaiFenWenZhang() {
    const manyArticle = $('.day');
    if (manyArticle && manyArticle.length) {
      let newArticlesStr = '';
      for (let i = 0; i < manyArticle.length; i++) {
        const article = manyArticle[i];
        // console.log(article)
        // console.log(article.outerHTML)
        if (article && article.children && article.children.length >= 12) {
          // console.log(article.children)
          const articleChildren = article.children;
          const str = `
                      <div class="day">
                          ${articleChildren[0].outerHTML}
                          ${articleChildren[1].outerHTML}
                          ${articleChildren[2].outerHTML}
                          <div class="clear"></div>
                          ${articleChildren[4].outerHTML}
                          <div class="clear"></div>
                      </div>
                      <div class="day">
                          ${articleChildren[7].outerHTML}
                          ${articleChildren[8].outerHTML}
                          ${articleChildren[9].outerHTML}
                          <div class="clear"></div>
                          ${articleChildren[10].outerHTML}
                          <div class="clear"></div>
                      </div>
              `

          newArticlesStr += str
        } else {
          newArticlesStr += article.outerHTML
        }
        // console.log(article.children.length)
      }
      // console.log(newArticlesStr)
      // 分页显示
      const forFlow = $('.forFlow')[0].children;
      let pageHtml = '';
      if (forFlow && forFlow.length) {
        pageHtml = forFlow[forFlow.length - 2].outerHTML
      }

      $('#mainContent')[0].innerHTML = `<div class="forFlow"> ${newArticlesStr} </div> ${pageHtml}`;
    }
  }
  function getNewArticleDom (articleLink, articleTitle, articleShort, articleCreatedAt, articleView, articleComment) {
    const randomNum = Math.floor(Math.random() * 1000);
    const articleDomNew = `
      <div class="card mb-3">
          <div class="row g-0">
              <div class="col-md-8">
                  <div class="card-body">
                      <h5 class="card-title"><a href="${articleLink}">${articleTitle}</a></h5>
                      <p class="card-text">${articleShort}</p>
                      <p class="card-text">
                        <small class="text-muted">${articleCreatedAt}</small>
                        <small class="text-muted">${articleView}</small>
                        <small class="text-muted">${articleComment}</small>
                      </p>
                  </div>
              </div>
              <div class="col-md-4">
                  <img src="https://picsum.photos/400/320?random=${randomNum}"class="img-fluid rounded-start" alt="...">
              </div>
          </div>
      </div>
      `;
      return articleDomNew;
  }
  function replaceArticleDom() {
    const manyArticle = $('.day');
    // console.log(manyArticle);
    if (manyArticle && manyArticle.length) {
        let str = '';
      for (let i = 0; i < manyArticle.length; i++) {
        
        const { className, children } = manyArticle[i];
        if (children.length >= 12) {
          console.log(children);
          str += getNewArticleDom (
            children[1].children[0].href,
            children[1].innerText, 
            children[2].innerText.replace('摘要：', '').replace('阅读全文', ''), 
            children[4].children[0].innerText, 
            children[4].children[1].innerText, 
            children[4].children[2].innerText
          );
          str += getNewArticleDom (
            children[7].children[0].href,
            children[7].innerText, 
            children[8].innerText.replace('摘要：', '').replace('阅读全文', ''), 
            children[10].children[0].innerText, 
            children[10].children[1].innerText, 
            children[10].children[2].innerText
          );
        } else {
        let articleTitle = '';
        let articleShort = '';
        let articleCreatedAt = '';
        let articleView = '';
        let articleComment = '';
        let articleLink = '';
        if (className === 'day pinned') {
          // console.log('day pinned');
          articleTitle = children[1].innerText;
          articleLink = children[1].children[0].href;
          articleShort = children[2].innerText.replace('摘要：', '').replace('阅读全文', '');
          articleCreatedAt = children[4].children[0].innerText;
          articleView = children[4].children[1].innerText;
          articleComment = children[4].children[2].innerText;
          // console.log(children[1].innerText);
          // console.log(children[2].innerText);
          // console.log(children[4].children[0].innerText);
          // console.log(children[4].children[1].innerText);
          // console.log(children[4].children[2].innerText);
        //   console.log(children[4].children[3].innerText);
        //   console.log(children[4].children[4].innerText);// 编辑暂时不需要
        }
        if (className === 'day') {
          // console.log('day');
          articleTitle = children[1].innerText;
          articleLink = children[1].children[0].href;
          articleShort = children[2].innerText.replace('摘要：', '').replace('阅读全文', '');
          articleCreatedAt = children[4].children[0].innerText;
          articleView = children[4].children[1].innerText;
          articleComment = children[4].children[2].innerText;
          // console.log(children[1].innerText);
          // console.log(children[2].innerText);
          // console.log(children[4].children[0].innerText);
          // console.log(children[4].children[1].innerText);
          // console.log(children[4].children[2].innerText);
        //   console.log(children[4].children[3].innerText);
        //   console.log(children[4].children[4].innerText);// 编辑暂时不需要
        }

         str += getNewArticleDom (articleLink, articleTitle, articleShort, articleCreatedAt, articleView, articleComment);
        }
        

      }
     $('#mainContent')[0].innerHTML = `<div class="forFlow"> ${str} </div>`;
    //  $('body')[0].innerHTML = `<div class="forFlow"> ${str} </div>`;

    }
  }
  replaceAuthAndTime();

  // chaiFenWenZhang();
  replaceArticleDom();
</script>