博客樣式優化

每次切換一個博客模板的時候，總覺得有許多地方看起來不盡人意。這次的 maupassant 模板也不例外，於是發揮自己半吊子的代碼水平，在原模板基礎上做了一些修改優化。這裡記錄一下部分修改的方法，以供有相同需要的朋友參考。

1. 文章日期修改#

主要修改了首頁標題下日期，以及邊欄歸檔日期的顯示。修改方法如下：

打開 index.php 文件，改為 date ('n 月 j, Y')。

<date class="post-meta">
	<?php $this->date('n月 j, Y'); ?>
</date>

打開 sidebar.php 文件，改為 type=month&format=Y 年 m 月。

<section class="widget">
	<h3 class="widget-title"><?php _e('歸檔'); ?></h3>
    <ul class="widget-list">
        <?php $this->widget('Widget_Contents_Post_Date', 'type=month&format=Y年m月')
        ->parse('<li><a href="{permalink}">{date}</a></li>'); ?>
    </ul>
</section>

2. 連結顏色修改#

maupassant 模板本身的連結顏色，在閱讀時的感官體驗不是很好，於是自己做了修改。修改方法如下：

打開 style.css 文件，將 color 改為 #C83C23。

.post-content a, .comment-content a {
    border-bottom:1px solid #ddd;
    color: #C83C23;
}

3. 代碼高亮修改#

對於模板自帶的代碼高亮不是很滿意，自己基於 highlight.js 做了修改。修改方法如下；

打開 footer.php 文件，引入 highlight.js 。

<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

打開 header.php，引入 css 樣式文件。可以自行在highlight.js官網選擇。

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">

4. 中西文自動加空格#

比較習慣中西文之間有空格的排版方式，於是參考網上做了修改。修改方法如下：

打開 footer.php 文件，在 <body> 標籤中加入下面代碼。

<!-- 自動添加空格 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.min.js"></script>
<script>
  const text = pangu.spacing("當你凝視著bug，bug也凝視著你");
  // text = '當你凝視著 bug，bug 也凝視著你'

  pangu.spacingElementById('main');
  pangu.spacingElementByClassName('comment');
  pangu.spacingElementByTagName('p');

  document.addEventListener('DOMContentLoaded', () => {
    // listen to any DOM change and automatically perform spacing via MutationObserver()
    pangu.autoSpacingPage();
  });
</script>

5. 文章頁添加翻頁#

maupassant 模板的文章頁，默認沒有上一篇、下一篇這樣的文章翻頁功能。添加方法如下：

打開 post.php 文件，在 </article> 標籤後添加下面代碼。

<div class="post-nav">
	<div class="post-nav-pre" style="float:left;">
		<?php $this->thePrev('上一篇 : %s', ''); ?>
	</div>  
	<div class="post-nav-next" style="float:right;">
	    <?php $this->theNext('下一篇 : %s', ''); ?>
	</div>
</div>

如果要樣式與我一樣，打開 style.css 添加下面代碼。

/* 文章翻頁 */
.post-nav{
    overflow: hidden;
    margin: 35px 0;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.post-nav-pre a{
    color:#C83C23;
}

.post-nav-next a{
    color:#C83C23;
}

6. 邊欄最新文章#

邊欄默認最新文章調用 10 篇，有些太多了，自行調整為 5 篇。修改方法如下：

打開 sidebar.php，在 Widget_Contents_Post_Recent 後加上：,'pageSize=5'。

<ul class="widget-list">
    <?php $this->widget('Widget_Contents_Post_Recent','pageSize=5')
    ->parse('<li><a href="{permalink}">{title}</a></li>'); ?>
</ul>

7. 添加版權聲明#

打開 post.php，在 </article> 標籤後，添加版權聲明代碼。

<div class=copyright>
    <div class=cp-title>
        <strong>本文標題：</strong><?php $this->title(); ?>
    </div>
    <div class=cp-author>
        <strong>文章作者：</strong><?php $this->author(); ?>
    </div>
    <div class=cp-date>
        <strong>發佈時間：</strong><?php $this->date('Y 年 m 月 d 日'); ?>
    </div>
    <div class=cp-update>
        <strong>更新時間：</strong><?php echo date('Y 年 m 月 d 日', $this->modified);?>
    </div>
    <div class=cp-url>
        <strong>原始連結：</strong><a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a>
    </div>
    <div class=cp-cc>
        <strong>許可協議：</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="noopener noreferrer nofollow">署名 4.0 國際（CC BY 4.0）</a>，轉載請保留原文連結和作者。
    </div>
</div>

打開 style.css，添加版權聲明樣式。

/* 版權聲明 */
.copyright{
    background-color: #f0f0f0;
    padding: 12px;
    line-height: 1.6;
}
.cp-url a{
    color:#C83C23;
    border-bottom: 1px solid #ddd;
}
.cp-cc a{
    color: #C83C23;
    border-bottom: 1px solid #ddd;
}

8. 添加打賞功能#

其實比較猶豫要不要加這個功能，自覺自己的文章還達不到有人讚賞的水平。不過為了版面好看，還是先加上去了，也許某個大佬會支持也說不定的哈哈。添加方法如下：

打開 post.php，添加下面代碼在合適位置。

<div style="padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;"> 
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}"> <span>打賞</span> </button> 
    <p style="color:#999;font-size:14px;">多寡隨意，豐儉由人</p>
    <div id="QR" style="display: none;"> 
        <div id="wechat" style="display: inline-block"> 
        <a class="fancybox" rel="group"><img id="wechat_qr" src="https://chilohdata.oss-cn-hongkong.aliyuncs.com/imgs/wechatpay.png" alt="WeChat Pay" /></a> 
        <p> 微信打賞 </p> 
        </div> 
        <div id="alipay" style="display: inline-block"> 
        <a class="fancybox" rel="group"><img id="alipay_qr" src="https://chilohdata.oss-cn-hongkong.aliyuncs.com/imgs/alipay.png" alt="Alipay" /></a> 
        <p> 支付寶打賞 </p> 
        </div> 
    </div> 
</div>

打開 style.css，添加打賞按鈕樣式文件。可以按照自己喜好自行修改。

/* 文章打賞 */
#QR {
    padding-top: 20px;
    border: #f05050;
}

#QR a {
	border: 0
}

#QR img {
	width: 180px;
	max-width: 100%;
	display: inline-block;
	margin: .8em 2em 0 2em
}

#rewardButton {
	border: 1px solid #f05050;
	line-height: 36px;
	text-align: center;
	height: 36px;
	display: block;
	border-radius: 4px;
	-webkit-transition-duration: .4s;
	transition-duration: .4s;
	background-color: #f05050;
	color: #fff;
	margin: 0 auto;
	padding: 0 25px
}

#rewardButton:hover {
	color: #f77b83;
	border-color: #f77b83;
	outline-style: none
}

#rewardButton {
	background-color: #f05050;
	color: white;
	border-radius: 50px;
	cursor: pointer;
}

9. 簡單總結一下#

上面就是基於 maupassant 模板，這邊做的一些簡單優化了。所有修改後的效果，都可以在網站裡直接看到。有不清楚的地方，可以在評論裡相互交流，或者通過下方郵箱聯繫我。

郵件： Y2hpbG9od2VpQGdtYWlsLmNvbQ==（注：Base 64 解碼）