Hexo博客主題優化

時間  2019-11-09
標籤 hexo 博客 主題 優化 简体版
原文   原文鏈接

標題圖

Hexo博客主題優化javascript

添加背景圖

在 themes/*/source/css/_custom/custom.styl 中添加以下代碼：css

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

修改Logo字體

在 themes/*/source/css/_custom/custom.styl 中添加以下代碼：html

@font-face {
    font-family: Zitiming;
    src: url('/fonts/##.ttf.ttf');
}
.site-title {
    font-size: 40px !important;
	font-family: '##' !important;
}

文件在 themes/next/source/fonts 目錄下，保留字體文件。java

本地文章優化

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

站點配置文件_config.yml中添加如下代碼git

sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

站點配置文件_config.ymlgithub

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://你的網站

添加文章書寫樣式

效果

打開themes/next/source/css/_custom 下的 custom.styl 文件web

// 黃
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}

// 綠
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}

// 藍
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}

// 紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}

編輯的文章地方npm

<span id="inline-yellow"> 站點配置文件 </span>
<span id="inline-blue"> 站點配置文件 </span>
<span id="inline-green"> 主題配置文件 </span>
<span id="inline-purple"> 主題配置文件 </span>

頭像改爲圓形

themes/next/source/css/_common/components/sidebar/sidebar-author.styl中.site-author-image定義hexo

border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;

robots.txt文件

hexo站點的source文件，在source文件夾中新建文件robots.txtapp

User-agent: * Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /categories/

Sitemap: http://www../sitemap.xml
Sitemap: http://www../baidusitemap.xml
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://www..com/sitemap.xml
Sitemap: http://www..com/baidusitemap.xml

修改內容的寬度

source/css/_variables/custom.styl 文件

// 修改爲你指望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px

文章加密

themes/*/layout/_partials/head.swig文件

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入密碼') !== '{{ page.password }}'){
                alert('密碼錯誤');
                history.back();
            }
        }
    })();
</script>

文章上

---

password: 123456
---

添加頭像

themes/next下的_config.yml文件

avatar: http://example.com/avatar.png

或者使用本地圖片，圖片把放入themes/next/source/images下

avatar: /images/vator.png

頭像旋轉

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改頭像邊框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  // 設置旋轉
  transition: 1.4s all;
}

// 可旋轉的圓形頭像
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

點擊出現桃心效果

/themes/*/source/js/src下新建文件click.js

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

\themes\*\layout\_layout.swig文件末尾添加

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

修改訪問URL路徑

Hexo 站點下的 _config.yml 文件

permalink: :category/:title/

建立標籤目錄

$ cd you-site
$ hexo new page tags

建立後，打開you-site/source/tags的index.md

---
title:  #頁面主題
date:  #當前建立文件時間
type: "tags" # 設置頁面類型
---

RSS

$ npm install hexo-generator-feed --save

Hexo 站點下的_config.yml

# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

文章添加邊框陰影

打開 themes/*/source/css/_custom/custom.styl

// 主頁文章添加陰影
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

顯示當前瀏覽進度

themes/*/_config.yml

# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true

修改文章間分割線

themes/next/source/css/_common/components/post/下的post-eof.styl

.posts-expand {
  .post-eof {
    display: block;
  //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
    width: 0%; //分割線長度
    height: 0px; // 分割線高度
    background: $grey-light;
    text-align: center;
  }
}

開啓版權聲明

主題配置文件下

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

帶#號的標籤

themes/next/layout/_macro/下的post.swig文件

<div class="post-tags">
    {% for tag in post.tags %}
       <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
    {% endfor %}
</div>

文章字數統計，閱讀時長

$ npm i --save hexo-wordcount

themes/next下的_config.yml

# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  #字數統計
  wordcount: true
  #預覽時間
  min2read: true
  #總字數
  totalcount: false
  separated_meta: true

鏈接樣式

