master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_layout_blog_post.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;
}
/* 留言 */
.lyear-blog-comment-title {
    padding-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}
.lyear-blog-comment-list {
    margin-top: 50px;
}
.lyear-blog-comment-list img {
    width: 60px;
}
.lyear-blog-comment-list .lyear-blog-comment-body {
    -ms-flex: 1;
    flex: 1;
}
.lyear-blog-comment-list .lyear-blog-comment-body a.reply-btn {
    float: right;
    text-transform: uppercase;
    font-size: 12px;
}
.lyear-blog-comment-list .lyear-user-name {
    font-size: 14px;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: .25rem;
    line-height: 1.7;
}
.lyear-blog-comment-list .lyear-blog-comment-body p.post-date {
    margin-bottom: 20px;
    font-size: 12px;
}
.lyear-blog-comment-children {
    list-style: none;
}
.lyear-blog-comment-list .lyear-blog-comment-respond {
    padding-left: 40px;
}
.lyear-blog-cancel-comment-reply {
    display: none;
    cursor: pointer;
    padding-left: 10px;
    font-weight: normal;
}
</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">
  <section class="mt-5 pb-5">
    <div class="container">

      <div class="row">
        <!-- 文章阅读 -->
        <div class="col-xl-8">
          <article class="lyear-arc p-4">
            <h2 class="lyear-arc-title mb-3 fs-4"><a href="post.html">蔚来汽车宣布将在今日20点召开第二季度财报业绩电话会</a></h2>
            <ul class="lyear-arc-meta">
              <li><i class="mdi mdi-calendar"></i> 2019-09-25 09:21</li>
              <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">AI</a>, <a href="#">芯片</a></li>
              <li><i class="mdi mdi-comment-multiple-outline"></i> <a href="#">3 评论</a></li>
            </ul>

            <div class="lyear-arc-preview my-3">
              <img src="images/gallery/10.jpg" alt="" class="img-fluid rounded">
            </div>

            <div class="lyear-arc-detail" deep="6">
              <p>去年 9 月在杭州云栖大会上，阿里巴巴正式宣布成立芯片公司“平头哥半导体有限公司”，它由阿里去年 4 月收购的国产芯片企业中天微与阿里旗下达摩院芯片团队整合而成，“平头哥”自此横空出世。</p>

			  <h3>生活有度，人生添寿。</h3>
			  <p>今年 7 月，<a href="#" target="_blank">平头哥正式发布玄铁 910</a>，据称这是目前业界最强的 RISC-V 处理器。</p>
              <p>时隔两个月，今天在杭州举办的云栖大会上，“平头哥”推出了高性能 AI 推理芯片含光 800。含光 800 是阿里成立平头哥芯片公司后第一款正式流片的芯片。这是阿里里巴巴第一次使用了自己的一套硬件架构，也是互联网公司研发的第一款大芯片。</p>
