分支:home_page

预览图:

 

【9】添加主页日志列表展示

index.htm

 1 {% extends "base.htm" %}
 2 
 3 {%block header%}
 4     {%include 'header.htm'%}
 5 {%end%} 
 6 
 7 {%block content%}
 8 <script src="{{ static_url('js/knockout/knockout-2.1.0.js') }}"></script> 
 9 <script src="{{ static_url('js/knockout/knockout.mapping-2.4.1.js') }}"></script>
10 <script src="{{ static_url('js/components/jquery.twbsPagination.min.js') }}"></script>
11 <script src="{{ static_url('js/index.js') }}"></script>
12 
13 <div class="bs-docs-container">
14     <div class="container">
15         <div class="row">
16             <div class="col-md-9 blog-main">
17                 <div style="min-height: 650px">
18                     <!-- ko foreach: $data -->
19                     <div class="blog-post">
20                         <button style="margin-left: -15px;font-size: 30px" class="btn btn-link" id="blogTitleBtn" data-bind="text: blog_title, click:function(name){show_blog(name)}"></span></button>
21 
22                         <p style="font-size: 20px" data-bind="text: blog_summary"></p>
23 
24                         <p class="blog-post-meta" data-bind="text: show_author_info(user_name, created_at)" style="font-size: 15px;"></p>
25 
26                         <hr>
27                     </div>
28                     <!-- /ko -->
29                 </div>
30 
31                 <div id="pagination_box" class="pull-right">  
32                    <ul id="pagination_zc" class="pagination-sm"></ul>
33                 </div>
34             </div>
35 
36             <div class="col-md-3">
37                 <div class="blog-header">
38                     <h1 class="blog-title">Jakey's Blog</h1>
39                     <p class="lead blog-description">Test</p>
40                 </div>   
41                 <hr>
42                 <div class="list-group">
43                     <a href="#" class="list-group-item active">列 表 A</a>
44                     <a href="#" class="list-group-item">子列表1</a>
45                     <a href="#" class="list-group-item">子列表2</a>
46                     <a href="#" class="list-group-item">子列表3</a>
47                     <a href="#" class="list-group-item">子列表4</a>
48                 </div>   
49                 <hr>
50                 <div class="list-group">
51                     <a href="#" class="list-group-item active">列 表 B</a>
52                     <a href="#" class="list-group-item">子列表1</a>
53                     <a href="#" class="list-group-item">子列表2</a>
54                     <a href="#" class="list-group-item">子列表3</a>
55                     <a href="#" class="list-group-item">子列表4</a>
56                     <a href="#" class="list-group-item">子列表5</a>
57                     <a href="#" class="list-group-item">子列表6</a>
58                     <a href="#" class="list-group-item">子列表7</a>
59                     <a href="#" class="list-group-item">子列表8</a>
60                 </div>
61             </div>
62         </div>
63     </div>
64 </div>
65 {%end%} 
66 
67 {%block footer%}
68     {%include 'footer.htm'%}
69 {%end%} 
View Code

相关文章:

  • 2022-12-23
  • 2021-11-23
  • 2022-01-29
  • 2021-10-01
  • 2021-11-28
  • 2022-01-23
  • 2021-04-18
  • 2021-05-29
猜你喜欢
  • 2022-12-23
  • 2022-02-21
  • 2021-10-16
  • 2022-12-23
  • 2021-12-18
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案