themes/next/source/css/_custom/下的custom.styl

.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

添加廣告

百度SSP和谷歌Adsense

註冊，複製代碼，在theme/*/layout/_custom/google_ad.swig， AdSense 上的代碼粘貼進去，複製一份theme/*/layout/_custom/head.swig

在 theme/*/layout/post.swig添加：

{% include '_custom/google_ad.swig' %}
{% block content %}
  <div id="posts" class="posts-expand">
    {{ post_template.render(page) }}
    {% include '_custom/google_ad.swig' %}
  </div>
{% endblock %}

頂部加載條

themes/next下的_config.yml

pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash

添加複製功能

下載插件clipboard.js

在themes/next/source/lib/,下新建clipboard文件夾

把src文件夾下的文件拖動到clipboard文件夾

themes/next/source/js/src/,創建custom.js

function createCopyBtns() {
    var $codeArea = $("figure table");
    if ($codeArea.length > 0) {
        //複製成功後將要乾的事情
        function changeToSuccess(item) {
             $imgOK = $("#copyBtn").find("#imgSuccess");
                if ($imgOK.css("display") == "none") {
                    $imgOK.css({
                        opacity: 0,
                        display: "block"
                    });
                    $imgOK.animate({
                        opacity: 1
                    }, 1000);
                    setTimeout(function() {
                        $imgOK.animate({
                            opacity: 0
                        }, 2000);
                    }, 2000);
                    setTimeout(function() {
                        $imgOK.css("display", "none");
                    }, 4000);
                };
        };

        $(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');

        var clipboard = new Clipboard('#copyBtn', {
            target: function() {
                return document.querySelector("[copyFlag]");
            },
            isSupported: function() {
                return document.querySelector("[copyFlag]");
            }
        });
        clipboard.on('success',
            function(e) {
                //清除內容被選擇狀態
                e.clearSelection();
                changeToSuccess(e);
            });
        clipboard.on('error',
            function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        //鼠標 
        $("#copyBtn").hover(
            function() {
                $(this).stop();
                $(this).css("opacity", 1);
            },
            function() {
                $(this).animate({
                    opacity: 0
                }, 2000);
            }
        );
    }
}

$("figure").hover(
    function() {
        //移除以前含有複製標誌代碼塊的 copyFlag
        $("[copyFlag]").removeAttr("copyFlag");
        //在新的（當前鼠標所在代碼區）代碼塊插入標誌：copyFlag
        $(this).find(".code").attr("copyFlag", 1);
        $copyBtn = $("#copyBtn");
        if ($copyBtn.lenght != 0) {
            $copyBtn.stop();
            $copyBtn.css("opacity", 0.8);
            $copyBtn.css("display", "block");
            $copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
            $copyBtn.css("left", -$copyBtn.width() - 3);
        }
    },
    function() {

        $("#copyBtn").animate({
            opacity: 0
        }, 2000);
    }
);

$(document).ready(function() {
  createCopyBtns();
});

themes/next/layout/_custom/創建custom.swig

<script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>

themes/next/layout/_layout.swig,標籤在</body>上面

{% include '_custom/custom.swig' %}

或者

保存在下面這個目錄
.\themes\next\source\js\src目錄下，建立clipboard-use.js

/*頁面載入完成後，建立複製按鈕*/
!function (e, t, a) { 
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

.\themes\next\source\css\_custom\custom.styl樣式

//代碼塊複製按鈕
.highlight{
  //方便copy代碼按鈕（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

在.\themes\next\layout\_layout.swig文件中，添加引用

<!-- 代碼塊複製功能 -->
  <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
  <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

個人博客

我的博客🙈：我的博客

若是看了以爲不錯

點贊！轉發！

達叔小生：日後餘生，惟獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動而且善於溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

  • 下面我將繼續對 其餘知識 深刻講解 ，有興趣能夠繼續關注
  • 小禮物走一走 or 點贊
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程