Spring实训个人博客二详情页

1.在index导航栏中添加归档:

2.创建详情页文件blog.html:

3.添加文章头部:

<div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">Blog</h2><a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon "></i>&nbsp;首页</a><a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i> &nbsp;分类</a><a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i> &nbsp;标签</a><a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i> &nbsp;归档</a><a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i> &nbsp;关于我</a><div class="m-item right item m-mobile-hide"><div class="ui icon input"><input type="text" placeholder="搜索..."><i class="search link icon"></i></div></div></div></div>

运行效果:

4.添加文章中部内容:

  <h2 class="ui center aligned header">JSP九大内置对象</h2><div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large"><h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2><ol id="table"><li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li><li><a href="#section2">排版实例</a><ul><li><a href="#section2-1">例1：论语学而篇第一</a></li><li><a href="#section2-2">例2：英文排版</a></li></ul></li><li><a href="#section3">附录</a><ul><li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li><li><a href="#appendix2">开源许可</a></li></ul></li></ol><h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2><p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p><h4>现状和如何去做：</h4><p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1">#附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i>要做的就是解决中文排版的问题。</p><p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p><table class="ui table" summary="Typo.css 的测试平台列表"><thead><tr><th>OS/浏览器</th><th>Firefox</th><th>Chrome</th><th>Safari</th><th>Opera</th><th>IE9</th><th>IE8</th><th>IE7</th><th>IE6</th></tr></thead><tbody><tr><td>OS X</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>-</td><td>-</td><td>-</td><td>-</td></tr><tr><td>Win 7</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>-</td></tr><tr><td>Win XP</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>-</td><td>✔</td><td>✔</td><td>✔</td></tr><tr><td>Ubuntu</td><td>✔</td><td>✔</td><td>-</td><td>✔</td><td>-</td><td>-</td><td>-</td><td>-</td></tr></tbody></table><h4>中文排版的重点和难点</h4><p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<emclass="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i>也根据实际情况提供相应的方案。我们重要要注意的两点是：</p><ol><li>语义：语义对应的用法和样式是否与中文排版一致</li><li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li></ol><p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p><blockquote><b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></blockquote><p>目前已有像百姓网等全面使用 <i class="serif">Typo.css</i> 的项目，测试平台的覆盖，特别是在<abbrtitle="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 <iclass="serif">Typo.css</i>的开发。加入方法：<a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i>开发</a>。如有批评、建议和意见，也随时欢迎给在 Github 直接提 <ahref="https://github.com/sofish/Typo.css/issues">issues</a>，或给<abbrtitle="Sofish Lin, author of Typo.css" role="author">我</abbr>发<ahref="mailto:sofish@icloud.com">邮件</a>。</p><h2 id="section2">二、排版实例：</h2><p>提供2个排版实例，第一个中文实例来自于来自于<citeclass="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p><h3 id="section2-1">例1：论语学而篇第一</h3><p><small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（<time>前551年9月28日－前479年4月11日</time>）</small></p><h4>本篇引语</h4><p>《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。</p><h4>原文</h4><p>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p><h4>译文</h4><p>孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 </p><h4>评析</h4><p>宋代著名学者<uclass="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbrtitle="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。</p><p>此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p><p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p><h3 id="section2-2">例2：英文排版</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has beenthe industry'sstandard dummy text ever since the 1500s, when an unknown printer took a galley of type andscrambled it to make atype specimen book. It has survived not only five centuries, but also the leap into electronictypesetting, remainingessentially unchanged. It was popularised in the 1960s with the release of Letraset sheetscontaining Lorem Ipsumpassages, and more recently with desktop publishing software like Aldus PageMaker includingversions of LoremIpsum.</p><blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.</blockquote><h4>The standard Lorem Ipsum passage, used since the 1500s</h4><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4><p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremquelaudantium, totam rem aperiam,eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta suntexplicabo. Nemo enim ipsamvoluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni doloreseos qui rationevoluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,consectetur, adipiscivelit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquamquaerat voluptatem. Ut enimad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi utaliquid ex ea commodiconsequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihilmolestiae consequatur,vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p><h4>List style in action</h4><ul><li>If you wish to succeed, you should use persistence as your good friend, experience as yourreference, prudence asyour brother and hope as your sentry.<p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p></li><li>Sometimes one pays most for the things one gets for nothing.<p>有时候一个人为不花钱得到的东西付出的代价最高。</p></li><li>Only those who have the patience to do simple things perfectly ever acquire the skill to dodifficult thingseasily.<p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p></li></ul><h4>You may want to create a perfect <code>&lt;hr /&gt;</code> line, despite the fact that therewill never have one</h4><hr /><p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:<mark>"Few things are impossible in themselves; and it is often for want of will, rather than ofmeans, that man failsto succeed".</mark>You just need to follow the browser's behavior, and set a right <code>margin</code> to it。itwill works nice as thedemo you're watching now. The following code is the best way to render typo in Chinese:</p><pre><code class="language-css">
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
h1,h2,h3,h4,h5,h6 {
line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}/* 现代排版：保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
margin:1em 0 0.6em;
}</code></pre>

5.为详情页添加赞赏功能,并在里面添加二维码:

6.博客版权信息:

7.留言区域:

8.css文件代码示例:

body{background: url("./static/images/bg.jpg");
}
/*----padding----*/
.m-padded-mini{padding: 0.2em !important;
}
.m-padded-tiny{padding: 0.3em !important;
}
.m-padded-tb-mini {padding-top: 0.2em !important;padding-bottom: 0.2em !important;
}.m-padded {padding: 1em !important;
}.m-padded-small{padding-top: 0.5em !important;padding-bottom: 0.5em !important;
}.m-padded-tb-small {padding-top: 0.5em !important;padding-bottom: 0.5em !important;
}.m-padded-tb{padding-top: 1em !important;padding-bottom: 1em !important;
}.m-padded-tb-tiny{padding-top: 0.2em !important;padding-bottom: 0.2em !important;
}.m-padded-tb-large{padding-top: 2em !important;padding-bottom: 2em !important;
}
.m-padded-tb-big{padding-top: 3em !important;padding-bottom: 3em !important;
}
.m-padded-tb-huge{padding-top: 4em !important;padding-bottom: 4em !important;
}
.m-padded-tb-massive{padding-top: 5em !important;padding-bottom: 5em !important;
}.m-padded-lr-responsive{padding-left: 4em !important;padding-right: 4em !important;
}/*--text--*/.m-text{font-weight: 300 !important;letter-spacing: 1px !important;line-height: 1.8 !important;font-family: "宋体";
}
.m-text-thin{font-weight: 300 !important;
}
.m-text-spaced{letter-spacing: 1px !important;
}.m-text-lined{line-height: 1.8 !important;
}.m-black{color: #333;
}/* 字体透明度 */
.m-opacity-mini{opacity: 0.8 !important;
}
.m-opacity-tiny{opacity: 0.6 !important;
}
/*导航栏阴影 */
.m-shadow-small{-webkit-box-shadow:0 4px 8px rgba(0, 0, 0, 0.2) !important;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}/*display */
.m-inline-block{display: inline-block !important;
}
.m-container{max-width: 72em !important;margin: auto !important;
}
.m-container-small{max-width: 60em !important;margin: auto !important;
}/*--margin--*/
.m-margin-top-small{margin-top: 0.5em !important;
}
.m-margin-top{margin-top: 1em !important;
}
.m-margin-top-large{margin-top: 2em !important;
}.m-margin-tb-tiny{margin-top: 0.3em !important;margin-bottom: 0.3em !important;
}.m-margin-bottom-small {margin-bottom: 0.5em !important;}/*---opacity---*/
.m-opacity-mini{opacity: 0.8 !important;
}/*---position---*/
.m-right-top{position: absolute;top: 0;right: 0;
}.m-fixed{position: fixed; !important;z-index: 10 !important;}
.m-right-bottom{bottom: 0 !important;right: 0 !important;
}.m-mobile-show{display: none !important;
}/*---container---*/
.m-container{max-width: 72em !important;margin: auto !important;
}
.m-container{max-width: 72em !important;margin: auto !important;
}
.m-container-small{max-width: 60em !important;margin: auto !important;
}/*--color--*/
.m-black{color: #333 !important;
}@media screen and (max-width:800px){.m-mobile-hide{display: none !important;}.m-mobile-show{display: block !important;}.m-padded-lr-responsive{padding-left: 0 !important;padding-right: 0 !important;}.m-mobile-lr-clear{padding-left: 0 !important;padding-right: 0 !important;}.m-mobile-wide{width: 100% !important;}}