<pre><code>function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class=&quot;${cls}&quot;`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log(&#39;undefined&#39;);
  }
}

export  $initHighlight;
</code></pre>
			  <h3>排版</h3>
              <p>达摩院院长张建锋宣布了这则消息，并表示：“在全球芯片领域，阿里巴巴是一个新人，玄铁和含光 800 是平头哥的万里长征第一步，我们还有很长的路要走。”</p>
              <p>据了解，在业界标准的 ResNet-50 测试中，含光 800 推理性能达到 78563 IPS，比目前业界最好的 AI 芯片性能高 4 倍；能效比 500 IPS/W，是第二名的 3.3 倍。在杭州城市大脑的业务测试中，1 颗含光 800 的算力相当于 10 颗 GPU。</p>
              <p>含光 800 性能的突破得益于软硬件的协同创新：硬件层面采用自研芯片架构，通过推理加速等技术有效解决芯片性能瓶颈问题；软件层面集成了达摩院先进算法，针对 CNN 及视觉类算法深度优化计算、存储密度，可实现大网络模型在一颗 NPU 上完成计算。</p>

			  <h5>列表:</h5>
			  <ul>
			    <li>Lorem ipsum dolor sit amet consectetuer.</li>
			    <li>Aenean commodo ligula eget dolor.</li>
			    <li>Aenean massa cum sociis natoque penatibus.</li>
			  </ul>
			  <ol>
			    <li>Lorem ipsum dolor sit amet consectetuer.</li>
			    <li>Aenean commodo ligula eget dolor.</li>
			    <li>Aenean massa cum sociis natoque penatibus.</li>
			  </ol>
			  <h5>引用示例:</h5>
			  <blockquote class="blockquote">
			  	<p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。</p>
			  	<footer class="blockquote-footer">别林斯基</footer>
			  </blockquote>

			  <h5>表格示例:</h5>
			  <table class="table table-striped">
			    <thead>
			      <tr>
			        <th scope="col">#</th>
			        <th scope="col">First</th>
			        <th scope="col">Last</th>
			        <th scope="col">Handle</th>
			      </tr>
			    </thead>
			    <tbody>
			      <tr>
			        <th scope="row">1</th>
			        <td>Mark</td>
			        <td>Otto</td>
			        <td>@mdo</td>
			      </tr>
			      <tr>
			      	<th scope="row">2</th>
			      	<td>Jacob</td>
			      	<td>Thornton</td>
			      	<td>@fat</td>
			      </tr>
			      <tr>
			      	<th scope="row">3</th>
			      	<td>Larry</td>
			      	<td>the Bird</td>
			      	<td>@twitter</td>
			      </tr>
			    </tbody>
			  </table>

              <div class="mt-5">
                <h6>标签:</h6>
                <div class="lyear-tag-cloud">
                  <a href="#" class="badge bg-primary">logo</a>
                  <a href="#" class="badge bg-primary">AI</a>
                  <a href="#" class="badge bg-primary">芯片</a>
                </div>
              </div>

              <div class="mt-5 lyear-blog-comment-title">
                <h5 class="mb-4"><span>评论 (5)</span></h5>
              </div>

              <ul class="list-unstyled lyear-blog-comment-list">

                <li id="lyear-blog-comment-1">
				  <div class="d-flex align-items-start mt-5">
                    <img class="d-flex me-3 rounded-circle" src="images/users/avatar-1.png" alt="花满楼">
                    <div class="lyear-blog-comment-body">
                      <a href="#!" class="reply-btn" data-id="1"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                      <h4 class="lyear-user-name"><a href="#!">花满楼</a></h4>
                      <p class="text-muted post-date">2019-09-25 16:17</p>
                      <p>只要你肯去领略，就会发现人生本是多么可爱，每个季节里都有很多足以让你忘记所有烦恼的赏心乐趣。</p>
                    </div>
				  </div>
                </li>

                <li id="lyear-blog-comment-2">
				  <div class="d-flex align-items-start mt-5">
                    <img class="d-flex me-3 rounded-circle" src="images/users/avatar-2.png" alt="陆小凤">
                    <div class="lyear-blog-comment-body">
                      <a href="#!" class="reply-btn" data-id="2"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                      <h4 class="lyear-user-name"><a href="#!">陆小凤</a></h4>
                      <p class="text-muted post-date">2019-07-06 15:32</p>
                      <p>有的人求名，有的人求利，我求的是什么呢？</p>
                    </div>
				  </div>
				  <ul class="lyear-blog-comment-children">
				    <li id="comment-3">
                      <div class="d-flex align-items-start mt-5">
                        <img class="d-flex me-3 rounded-circle" src="images/users/avatar-3.png" alt="西门吹雪">
                        <div class="lyear-blog-comment-body">
                          <a href="#!" class="reply-btn" data-id="3"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                          <h4 class="lyear-user-name"><a href="#!">西门吹雪</a></h4>
                          <p class="text-muted post-date">2019-07-06 15:36</p>
                          <p>麻烦！</p>
                        </div>
                      </div>
					</li>
				  </ul>
                </li>

                <li id="lyear-blog-comment-4">
				  <div class="d-flex align-items-start mt-5">
                    <img class="d-flex me-3 rounded-circle" src="images/users/avatar-4.png" alt="楚留香">
                    <div class="lyear-blog-comment-body">
                      <a href="#!" class="reply-btn" data-id="4"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                      <h4 class="lyear-user-name"><a href="#!">楚留香</a></h4>
                      <p class="text-muted post-date">2019-06-27 10:02</p>
                      <p>闻君有白玉美人，妙手雕成，极尽妍态, 不胜心向往之。今夜子正,当踏月来取, 君素雅达，必不致令我徒劳往返也。</p>
                    </div>
				  </div>
                </li>

                <li id="lyear-blog-comment-5">
				  <div class="d-flex align-items-start mt-5">
                    <img class="d-flex me-3 rounded-circle" src="images/users/avatar-5.png" alt="傅红雪">
                    <div class="lyear-blog-comment-body">
                      <a href="#!" class="reply-btn" data-id="5"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                      <h4 class="lyear-user-name"><a href="#!">傅红雪</a></h4>
                      <p class="text-muted post-date">2019-06-26 11:45</p>
                      <p>一把刀，一条没有退路的征途；一个人，一个孤独而又寂寞的灵魂！</p>
                    </div>
                  </div>
                </li>
              </ul>

              <div id="lyear-blog-respond" class="lyear-blog-comment-respond">
                <div class="mt-2">
                  <h5><span>说点什么吧...</span> <small class="lyear-blog-cancel-comment-reply" onclick="cancelReply()" data-filtered="filtered">(取消回复)</small></h5>
                </div>

                <form action="#" method="post" class="mt-4 lyear-blog-comment-form">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="mb-3">
                      <input id="author" class="form-control" placeholder="昵称*" name="author" type="text" required="">
                    </div>
                  </div>

                  <div class="col-sm-6">
                    <div class="mb-3">
                      <input id="email" class="form-control" placeholder="邮箱*" name="email" type="text" required="">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                    <div class="mb-3">
                      <input id="subject" class="form-control" placeholder="网址" name="subject" type="text">
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-12">
                    <div class="mb-3">
                      <textarea id="comment" class="form-control" rows="5" placeholder="想说的内容" name="comment" required=""></textarea>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-12">
                    <div class="mb-3">
                      <button name="submit" type="submit" id="submit" class="btn btn-primary">发表评论</button>
                      <input type="hidden" name="comment_arc_id" value="1" id="comment_arc_id" data-filtered="filtered">
                      <input type="hidden" name="comment_parent" id="comment_parent" value="0" data-filtered="filtered">
                    </div>
                  </div>
                </div>
              </form>
              </div>

            </div>

          </article>
        </div>
        <!-- 内容 end -->

        <!-- 侧边栏 -->
        <div class="col-xl-4">
          <div class="lyear-blog-sidebar">
            <!-- 热门文章 -->
            <aside class="lyear-widget lyear-widget-hot-posts">
              <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">
              <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>
        <!-- 侧边栏 end -->
      </div>

    </div>
    <!-- end container -->
  </section>
</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>
;(function($){
    // 评论留言
    $('.reply-btn').on('click', function(){
        var parentLi    = $(this).parents('li').first(),
            parentID    = $(this).data('id'),
            respond     = $('#lyear-blog-respond'),
            respondHtml = respond.prop("outerHTML");

        $("#lyear-blog-respond").remove();
        parentLi.after(respondHtml);
        $("#comment_parent").val(parentID);
        $('.lyear-blog-cancel-comment-reply').show();
    });
})(jQuery);

function cancelReply() {
    var respond     = $('#lyear-blog-respond'),
        respondHtml = respond.prop("outerHTML");

    respond.remove();
    $('.lyear-blog-comment-list').after(respondHtml);
    $("#comment_parent").val('0');
    $('.lyear-blog-cancel-comment-reply').hide();
}
</script>
</body>
</html>