博客-hexo-matery主题改造笔记

零、博客作用

  1. 笔记:概念及部分功能演示;
  2. 教程:安装和卸载教程;
  3. BUG:bug解决方案;
  4. 优化:在能用的基础上增强实现;
  5. 字典:汇总常用的知识,便于查阅;
  6. 展示:个性化展示。

一、更改导航栏颜色

在主题文件的theme/matery /source/css/matery.css 文件中,搜索 .bg-color 来修改背景颜色:

.bg-color {
   /* background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);*/
   background:#000B3F;
}

二、取消蒙版特效

在主题文件的 theme/matery /source/css/matery.css 文件中,搜索 .bg-cover:after 注释它:

/*.bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
}*/

三、修改首页背景图显示时间

修改theme/matery/layout/_partial/bg-cover-content.ejs 文件

<script>
// Dynamically switch banner pictures every day.
//把getDay换成getDate(),则可以按照当前几号显示下图片,最多31张!
$('.bg-cover').css('background-image', 'url(https://blogcdq.oss-cn-beijing.aliyuncs.com/image/blog/' + new Date().getDate() + '.jpg)');
</script>

四、添加好文收藏功能

新建 好文推荐 文件

hexo new page "goodpapers"

修改站点_config.yml文件

menu:
  Index:
    url: /
    icon: fa-home
  Tags:
    url: /tags
    icon: fa-tags
  Categories:
    url: /categories
    icon: fa-bookmark
  Archives:
    url: /archives
    icon: fa-archive
  好文收藏:
    url: /goodpapers
    icon: fa-coffee
  相册:
    url: /gallery
    icon: fa-photo
  Friends:
    url: /friends
    icon: fa-address-book
  About:
    url: /about
    icon: fa-user-circle-o

修改站点 /goodpapers/index.md文件

---
title: 好文收藏
date: 2019-02-18 11:09:48
---