9.效果展示:

Spring实训个人博客二详情页相关推荐

Django 博客开发教程 8 - 博客文章详情页
首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...
HelloDjango 第 08 篇：开发博客文章详情页
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...
Django博客--4.开发博客文章详情页
文章目录 0.思路引导 1.设计文章详情页的 URL 2.获取文章的URL 3.编写 detail 视图函数 4.编写详情页模板 5.更改主页中跳转详情页的地址链接 6.模板继承--抽取base.ht ...
自然语言交流系统 phxnet团队创新实训个人博客（二）
因为项目用的到条件编译,遂专门记载: 众所周知在C和CPP中可以通过预处理语句来实现条件编译,但是在java中没有预处理语句,我们该如何实现条件编译呢? 这是一个简单的demo Java代码 pu ...
自然语言交流系统 phxnet团队创新实训项目博客（十三）
对我们项目中的关键技术实现进行总结: 一.3DMax关键技术实现 1.一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. 2. 骨骼架设:首先对导入到3DM ...
自然语言交流系统 phxnet团队创新实训个人博客（五）
有关我们这个项目:智能自然语言交流系统,所借鉴的技术有: 第一:我们使用了科大讯飞的在线语音转换,涉及的有文本传给云端服务器的文字转换成语音和本地的语音上传给服务器转换成文字. 涉及的相关的代码有: ...
自然语言交流系统 phxnet团队创新实训项目博客（五）
3DMax方面所涉及的专业知识: (1)一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. (2)骨骼架设:首先 ...
博客系统详情页实现上一篇、下一篇
其实很简单,只要获取当前文章id,通过order by,limit就可以实现,话不多说,上代码!! sql: 下一篇(id>5): select id,title where id> ...
Spring boot 搭建个人博客系统（二）——登录注册功能
Spring boot 搭建个人博客系统(二)--登录注册功能一直想用Spring boot 搭建一个属于自己的博客系统,刚好前段时间学习了叶神的牛客项目课受益匪浅,乘热打铁也主要是学习,好让自己熟 ...

Spring实训个人博客二详情页

Spring实训个人博客二详情页相关推荐

最新文章

热门文章

Spring实训 个人博客二 详情页

Spring实训 个人博客二 详情页相关推荐

最新文章

热门文章

Spring实训个人博客二详情页

Spring实训个人博客二详情页相关推荐