master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_layout_blog.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<meta name="author" content="yinq">
<title>首页 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
.lyear-blog-wrapper {
    font-size: 14px;
}
.lyear-blog-wrapper a {
    text-decoration: none;
}
.lyear-blog-wrapper a:not(.lyear-tag-cloud a),
.lyear-blog-footer a{
    color: #4d5259;
    -webkit-transition: color 0.5s, background-color 0.5s;
    -o-transition: color 0.5s, background-color 0.5s;
    transition: color 0.5s, background-color 0.5s;
}
.lyear-blog-wrapper a:hover,
.lyear-blog-footer a:hover {
    color: var(--bs-primary);
}
.lyear-arc-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: .7;
}
.lyear-arc-meta > li {
    display: inline-block;
    margin-right: 30px;
}
.lyear-arc-title {
    font-weight: 500;
    line-height: 1.7;
}
.lyear-arc-synopsis {
    font-size: 14px;
    line-height: 1.7;
}
.lyear-arc {
    background-color: #fff;
    border: 1px solid #f0f0f0;
}
.lyear-arc-synopsis p:last-child {
    margin-bottom: 0px;
}
/* 侧边栏 */
.lyear-widget-title {
    font-size: 16px;
    color: #4d5259;
    position: relative;
    margin: 0 0 25px;
    font-weight: 700;
    text-transform: uppercase;
}
.lyear-widget-title:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #eee;
}
.lyear-widget-title:after {
    content: "";
    display: block;
    width: 35px;
    z-index: 1;
    position: relative;
    margin: 15px auto 25px 0px;
    border-bottom: 1px solid #007bff;
}
.lyear-widget ul,
.lyear-widget ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lyear-widget ul li,
.lyear-widget ol li {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.lyear-widget ul li:last-child,
.lyear-widget ol li:last-child {
    border: 0;
}
.lyear-widget-hot-posts ul li {
    border-bottom: 1px solid rgba(238, 238, 238, .7);
    margin-bottom: 15px;
    padding-bottom: 15px;
}
.lyear-widget-hot-posts ul li span {
    display: block;
    margin-top: 5px;
    opacity: .7;
}
.lyear-tag-cloud a {
    line-height: 1.5;
}
.lyear-tag-cloud a:hover {
    color: #fff;
}
/* 底部 */
.lyear-blog-footer {
    color: #4d5259;
    padding: 2.5rem 0;
    text-align: center;
    background-color: #fcfcfc;
    border-top: .05rem solid #f0f0f0;
}
.lyear-blog-footer p:last-child {
    margin-bottom: 0;
}
</style>
</head>

<body>
<!--导航 开始-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="images/logo-sidebar.png" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><i class="mdi mdi-home-variant-outline"></i> 网站选项</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="mdi mdi-file-outline"></i> 文章专栏</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="mdi mdi-send-outline mdi-rotate-315"></i> 资源分享</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="mdi mdi-timer-sand"></i> 点点滴滴</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="mdi mdi-alpha-i-circle-outline"></i> 关于本站</a>
        </li>
      </ul>
      <div class="d-flex">
        <a href="#"><i class="mdi mdi-qqchat mdi-24px"></i></a>
      </div>
    </div>
  </div>
</nav>
<!--导航 结束-->

<div class="lyear-blog-wrapper mt-3">
  <div class="container">
    <!--焦点图 开始-->
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="images/gallery/1.jpg" class="d-block w-100" alt="..." style="height: 400px">
        </div>
        <div class="carousel-item">
          <img src="images/gallery/2.jpg" class="d-block w-100" alt="..." style="height: 400px">
        </div>
        <div class="carousel-item">
          <img src="images/gallery/3.jpg" class="d-block w-100" alt="..." style="height: 400px">
        </div>
      </div>
      <!--这里因为图片宽度在100%时，高度太高了，这个固定图片高度，实际使用中可以根据自己图片高度无需写style-->
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <!--焦点图 结束-->

    <div class="pt-3">
      <div class="row">
        <!--文章列表 开始-->
        <div class="col-xl-8">

          <article class="lyear-arc p-3 mb-4">
            <div class="row">
              <div class="col-md-4 lyear-arc-images"><img src="images/gallery/1.jpg" class="w-100 rounded" /></div>
              <div class="col-md-8 lyear-arc-content">
                <h2 class="lyear-arc-title mb-3 fs-4"><a href="post.html">蔚来汽车宣布将在今日20点召开第二季度财报业绩电话会</a></h2>
                <div class="lyear-arc-synopsis">
                  <p>今日，蔚来宣布将在北京时间周三20: 00召开第二季度财报业绩电话会议。昨日，蔚来汽车公布了截至 2019 年 6 月 30 日未经审计的第二季度财报。财报财报显示，蔚来 2019 第二季度获得总营收15. 086 亿元，环比下降7.5%同比增长3180.1%;净亏损32. 858 亿元，环比增长25.2%，同比增长83.1%。</p>
                </div>
              </div>
            </div>

            <ul class="lyear-arc-meta mt-3">
              <li><i class="mdi mdi-calendar"></i> 2019-09-25 09:21</li>
              <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">蔚来汽车</a>, <a href="#">财报</a></li>
              <li><i class="mdi mdi-comment-multiple-outline"></i> <a href="#">3 评论</a></li>
            </ul>
          </article>

          <article class="lyear-arc p-3 mb-4">
            <div class="row">
              <div class="col-md-4 lyear-arc-images"><img src="images/gallery/2.jpg" class="w-100 rounded" /></div>
              <div class="col-md-8 lyear-arc-content">
                <h2 class="lyear-arc-title mb-3 fs-4"><a href="post.html">苹果 CEO 库克：Apple 已完全使用可再生能源供电</a></h2>
                <div class="lyear-arc-synopsis">
                  <p>苹果 CEO 库克在微博上表示，「我们很自豪 Apple 已完全使用可再生能源供电，并携手我们的供应商共同朝这个方向努力。明年我们将有超过 6000 兆瓦的新可再生能源并网，包括位于湖南和湖北的三座新风电场。」</p>
                </div>
              </div>
            </div>

            <ul class="lyear-arc-meta mt-3">
              <li><i class="mdi mdi-calendar"></i> 2019-09-25 09:20</li>
              <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">苹果</a>, <a href="#">Apple</a></li>
              <li><i class="mdi mdi-comment-multiple-outline"></i> <a href="#">37 评论</a></li>
            </ul>
          </article>

          <article class="lyear-arc p-3 mb-4">
            <div class="row">
              <div class="col-md-12 lyear-arc-content">
                <h2 class="lyear-arc-title mb-3 fs-4"><a href="post.html">韭菜扎心！比特币一度跌破8000美元  24小时跌幅10.6%</a></h2>
                <div class="lyear-arc-synopsis">
                  <p>本周二，比特币迎来了一轮暴跌，根据行情显示，比特币今日凌晨曾一度跌破 8000 美元，现报约8723美元，恐怕这让一大波韭菜们相当扎心。 </p>
                </div>
              </div>
            </div>

            <ul class="lyear-arc-meta mt-3">
              <li><i class="mdi mdi-calendar"></i> 2019-09-25 09:19</li>
              <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">比特币</a>, <a href="#">韭菜</a></li>
              <li><i class="mdi mdi-comment-multiple-outline"></i> <a href="#">90 评论</a></li>
            </ul>
          </article>

          <article class="lyear-arc p-3 mb-4">
            <div class="row">
              <div class="col-md-4 lyear-arc-images"><img src="images/gallery/3.jpg" class="w-100 rounded" /></div>
              <div class="col-md-8 lyear-arc-content">
                <h2 class="lyear-arc-title mb-3 fs-4"><a href="post.html">数十万 PhpStudy 用户被植入后门，快来检测你是否已沦为“肉鸡”！</a></h2>
                <div class="lyear-arc-synopsis">
                  <p>北京时间9月20日，杭州公安发布《杭州警方通报打击涉网违法犯罪暨‘净网2019’专项行动战果》一文，文章曝光了国内知名PHP调试环境程序集成包“PhpStudy软件”遭到黑客篡改并植入“后门”。截...</p>
                </div>
              </div>
            </div>

            <ul class="lyear-arc-meta mt-3">
              <li><i class="mdi mdi-calendar"></i> 2019-09-24 09:57</li>
              <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">PhpStudy</a></li>
              <li><i class="mdi mdi-comment-multiple-outline"></i> <a href="#">115 评论</a></li>
            </ul>
          </article>

          <article class="lyear-arc p-3 mb-4">
            <div class="row">
              <div class="col-md-4 lyear-arc-images"><img src="images/gallery/1.jpg" class="w-100 rounded" /></div>
              <div class="col-md-8 lyear-arc-content">
                <h2 class="lyear-arc-title mb-2 fs-5"><a href="post.html">效力微软 15 年的前员工解释 Windows 10 为什么问题如此多</a></h2>
                <div class="lyear-arc-synopsis">
                  <p>众所周知 Windows 10 系统问题频发，整体来说稳定性比较差，然而在此之前的版本其实相对来说稳定性还挺好的。自从 Windows 10 正式版推出之时，该系统就开始频繁出现问题，乃至现在每个月安全...</p>
                </div>
              </div>
            </div>

            <ul class="lyear-arc-meta mt-3">
              <li><i class="mdi mdi-calendar"></i> 2019-09-24 07:52</li>
              <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">windows</a>, <a href="#">win10</a></li>
              <li><i class="mdi mdi-comment-multiple-outline"></i> <a href="#">26 评论</a></li>
            </ul>
          </article>

          <!--分页 开始-->
          <div class="row">
            <div class="col-lg-12">
              <ul class="pagination">
                <li class="page-item"><a class="page-link" href="#"><i class="mdi mdi-chevron-left"></i></a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item"><a class="page-link" href="#">5</a></li>
                <li class="page-item"><a class="page-link" href="#"><i class="mdi mdi-chevron-right"></i></a></li>
              </ul>
            </div>
          </div>
          <!--分页 结束-->

        </div>
        <!--文章列表 结束-->

        <!--侧边栏 开始-->
        <div class="col-xl-4">
          <div class="lyear-blog-sidebar">
            <!-- 热门文章 -->
            <aside class="lyear-widget lyear-widget-hot-posts mb-4">
              <div class="lyear-widget-title">热门文章</div>
              <ul>
                <li>
                  <a href="#">三星将为 Galaxy Fold 用户提供 149 美元更换屏幕服务</a> <span>2019-09-25 10:05</span>
                </li>
                <li>
                  <a href="#">专家：10年后6G将问世 数据传输速率有望比5G快100倍</a> <span>2019-09-25 08:06</span>
                </li>
                <li>
                  <a href="#">苹果正式发布 iPadOS 13.1 系统，加入多项强大新功能</a> <span>2019-09-25 09:35</span>
                </li>
              </ul>
            </aside>

            <!-- 归档 -->
            <aside class="lyear-widget mb-4">
              <div class="lyear-widget-title">归档</div>
              <ul>
                <li><a href="#">2019 三月</a> (40)</li>
                <li><a href="#">2019 四月</a> (08)</li>
                <li><a href="#">2019 五月</a> (11)</li>
                <li><a href="#">2019 六月</a> (21)</li>
              </ul>
            </aside>

            <!-- 标签 -->
            <aside class="lyear-widget lyear-widget-tag-cloud">
              <div class="lyear-widget-title">热门标签</div>
              <div class="lyear-tag-cloud">
                <a href="#" class="badge bg-teal">php</a>
                <a href="#" class="badge bg-primary">苹果</a>
                <a href="#" class="badge bg-danger">比特币</a>
                <a href="#" class="badge bg-secondary">linux</a>
                <a href="#" class="badge bg-pink">前端</a>
                <a href="#" class="badge bg-brown">vue</a>
              </div>
            </aside>
          </div>
        </div>
        <!--侧边栏 结束-->

      </div>
    </div>

  </div>
</div>
<footer class="lyear-blog-footer">
  <p>博客基于 <a href="https://www.getbootstrap.cn/" target="_blank">Bootstrap 5</a> by <a href="http://www.bixiaguangnian.com" target="_blank">笔下光年</a>。</p>
  <p>
    <a href="#">返回顶部</a>
  </p>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script>
</script>
</body>
</html>