Hexo Next 主題美化過程
========================================================================================
將頁面部署到GitHub或者Coding
========================================================================================
1.進入GitBash
ssh-keygen -t rsa -C "[email protected]"
默認會在家目錄生成：C:\Users\aaaa\.ssh
復制pub中的內容到github
2.測試連通性,郵箱地址不用改
3.此時你還需要配置
git config --global user.name "11111" //你的github用戶名，非昵稱
git config --global user.email "[email protected]" //填寫你的github註冊郵箱
4.部署代碼命令如下
cd public/
git init
git add .
git commit -m "MyBlog"
git remote add origin https://github.com/用戶名/項目名稱.git
git push -f origin master
# -----------------------------------------------------
# 快速自動部署命令
hexo v &
hexo clean &
hexo g &
cd public &
git init &
git add . &
git commit -m "MyBlog" &
git remote add origin https://github.com/1111/11111.github.io.git &
git push -f origin master &
# -----------------------------------------------------
========================================================================================
背景圖片,和透明度設置
========================================================================================
打開 \themes\Next\source\css\_custom\custom.styl 添加
// Custom styles.
// 背景圖片
//body {
//background:url(https://source.unsplash.com/random/1600x900);
// background:url(/blog.jpg);
// background-repeat: no-repeat;
// background-attachment:fixed;
// background-position:50% 50%;
//}
//透明度設置
//.main-inner {
// opacity: 0.96;
//}
========================================================================================
替換底部標簽#號為圖標
========================================================================================
修改 \themes\next\layout\_macro\post.swig
搜索 rel="tag"># 將 # 換成 <i class="fa fa-tag"></i>
========================================================================================
給站點添加版權聲明
========================================================================================
1.新建配置文件,並寫入以下內容: \themes\next\layout\_macro\my-copyright.swig
{% if page.copyright %}
<div class="my_post_copyright">
<p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人博客">{{ theme.author }}</a></p>
<p><span>發布時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
</p>
<p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文鏈接及作者</p>
</div>
{% endif %}
---------------------------------------------------------------------------------------------
2.在目錄 \themes\next\source\css\_common\components\post下新建my-post-copyright.styl並寫入內容:
.my_post_copyright {
box-shadow: 10px 1px 10px #989898;
padding: 10px;
text-shadow: 1px 1px 1px #FFF;
font-size: 16px;
font-family: ‘Microsoft Yahei‘;
border-left: solid 5px #3199E4;
background: #F3F3F3;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 50%;
border-top-right-radius: 10px;
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #1d1f21;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
---------------------------------------------------------------------------------------------
3.修改配置文件: \themes\next\layout\_macro\post.swig 修改(335行)
{% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
{% include ‘../_partials/post/post-related.swig‘ with { post: post } %}
{% endif %}
#------------------------------------------------------------
<!--增加的底部版權代碼-->
<div>
{% if not is_index %}
{% include ‘my-copyright.swig‘ %}
{% endif %}
</div>
#------------------------------------------------------------
{#####################}
{### END POST BODY ###}
{#####################}
---------------------------------------------------------------------------------------------
4.修改\themes\next\source\css\_common\components\post\post.styl文件,在最後一行增加代碼:
@import "my-post-copyright";
========================================================================================
給站點添加訂閱
========================================================================================
1.首先安裝插件: npm install hexo-generator-feed
2.在本地hexo根目錄下的_config.yml文件中,添加以下配置
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS訂閱
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
========================================================================================
添加CNZZ站長統計代碼
========================================================================================
vim \themes\Next\layout\_partials\footer.swig
<div style="display:none">
<script src="https://s19.cnzz.com/z_stat.php?id=1274884885&web_id=1274884885" language="JavaScript"></script>
</div>
========================================================================================
給網站底部添加運行時間
========================================================================================
在 /themes/Next/layout 文件夾下找到你的 footer 文件，即腳布局文件，在對應的位置添加代碼
<span id="timeDate">本站已運行: </span>
<script>
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var birthDay = Date.UTC(2009,11,04,00,00,00); // 這裏設置建站時間
setInterval(function() {
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = now - birthDay;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById(‘timeDate‘).innerHTML="本站已運行: "+diffYears+"年 "+diffDays+"天 "+diffHours+"小時 "+diffMinutes+"分鐘 "+diffSeconds+"秒";
}, 1000);
</script>
========================================================================================
neat 博文壓縮功能,npm install hexo-neat --save (主頁config.yml添加以下內容)/與live2D沖突
========================================================================================
neat_enable: true
# 壓縮html
neat_html:
enable: true
exclude:
# 壓縮css
neat_css:
enable: true
exclude:
- ‘**/*.min.css‘
# 壓縮js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- ‘**/*.min.js‘
- ‘**/jquery.fancybox.pack.js‘
- ‘**/index.js‘
Hexo Next 主題美化過程