Every time I switch to a new blog template, I always feel that there are many areas that are not satisfactory. The Maupassant template is no exception this time, so I used my mediocre coding skills to make some modifications and optimizations based on the original template. Here, I will record some of the modified methods for reference by friends who have the same needs.
1. Modification of Article Date#
Mainly modified the display of the date below the homepage title and the sidebar archive date. The modification methods are as follows:
- Open the index.php file and change it to date ('n 月 j, Y').
<date class="post-meta">
<?php $this->date('n月 j, Y'); ?>
</date>
- Open the sidebar.php file and change it to type=month&format=Y 年 m 月.
<section class="widget">
<h3 class="widget-title"><?php _e('Archive'); ?></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. Modification of Link Color#
The link color of the Maupassant template itself does not provide a good sensory experience when reading, so I made some modifications. The modification methods are as follows:
- Open the style.css file and change the color to #C83C23.
.post-content a, .comment-content a {
border-bottom:1px solid #ddd;
color: #C83C23;
}
3. Modification of Code Highlighting#
I was not very satisfied with the code highlighting provided by the template itself, so I made modifications based on highlight.js. The modification methods are as follows:
- Open the footer.php file and import highlight.js.
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
- Open the header.php file and import the CSS style file. You can choose it yourself on the highlight.js official website.
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
4. Automatic Spacing between Chinese and Western Text#
I am used to having spaces between Chinese and Western text in the layout, so I made modifications based on references online. The modification methods are as follows:
- Open the footer.php file and add the following code within the <body> tag.
<!-- Automatic spacing -->
<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. Adding Pagination to Article Pages#
The Maupassant template does not have the default functionality of previous and next article navigation on the article pages. The addition methods are as follows:
- Open the post.php file and add the following code after the </article> tag.
<div class="post-nav">
<div class="post-nav-pre" style="float:left;">
<?php $this->thePrev('Previous: %s', ''); ?>
</div>
<div class="post-nav-next" style="float:right;">
<?php $this->theNext('Next: %s', ''); ?>
</div>
</div>
- If you want the same style as mine, open the style.css file and add the following code.
/* Article navigation */
.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. Recent Posts in the Sidebar#
The default recent posts in the sidebar are set to display 10 posts, which is too many. I adjusted it to display 5 posts. The modification methods are as follows:
- Open the sidebar.php file and add ,'pageSize=5' after Widget_Contents_Post_Recent.
<ul class="widget-list">
<?php $this->widget('Widget_Contents_Post_Recent','pageSize=5')
->parse('<li><a href="{permalink}">{title}</a></li>'); ?>
</ul>
7. Adding Copyright Statement#
When reading an article, I always feel that there should be a clear distinction at the end, so I added a copyright statement to differentiate it. The optimization methods are as follows:
- Open the post.php file and add the copyright statement code after the </article> tag.
<div class=copyright>
<div class=cp-title>
<strong>Article Title:</strong><?php $this->title(); ?>
</div>
<div class=cp-author>
<strong>Article Author:</strong><?php $this->author(); ?>
</div>
<div class=cp-date>
<strong>Publication Date:</strong><?php $this->date('Y 年 m 月 d 日'); ?>
</div>
<div class=cp-update>
<strong>Update Date:</strong><?php echo date('Y 年 m 月 d 日', $this->modified);?>
</div>
<div class=cp-url>
<strong>Original Link:</strong><a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a>
</div>
<div class=cp-cc>
<strong>License:</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="noopener noreferrer nofollow">Attribution 4.0 International (CC BY 4.0)</a>, please retain the original link and author when reprinting.
</div>
</div>
- Open the style.css file and add the copyright statement style.
/* Copyright statement */
.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. Adding Reward Functionality#
Actually, I was hesitant about whether to add this functionality. I feel that my articles are not yet at the level where people would appreciate them. However, for the sake of aesthetics, I still added it. Maybe some big shot will support it, who knows haha. The addition methods are as follows:
- Open the post.php file and add the following code in the appropriate position.
<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>Reward</span> </button>
<p style="color:#999;font-size:14px;">Any amount is appreciated</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> WeChat Pay </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> Alipay </p>
</div>
</div>
</div>
- Open the style.css file and add the reward button style. You can modify it according to your preferences.
/* Article reward */
#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. Brief Summary#
The above are some simple optimizations based on the Maupassant template. You can see all the modified effects directly on the website. If there are any unclear areas, you can discuss them in the comments or contact me via the email below.
- Email: Y2hpbG9od2VpQGdtYWlsLmNvbQ== (Note: Base 64 decoding)