1. [我的八年博士生涯](https://www.huxiu.com/article/273773.html?f=member_collections)         
2. [我曾是性用品微商](https://www.huxiu.com/article/285040.html?f=member_collections)
3. [乔布斯回归:从任性国王到铁腕企业家](https://www.huxiu.com/article/285320.html)
4. [那些简历造假拿 Offer 的程序员,后来都怎么样了?](https://mp.weixin.qq.com/s/a2rscuxJ0fl07OJ-0Shxfg)
5. [知网是个什么东西啊,好暴利](https://www.huxiu.com/article/285502.html)

五、提取相册功能

新建相册文件

hexo new page "gallery"

修改站点_config.yml文件

menu:
  Index:
    url: /
    icon: fa-home
  Tags:
    url: /tags
    icon: fa-tags
  Categories:
    url: /categories
    icon: fa-bookmark
  Archives:
    url: /archives
    icon: fa-archive
  好文收藏:
    url: /goodpapers
    icon: fa-coffee
  相册:
    url: /gallery
    icon: fa-photo
  Friends:
    url: /friends
    icon: fa-address-book
  About:
    url: /about
    icon: fa-user-circle-o

修改站点 /gallery/index.md文件

---
title: 相册
date: 2019-02-04 21:35:22
layout: "gallery"
---

新建theme/matery/layout/gallery.ejs文件,添加内容如下:

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<%- partial('_partial/bg-cover') %>

<main class="content">
<% if (theme.myGallery && theme.myGallery.enable) { %>
<%- partial('_widget/my-gallery') %>
<% } %>
</main>

<% if (page.total > 1) { %>
<%- partial('_partial/paging') %>
<% } %>

同时注释theme/matery/layout/about.ejs文件的如下部分:

<!--  <% if (theme.myGallery && theme.myGallery.enable) { %> -->
<!--   <%- partial('_widget/my-gallery') %> -->
<!--   <% } %> -->

修改相册布局:
找到theme/matery /source/css/matery.css 文件,修改如下部分:

.my-gallery {
    margin: 4.5rem auto 1rem;
    padding: 0 12rem;/*这是显示宽度,前边是页面宽度,后边是图片宽度*/
    max-width: 1100;
  /*position: relative;*/

}

.my-gallery .photo {
   margin: .5rem 0;/*这是上下两行的行距*/
    /*position: relative;
   overflow: hidden;*/

}

.my-gallery .photo img {
    /*width: 100%;*/
    height: 200px;/*限制高度,使同行保持等高,不然会很乱*/
    border-radius: 10px;
    cursor: pointer;
/*height: 200px;

  display: none;
  max-width: 100%;*/
  &.first-child  /*以下部分能使图片居中显示*/
    display: block;
  &.loaded
    position: absolute;
    display: block;
  img
    display: block;
    max-width: 100%;
    margin: 0 auto ;

}

六、修改页脚

找到theme/matery/layout/_partial/footer.ejs 文件,修改对应样式为

 <div class="col s12 m8 l8 copy-right">

               &copy;2018- <%= date(new Date(), 'YYYY') %> <%= config.title %>
               &nbsp;&nbsp;&nbsp  
             <%= __('Author: ') %> <a href="https://purethought.cn/">陈德强</a>

            <% if (theme.wordCount.enable && theme.wordCount.totalCount) { %>
                &nbsp;<i class="fa fa-area-chart"></i>&nbsp;站点总字数:&nbsp;
                <span class="white-color"><%= totalcount(site) %></span>
            <% } %>

            <% let socialClass = '' %>

七、修改导航栏不透明

透明导航栏经常给我造成阅读障碍,因此决定不使用透明导航栏了。

找到theme/matery /source/css/matery.css 文件,修改如下部分:

header .nav-transparent {
   /* background-color: transparent !important;*/
  background-color: #000B3F;
    background-image: none;
    box-shadow: none;
}

八、修改置顶文章样式

找到themes/matery/languages/zh-CN.yml,修改此处:

recommendedPosts: 置顶文章

九、添加百度统计

找到theme/matery/layout/_partial/footer.ejs 文件,修改对应样式为

<span id="busuanzi_container_site_uv">
                    <i class="fa fa-users"></i>,&nbsp;访客数 <span id="busuanzi_value_site_uv" class="white-color"></span>.
                </span>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?147475454185ebcf440a27cc35e793ef";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

以下是在hexo-blog-fly基础上改造的。

十、添加相册功能

在主题的_config.yml文件中添加相册图标:

menu:
  Index:
    url: /
    icon: fa-home 
  相册:
    url: /galleries
    icon: fa-camera  

在source文件夹下新建galleries文件夹和index.md,index.md内容:

---
title: 相册
layout: "galleries"
---

在galleries文件夹内新建相册文件夹,例如:精选,
在 精选 文件夹内新建index.md:

---
title: 精选
type: "gallery"
layout: "gallery"
---

在 主题/layout下新建gallerys.ejs文件

注意修改图片地址,共有1处修改。

<link rel="stylesheet" href="/css/gallery.css">

<%- partial('_partial/bg-cover') %>

<main class="content">
    <div class="container">
        <% if (site.data && site.data.galleries) { %>
        <% var galleries = site.data.galleries; %>
        <div class="gallery-wrapper row">
            <% for (var i = 0, len = galleries.length; i < len; i++) { %>
            <% var gallery = galleries[i]; %>
            <div class="col s6 m4 l4 xl3 gallery-box">
                <a href="./<%- gallery.name %>" class="gallery-item" data-aos="zoom-in-up">
                    <div class="gallery-cover-box" style="background-image: url(http://blogcdq.oss-cn-beijing.aliyuncs.com/image/gallert_tiny/<%- gallery.cover%>)">
                        <!--<img src="http://puxxml5fz.bkt.clouddn.com/<%- gallery.cover %>" alt="img" class="gallery-cover-img">-->
                    </div>
                    <p class="gallery-name">
                        <%- gallery.name %>
                    </p>
                </a>
            </div>
            <% } %>
        </div>
        <% } %>
    </div>
</main>

再在 主题/layout下新建gallery.ejs文件,注意修改图片地址,共有2处修改。

在 主题/source/css下新建gallery.css文件

在 主题/config中增加css

libs:
  css:
    https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css
    https://cdn.staticfile.org/justifiedGallery/3.7.0/css/justifiedGallery.min.css
  js:
    https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js
    https://cdn.staticfile.org/justifiedGallery/3.7.0/css/justifiedGallery.min.js

下面可以加入图片了,名字都是图库中的图片名。
source/_data下新建galleries.json文件

[
{
"name": "精选",
"cover": "精选/3.jpg",
"description": "生活",
"photos": [
"精选/1.jpg","精选/2.jpg","精选/3.jpg"
]}
]

这样应该就可以了,凭记忆写的,不知道对不对了。

十一、添加二级菜单功能

https://sunhwee.com/posts/65d7181d.html

十二、添加雪花和文字点击特效

在主题/source/js下新建sakura.js文件

在主题/source/js下新建xuehuapiaoluo.js

/*样式一*/
//背景雪花飘落特效
(function($){
  $.fn.snow = function(options){
  var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
  documentHeight  = $(document).height(),
  documentWidth = $(document).width(),
  defaults = {
    minSize   : 10,
    maxSize   : 20,
    newOn   : 1000,
    flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
  },
  options = $.extend({}, defaults, options);
  var interval= setInterval( function(){
  var startPositionLeft = Math.random() * documentWidth - 100,
  startOpacity = 0.5 + Math.random(),
  sizeFlake = options.minSize + Math.random() * options.maxSize,
  endPositionTop = documentHeight - 200,
  endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  durationFall = documentHeight * 10 + Math.random() * 5000;
  $flake.clone().appendTo('body').css({
    left: startPositionLeft,
    opacity: startOpacity,
    'font-size': sizeFlake,
    color: options.flakeColor
  }).animate({
    top: endPositionTop,
    left: endPositionLeft,
    opacity: 0.2
  },durationFall,'linear',function(){
    $(this).remove()
  });
  }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
      minSize: 5, /* 定义雪花最小尺寸 */
      maxSize: 50,/* 定义雪花最大尺寸 */
      newOn: 500  /* 定义密集程度,数字越小越密集 */
    });
});

在主题/source/js下新建wenzi.js文件

/* 鼠标点击文字特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        // var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

在主题/_widget/index.ejs中找到并替换该部分

<% if (is_home() && page.current === 1) { %>
<%- partial('_partial/index-cover') %>
<% } else { %>
    <%- partial('_partial/bg-cover') %>
<% } %>

    <!-- 雪花特效 -->
    <% if (theme.xuehuapiaoluo.enable) { %>
        <script type="text/javascript">
            var windowWidth = $(window).width();
            if (windowWidth > 768) {
                if(new Date().getHours()%2==0){
                document.write('<script type="text/javascript" src="/js/xuehuapiaoluo.js"><\/script>');
                }
            }
        </script>
    <% } %>

<!-- 樱花特效 -->
   <% if (theme.sakura.enable) { %>
        <script type="text/javascript">
            var windowWidth = $(window).width();
            if (windowWidth > 768) {
                if(new Date().getHours()%2==1){
                document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
                }               
            }
        </script>
    <% } %>


<main class="content">

在主题/config.yml中添加:

wenzi:
  enable: true
xuehuapiaoluo:
  enable: true
sakura:
  enable: true

在主题/config.yml的libs的js下添加:

libs:
  js:
    sakura: /js/sakura.js
    fireworks: /js/fireworks.js
    wenzi: /js/wenzi.js
    xuehuapiaoluo: /js/xuehuapiaoluo.js

十三、添加块折叠功能

安装插件

npm install hexo-sliding-spoiler --save

用法:

{% spoiler code %}
content
{% endspoiler %}

需要注意的是,使用时代码块符号```不能指定语言,不然会乱码,即不能```js如此样式。

十四、生成电影卡

安装插件

npm install hexo-tag-mtime --save

用法:

{% mtime 218707 %}
id可以在时光网 http://www.mtime.com 相应的电影网址获取

十五、豆瓣分享

安装插件

npm install hexo-douban --save

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

douban:
  user: mythsman
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000 

user: 你的豆瓣ID.打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的URL大概是这样:”https://www.douban.com/people/xxxxxx/" ,其中的”xxxxxx”就是你的个人ID了。
builtin: 是否将生成页面的功能嵌入hexo s和hexo g中,默认是false,另一可选项为true(1.x.x版本新增配置项)。
title: 该页面的标题.
quote: 写在页面开头的一段话,支持html语法.
timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
如果只想显示某一个页面(比如movie),那就把其他的配置项注释掉即可。

菜单参考,一定要有图标,不然不显示

menu:
  豆瓣:
    url: /
    icon: fa-heart 
    children:
      - 
        name: 书单
        url: /books     # 这是链接到books页面
        icon: fa-book
      - 
        name: 电影
        url: /movies     # 这是链接到books页面
        icon: fa-film
      - 
        name: 游戏
        url: /games     # 这是链接到books页面
        icon: fa-gamepad

升级(可选操作)

npm install hexo-douban --update --save

十六、双部署分流操作

https://purethought.cn/74d17cc3.html

十七、字体替换

全局字体自定义

在 Hexo 根目录下的 source 文件夹内创建一个名为 font 的文件夹,即文件夹路径为 /source/font/ ,用来统一存放你要用到的字体

将你要用到的字体放入上述创建的文件夹内,字体名称最好为英文,如 /source/font/myFont.ttf

找到主题文件夹下的 my.css 文件,路径为 /themes/hexo-theme-matery/source/css/my.css ,并将下面的命令填入的文件中

@font-face{
    font-family: 'myFont';
    src: url('../font/myFont.ttf');
}

body{
    font-family: 'myFont';
}

将上面的 myFont 改成你自己的字体名称即可

局部字体自定义

如果有点 HTML 或者 CSS 基础的同学能看出来,我们在全局字体自定义中给整个网页的 body 给了一个 font-family 的属性。

那么不难想到,局部字体自定义就是自定义一个属性,然后让这个属性在局部起效就好,而并非整个 body 都起效。

与全局字体自定义一样,我们需要创建 font 文件夹,将需要的字体放入,与上面的第1、2步一样,可以参考一下

找到主题文件夹下的 my.css 文件,路径为 /themes/hexo-theme-matery/source/css/my.css ,并将下面的命令填入的文件中

@font-face{
 font-family: 'myFont';
 src: url('../font/myFont.ttf');
}
.diyFont{
 font-family: 'myFont';
}

这里是创建了一个 diyFont 的类,注意与全局字体自定义相区别

找到你要自定义的区域,如我要自定义博客主页的标题字体,那么我要找到相应的文件,也就是 /themes/hexo-theme-matery/layout/_partial/bg-cover-content.ejs ,在相应的地方加入我刚刚自定义的 diyFont 类。如将下面的:

<div class="row">
    <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
        <div class="brand">
            <div class="title center-align">   

改为:

<div class="row">
    <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
        <div class="brand">
            <div class="title center-align diyFont">

也就是在对应的 class 里面填入你自定义的类 diyFont

不建议自定义字体,因为加载字体特别慢。

十八、远程部署

应用腾讯CloudStudio进行远程部署hexo。这样的好处是获得了集成化开发环境和全网化开发化境,只要有电脑有网络的地方都可以部署博客了。

私有仓库

默认情况下github的仓库是公有的,仓库的内容会被所有人看见,因此先建立个私有化仓库存储源码。
在github上新建一个Private仓库,如:Blog

上传源码

删除第三方主题下的.git文件夹;
配置.gitignore文件:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

上传源码到私有仓库

git init  //初始化本地仓库
git remote add origin 私有仓库的git地址  //添加远程仓库
git pull origin master
git add . //添加本地所有文件到仓库        
git commit -m "blog源文件" //添加commit
git push -u origin master

CloudStudio

申请CloudStudio账号,并新建工作空间
先选择运行环境,hexo
然后来源选其他git仓库,填写私有仓库的git地址 ,并将PUblishKey添加到github里
等个三五分钟,就会看到CloudStudio工作站了
这样就可以使用CloudStudio部署博客了,例如使用hexo g测试一下先。

十九、流程图

安装

npm install --save hexo-filter-flowchart

用法

` ` `flow
st=>start: Start|past:>http://www.baidu.com[blank]
e=>end: End:>http://www.baidu.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
` ` `
st=>start: Start|past:>http://www.baidu.com[blank]
e=>end: End:>http://www.baidu.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

二十、网址缩短

hexo-abbrlink

二十一、amp优化

hexo-generator-amp

二十二、自定义内置标签

在themes/主题 下新建scripts文件夹,hexo会自动执行此文件夹的内容。
在scripts文件夾下新建block.js

hexo.extend.tag.register('r', function(args, content){
  var className =  args.join(' ');
  return '<div class="uk-alert uk-alert-danger"><i class="fa fa-warning"></i> ' + content + '</div>';
}, {ends: true});

hexo.extend.tag.register('g', function(args, content){
  var className =  args.join(' ');
  return '<div class="uk-alert uk-alert-success"><i class="fa fa-check-circle"></i> ' + content + '</div>';
}, {ends: true});

hexo.extend.tag.register('y', function(args, content){
  var className =  args.join(' ');
  return '<div class="uk-alert uk-alert-warning"><i class="fa fa-exclamation-circle"></i> ' + content + '</div>';
}, {ends: true});

在themes/主题/source/css/my.css內添加


.uk-alert {
  margin-bottom: 15px;
  padding: 10px;
  background: #ebf7fd;
  color: #2d7091;
  border: 1px solid rgba(45, 112, 145, 0.3);
  border-radius: 4px;
  text-shadow: 0 1px 0 #ffffff;
}

/* Modifier: `uk-alert-success`
 ========================================================================== */
.uk-alert-success {
  background: #f2fae3;
  color: #659f13;
  border-color: rgba(101, 159, 19, 0.3);
}
/* Modifier: `uk-alert-warning`
 ========================================================================== */
.uk-alert-warning {
  background: #fffceb;
  color: #e28327;
  border-color: rgba(226, 131, 39, 0.3);
}
/* Modifier: `uk-alert-danger`
 ========================================================================== */
.uk-alert-danger {
  background: #fff1f0;
  color: #d85030;
  border-color: rgba(216, 80, 48, 0.3);
}

然後就可以使用了。
用法:

{%r%}
紅色
{%endr%}
{%g%}
綠色
{%endg%}
{%y%}
黃色
{%endy%}
  紅色
  綠色
  黃色

文章作者: 陈德强
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 陈德强 !
¥
  目录