mirror of https://github.com/unluckynike/beizhai
页面完善 ✅✨
This commit is contained in:
WuLiZeng
parent
ba5806cb1a
commit
40b942bced
2069
log/blog-pro.log
2069
log/blog-pro.log
File diff suppressed because it is too large
Load Diff
|
|
@ -2,3 +2,7 @@
|
|||
index.email=2230432084@qq.com
|
||||
index.qq=2230432084
|
||||
index.describe=尽情的享用这条生命，让它尽兴，让它乘风而来，兴灭而逝。我愿生命如诗。写诗与否不重要，重要的是将自己的人生变成诗，让自己的人生充满诗意。
|
||||
|
||||
#友情链接
|
||||
friend.name.one=吴李曾
|
||||
friend.url.one=https:www.wulinzeng.vip
|
||||
|
|
|
|||
|
|
@ -61,16 +61,17 @@
|
|||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">友情连接</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="https:www.wulinzeng.vip" class="item m-text-thin">吴李曾</a>
|
||||
<!-- <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
|
||||
<!-- <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
|
||||
<a th:href="#{friend.url.one}" class="item m-text-thin" th:text="#{friend.name.one}"></a>
|
||||
<!-- <a th:href="#{friend.url.two}" class="item m-text-thin" th:href="#{friend.name.two}"></a>-->
|
||||
<!-- <a th:href="#{friend.url.three}" class="item m-text-thin" th:href="#{friend.name.three}"></a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item m-text-thin" th:text="#{index.email}">Email:</a>
|
||||
<a href="#" class="item m-text-thin" th:text="#{index.qq}">QQ:</a>
|
||||
<a href="Mailto:2230432084@qq.com" class="item m-text-thin" th:text="#{index.email}"></a>
|
||||
<a href="http://wpa.qq.com/msgrd?v=3&uin=2230432084&site=qq&menu=yes" class="item m-text-thin"
|
||||
th:text="#{index.qq}"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide column">
|
||||
|
|
@ -98,9 +99,7 @@
|
|||
|
||||
<script id="ribbon" size="150" alpha='0.3' zIndex="-2"
|
||||
src="https://cdn.jsdelivr.net/gh/unluckynike/blogimg/images/js/coloured-ribbon.js"></script>
|
||||
<!-- -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/unluckynike/blogimg/images/js/Snow.js"></script>-->
|
||||
<!-- <!–樱花–>-->
|
||||
<!-- <script type="text/javascript">-->
|
||||
<!-- //只在桌面版网页启用特效-->
|
||||
<!-- var windowWidth = $(window).width();-->
|
||||
|
|
|
|||
|
|
@ -6,23 +6,27 @@
|
|||
<title th:replace="${title}">博客详情</title>
|
||||
<link rel="icon" th:href="@{/images/icon.png}" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
|
||||
<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
|
||||
<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"
|
||||
th:href="@{/lib/editormd/css/editormd.min.css}">
|
||||
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
|
||||
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
|
||||
<div class="ui container">
|
||||
<div class="ui inverted secondary stackable menu">
|
||||
<h2 class="ui teal header item">管理后台</h2>
|
||||
<a href="#" th:href="@{/admin/blogs}" class=" m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="mini home icon"></i>文章</a>
|
||||
<a href="#" th:href="@{/admin/types}" class=" m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="mini idea icon"></i>分类</a>
|
||||
<a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="mini tags icon"></i>标签</a>
|
||||
<a href="#" th:href="@{/}" target="_blank" class="m-item item m-mobile-hide" ><i class="mini tags icon"></i>博客</a>
|
||||
<a href="#" th:href="@{/admin/blogs}" class=" m-item item m-mobile-hide"
|
||||
th:classappend="${n==1} ? 'active'"><i class="mini home icon"></i>文章</a>
|
||||
<a href="#" th:href="@{/admin/types}" class=" m-item item m-mobile-hide"
|
||||
th:classappend="${n==2} ? 'active'"><i class="mini idea icon"></i>分类</a>
|
||||
<a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide"
|
||||
th:classappend="${n==3} ? 'active'"><i class="mini tags icon"></i>标签</a>
|
||||
<a href="#" th:href="@{/}" target="_blank" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>博客</a>
|
||||
<div class="right m-item m-mobile-hide menu">
|
||||
<div class="ui dropdown item">
|
||||
<div class="text">
|
||||
<img class="ui avatar image" th:src="@{${session.user.avatar}}">
|
||||
<img class="ui avatar image" th:src="@{${session.user.avatar}}">
|
||||
<span th:text="${session.user.nickname}">北斋</span>
|
||||
</div>
|
||||
<i class="dropdown icon"></i>
|
||||
|
|
@ -44,28 +48,29 @@
|
|||
<div class="three wide column">
|
||||
<div class="ui inverted link list">
|
||||
<div class="item">
|
||||
<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
|
||||
<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image"
|
||||
alt="" style="width: 110px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">友情链接</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item m-text-thin">用户故事（User Story）</a>
|
||||
<a href="#" class="item m-text-thin">用户故事（User Story）</a>
|
||||
<a href="#" class="item m-text-thin">用户故事（User Story）</a>
|
||||
<a th:href="#{friend.url.one}" class="item m-text-thin" th:text="#{friend.name.one}"></a>
|
||||
<!-- <a th:href="#{friend.url.two}" class="item m-text-thin" th:href="#{friend.name.two}"></a>-->
|
||||
<!-- <a th:href="#{friend.url.three}" class="item m-text-thin" th:href="#{friend.name.three}"></a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item m-text-thin">Email：2230432084@qq.com</a>
|
||||
<a href="#" class="item m-text-thin">QQ：2230432084</a>
|
||||
<a href="Mailto:2230432084@qq.com" class="item m-text-thin" th:text="#{index.email}"></a>
|
||||
<a href="http://wpa.qq.com/msgrd?v=3&uin=2230432084&site=qq&menu=yes" class="item m-text-thin" th:text="#{index.qq}"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
|
||||
<p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
|
||||
<p class="m-text-thin m-text-spaced m-opacity-mini" th:text="#{index.describe}"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui inverted section divider"></div>
|
||||
|
|
|
|||
|
|
@ -52,393 +52,7 @@
|
|||
<div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large"
|
||||
th:utext="${blog.content}">
|
||||
|
||||
<h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>
|
||||
|
||||
<pre><code class="language-css">p { color: red }</code></pre>
|
||||
|
||||
<pre><code class="language-css">p { color: red }</code></pre>
|
||||
|
||||
<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>（例：这里<em
|
||||
class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code><u></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> 的项目，测试平台的覆盖，特别是在<abbr title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到
|
||||
<i class="serif">Typo.css</i>
|
||||
的开发。加入方法：<a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i> 开发</a>。如有批评、建议和意见，也随时欢迎给在
|
||||
Github 直接提 <a
|
||||
href="https://github.com/sofish/Typo.css/issues">issues</a>，或给<abbr
|
||||
title="Sofish Lin, author of Typo.css"
|
||||
role="author">我</abbr>发<a
|
||||
href="mailto:sofish@icloud.com">邮件</a>。</p>
|
||||
|
||||
|
||||
<h2 id="section2">二、排版实例：</h2>
|
||||
|
||||
<p>提供2个排版实例，第一个中文实例来自于来自于<cite class="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>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr
|
||||
title="张燕婴">我</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 been the
|
||||
industry's
|
||||
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
|
||||
scrambled it to make a
|
||||
type specimen book. It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining
|
||||
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
|
||||
containing Lorem Ipsum
|
||||
passages, and more recently with desktop publishing software like Aldus PageMaker including versions
|
||||
of Lorem
|
||||
Ipsum.</p>
|
||||
<blockquote>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo 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 ut labore
|
||||
et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint
|
||||
occaecat 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 doloremque laudantium,
|
||||
totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
|
||||
qui ratione
|
||||
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
|
||||
consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim
|
||||
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
|
||||
ea commodi
|
||||
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
|
||||
molestiae 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 your
|
||||
reference, prudence as
|
||||
your 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 do
|
||||
difficult things
|
||||
easily.
|
||||
<p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>You may want to create a perfect <code><hr /></code> line, despite the fact that there will
|
||||
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 of
|
||||
means, that man fails
|
||||
to succeed".
|
||||
</mark>
|
||||
You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will
|
||||
works nice as the
|
||||
demo 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>
|
||||
|
||||
<h3 id="section3">三、附录</h3>
|
||||
|
||||
<h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>
|
||||
<table class="ui table" summary="Typo.css 排版偏重点">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>类型</th>
|
||||
<th>语义</th>
|
||||
<th>标签</th>
|
||||
<th>注意点</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th rowspan="15">基础标签</th>
|
||||
<td>标题</td>
|
||||
<td><code>h1</code> ～ <code>h6</code></td>
|
||||
<td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>上、下标</td>
|
||||
<td><code>sup</code>/<code>sub</code></td>
|
||||
<td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>引用</td>
|
||||
<td><code>blockquote</code></td>
|
||||
<td>显示/嵌套样式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>缩写</td>
|
||||
<td><code>abbr</code></td>
|
||||
<td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>分割线</td>
|
||||
<td><code>hr</code></td>
|
||||
<td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>列表</td>
|
||||
<td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
|
||||
<td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>定义列表</td>
|
||||
<td><code>dl</code></td>
|
||||
<td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>选项</td>
|
||||
<td><code>input[type=radio[, checkbox]]</code></td>
|
||||
<td>与其他 <code>form</code> 元素排版时是否居中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>斜体</td>
|
||||
<td><code>i</code></td>
|
||||
<td>只设置一种斜体，让 <code>em</code> 和 <code>cite</code> 显示为正体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>强调</td>
|
||||
<td><code>em</code></td>
|
||||
<td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加强</td>
|
||||
<td><code>strong/b</code></td>
|
||||
<td>显示为粗体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>标记</td>
|
||||
<td><code>mark</code></td>
|
||||
<td>类似荧光笔</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>印刷</td>
|
||||
<td><code>small</code></td>
|
||||
<td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>表格</td>
|
||||
<td><code>table</code></td>
|
||||
<td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>代码</td>
|
||||
<td><code>pre</code>/<code>code</code></td>
|
||||
<td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="5">特殊符号</th>
|
||||
<td>着重号</td>
|
||||
<td><em class="typo-em">在文字下加点</em></td>
|
||||
<td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专名号</td>
|
||||
<td><u>林建锋</u></td>
|
||||
<td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>破折号</td>
|
||||
<td>——</td>
|
||||
<td>保持一划，而非两划</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>人民币</td>
|
||||
<td>¥</td>
|
||||
<td>使用两平等线的符号，或者 HTML 实体符号 <code>&yen;</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>删除符</td>
|
||||
<td>
|
||||
<del>已删除（deleted）</del>
|
||||
</td>
|
||||
<td>一致化各浏览器显示，中英混排正确</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="3">加强类</th>
|
||||
<td>专名号</td>
|
||||
<td><code>.typo-u</code></td>
|
||||
<td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code>.typo-u</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>着重符</td>
|
||||
<td><code>.typo-em</code></td>
|
||||
<td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>清除浮动</td>
|
||||
<td><code>.clearfix</code></td>
|
||||
<td>与一般 CSS Reset 保持一对致 API</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="5">注意点</th>
|
||||
<td colspan="3">（1）中英文混排行高/行距</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">（2）上下标在 IE 中显示效果</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">（4）input 多余空间问题</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h5 id="appendix2">2、开源许可</h5>
|
||||
</div>
|
||||
|
||||
<!--标签-->
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
|
||||
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--导航-->
|
||||
|
|
@ -100,22 +101,33 @@
|
|||
<div class="five wide column">
|
||||
|
||||
<!--介绍-->
|
||||
<div class="ui card">
|
||||
<div class="image">
|
||||
<img th:src="@{/images/avatar.jpg}">
|
||||
</div>
|
||||
<div class="content">
|
||||
<a class="header">北斋</a>
|
||||
<div class="meta">
|
||||
<span class="date"></span>
|
||||
<div class="ui segment">
|
||||
<div class="ui card ">
|
||||
<div class="image">
|
||||
<img th:src="@{/images/avatar.jpg}">
|
||||
</div>
|
||||
<div class="description">
|
||||
<p id="poem">loading...</p>
|
||||
<p id="info">loading...</p>
|
||||
<div class="content">
|
||||
<a class="header">北斋</a>
|
||||
<div class="meta">
|
||||
<span class="date"></span>
|
||||
</div>
|
||||
<!--一言-->
|
||||
<div class="description">
|
||||
<p id="poem">Hitokoto.....</p>
|
||||
<p id="info">Hitokoto....</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<a><i class="user icon"></i>关于站长</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<a><i class="user icon"></i>关于站长</a>
|
||||
</div>
|
||||
|
||||
<!--网易云-->
|
||||
<div class="ui segment">
|
||||
<div>
|
||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86
|
||||
src="//music.163.com/outchain/player?type=2&id=31134607&auto=1&height=66"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,7 +139,9 @@
|
|||
<i class="idea icon"></i>分类
|
||||
</div>
|
||||
<div class="right aligned column">
|
||||
<a href="#" target="_blank">more <i class="angle double right icon"></i></a>
|
||||
<a href="#" target="_blank">
|
||||
<i class="angle double right icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,12 +165,15 @@
|
|||
<i class="tags icon"></i>标签
|
||||
</div>
|
||||
<div class="right aligned column">
|
||||
<a href="#" target="_blank">more <i class="angle double right icon"></i></a>
|
||||
<a href="#" target="_blank">
|
||||
<i class="angle double right icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui teal segment">
|
||||
<a href="#" th:href="@{/tags/{id}(id=${tag.id})}" class="ui teal basic left pointing label m-margin-tb-tiny"
|
||||
<a href="#" th:href="@{/tags/{id}(id=${tag.id})}"
|
||||
class="ui teal basic left pointing label m-margin-tb-tiny"
|
||||
th:each="tag : ${tags}">
|
||||
<span th:text="${tag.name}">方法论</span>
|
||||
<div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
|
||||
|
|
|
|||
|
|
@ -61,16 +61,17 @@
|
|||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">友情连接</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="https:www.wulinzeng.vip" class="item m-text-thin">吴李曾</a>
|
||||
<!-- <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
|
||||
<!-- <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
|
||||
<a th:href="#{friend.url.one}" class="item m-text-thin" th:text="#{friend.name.one}"></a>
|
||||
<!-- <a th:href="#{friend.url.two}" class="item m-text-thin" th:href="#{friend.name.two}"></a>-->
|
||||
<!-- <a th:href="#{friend.url.three}" class="item m-text-thin" th:href="#{friend.name.three}"></a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item m-text-thin" th:text="#{index.email}">Email:</a>
|
||||
<a href="#" class="item m-text-thin" th:text="#{index.qq}">QQ:</a>
|
||||
<a href="Mailto:2230432084@qq.com" class="item m-text-thin" th:text="#{index.email}"></a>
|
||||
<a href="http://wpa.qq.com/msgrd?v=3&uin=2230432084&site=qq&menu=yes" class="item m-text-thin"
|
||||
th:text="#{index.qq}"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide column">
|
||||
|
|
@ -98,9 +99,7 @@
|
|||
|
||||
<script id="ribbon" size="150" alpha='0.3' zIndex="-2"
|
||||
src="https://cdn.jsdelivr.net/gh/unluckynike/blogimg/images/js/coloured-ribbon.js"></script>
|
||||
<!-- -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/unluckynike/blogimg/images/js/Snow.js"></script>-->
|
||||
<!-- <!–樱花–>-->
|
||||
<!-- <script type="text/javascript">-->
|
||||
<!-- //只在桌面版网页启用特效-->
|
||||
<!-- var windowWidth = $(window).width();-->
|
||||
|
|
|
|||
|
|
@ -6,23 +6,27 @@
|
|||
<title th:replace="${title}">博客详情</title>
|
||||
<link rel="icon" th:href="@{/images/icon.png}" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
|
||||
<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
|
||||
<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"
|
||||
th:href="@{/lib/editormd/css/editormd.min.css}">
|
||||
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
|
||||
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
|
||||
<div class="ui container">
|
||||
<div class="ui inverted secondary stackable menu">
|
||||
<h2 class="ui teal header item">管理后台</h2>
|
||||
<a href="#" th:href="@{/admin/blogs}" class=" m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="mini home icon"></i>文章</a>
|
||||
<a href="#" th:href="@{/admin/types}" class=" m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="mini idea icon"></i>分类</a>
|
||||
<a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="mini tags icon"></i>标签</a>
|
||||
<a href="#" th:href="@{/}" class="m-item item m-mobile-hide" ><i class="mini tags icon"></i>博客</a>
|
||||
<a href="#" th:href="@{/admin/blogs}" class=" m-item item m-mobile-hide"
|
||||
th:classappend="${n==1} ? 'active'"><i class="mini home icon"></i>文章</a>
|
||||
<a href="#" th:href="@{/admin/types}" class=" m-item item m-mobile-hide"
|
||||
th:classappend="${n==2} ? 'active'"><i class="mini idea icon"></i>分类</a>
|
||||
<a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide"
|
||||
th:classappend="${n==3} ? 'active'"><i class="mini tags icon"></i>标签</a>
|
||||
<a href="#" th:href="@{/}" target="_blank" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>博客</a>
|
||||
<div class="right m-item m-mobile-hide menu">
|
||||
<div class="ui dropdown item">
|
||||
<div class="text">
|
||||
<img class="ui avatar image" th:src="@{${session.user.avatar}}">
|
||||
<img class="ui avatar image" th:src="@{${session.user.avatar}}">
|
||||
<span th:text="${session.user.nickname}">北斋</span>
|
||||
</div>
|
||||
<i class="dropdown icon"></i>
|
||||
|
|
@ -44,28 +48,29 @@
|
|||
<div class="three wide column">
|
||||
<div class="ui inverted link list">
|
||||
<div class="item">
|
||||
<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
|
||||
<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image"
|
||||
alt="" style="width: 110px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">友情链接</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item m-text-thin">用户故事（User Story）</a>
|
||||
<a href="#" class="item m-text-thin">用户故事（User Story）</a>
|
||||
<a href="#" class="item m-text-thin">用户故事（User Story）</a>
|
||||
<a th:href="#{friend.url.one}" class="item m-text-thin" th:text="#{friend.name.one}"></a>
|
||||
<!-- <a th:href="#{friend.url.two}" class="item m-text-thin" th:href="#{friend.name.two}"></a>-->
|
||||
<!-- <a th:href="#{friend.url.three}" class="item m-text-thin" th:href="#{friend.name.three}"></a>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="#" class="item m-text-thin">Email：2230432084@qq.com</a>
|
||||
<a href="#" class="item m-text-thin">QQ：2230432084</a>
|
||||
<a href="Mailto:2230432084@qq.com" class="item m-text-thin" th:text="#{index.email}"></a>
|
||||
<a href="http://wpa.qq.com/msgrd?v=3&uin=2230432084&site=qq&menu=yes" class="item m-text-thin" th:text="#{index.qq}"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide column">
|
||||
<h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
|
||||
<p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
|
||||
<p class="m-text-thin m-text-spaced m-opacity-mini" th:text="#{index.describe}"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui inverted section divider"></div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
|
||||
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--导航-->
|
||||
|
|
@ -100,22 +101,33 @@
|
|||
<div class="five wide column">
|
||||
|
||||
<!--介绍-->
|
||||
<div class="ui card">
|
||||
<div class="image">
|
||||
<img th:src="@{/images/avatar.jpg}">
|
||||
</div>
|
||||
<div class="content">
|
||||
<a class="header">北斋</a>
|
||||
<div class="meta">
|
||||
<span class="date"></span>
|
||||
<div class="ui segment">
|
||||
<div class="ui card ">
|
||||
<div class="image">
|
||||
<img th:src="@{/images/avatar.jpg}">
|
||||
</div>
|
||||
<div class="description">
|
||||
<p id="poem">loading...</p>
|
||||
<p id="info">loading...</p>
|
||||
<div class="content">
|
||||
<a class="header">北斋</a>
|
||||
<div class="meta">
|
||||
<span class="date"></span>
|
||||
</div>
|
||||
<!--一言-->
|
||||
<div class="description">
|
||||
<p id="poem">Hitokoto.....</p>
|
||||
<p id="info">Hitokoto....</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<a><i class="user icon"></i>关于站长</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<a><i class="user icon"></i>关于站长</a>
|
||||
</div>
|
||||
|
||||
<!--网易云-->
|
||||
<div class="ui segment">
|
||||
<div>
|
||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86
|
||||
src="//music.163.com/outchain/player?type=2&id=31134607&auto=1&height=66"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,13 +139,15 @@
|
|||
<i class="idea icon"></i>分类
|
||||
</div>
|
||||
<div class="right aligned column">
|
||||
<a href="#" target="_blank">more <i class="angle double right icon"></i></a>
|
||||
<a href="#" target="_blank">
|
||||
<i class="angle double right icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui teal segment">
|
||||
<div class="ui fluid vertical menu">
|
||||
<a href="#" class="item" th:each="type : ${types}">
|
||||
<a href="#" th:href="@{/types/{id}(id=${type.id})}" class="item" th:each="type : ${types}">
|
||||
<span th:text="${type.name}">学习日志</span>
|
||||
<div class="ui teal basic left pointing label"
|
||||
th:text="${#arrays.length(type.blogs)}">13
|
||||
|
|
@ -151,12 +165,15 @@
|
|||
<i class="tags icon"></i>标签
|
||||
</div>
|
||||
<div class="right aligned column">
|
||||
<a href="#" target="_blank">more <i class="angle double right icon"></i></a>
|
||||
<a href="#" target="_blank">
|
||||
<i class="angle double right icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui teal segment">
|
||||
<a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny"
|
||||
<a href="#" th:href="@{/tags/{id}(id=${tag.id})}"
|
||||
class="ui teal basic left pointing label m-margin-tb-tiny"
|
||||
th:each="tag : ${tags}">
|
||||
<span th:text="${tag.name}">方法论</span>
|
||||
<div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue