matery主题优化


matery主题的优化:

这一部分是我花的时间最长,但是为了把网站做的好很值,通过这一步也更好的了解了hexo的运行方式。这部分将只包括我选用的功能,试了好多,有些功能很鸡肋或者不是很好看。被我抛弃了。

1.matery主题下载:

主题下载
解压后替换hexoblog下theme文件夹里的那个文件夹整体替换。

2. 主题优化

2.1 切换主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值:theme: hexo-theme-matery同时修改两个 per_page 的分页条数值为 6 的倍数,如:12、18 等,这样文章列表在各个屏幕(电脑,手机,pad)下都能较好的显示。

2.2 新建一些页面

在根目录hexoblog下git bash here 依次输入下列命令

hexo new page "categories"
hexo new page "tags"  
hexo new page "about"  
hexo new page "friends"  
hexo new page "contact"  

网上教程一般都没有提到最后一个这会导致一个问题就是你的留言板页面打不开404,我当时真的搞了好久通过后我自己新加一个页面个人常用网站才解决

然后依次在hexoblog/source/tags(/categorite/about/friends/contact)/index.md 补充以下内容

type: "tags"  
layout: "tags"     
type: "categories"  
layout: "categories"  
type: "about"  
layout: "about"  
type: "friends"  
layout: "friends"   
type: "contact"  
layout: "contact"  

如/source/tags/index.md

---  
title: tags   
date: 2018-09-30 18:23:38  
type: "tags"  
layout: "tags"  
--- 

其中启用友情链接还需要在 source 目录下新建 _data 目录,在 _data 目录中新建 friends.json (新建一个文本文件txt连带后缀重命名修改就好,提示确认就好) 文件,文件内容如下所示:

[{
    "avatar": "http://hesifan.top/medias/avatar.jpg",
    "name": "凡尘纪",
    "introduction": "念念不忘 必有回响",
    "url": "http://hesifan.top/",
    "title": "前去参观"
}, {
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2",
    "name": "Fabric",
    "introduction": "A Blockchain Platform for the Enterprise",
    "url": "https://hyperledger-fabric.readthedocs.io/en/master/",
    "title": "前去学习"
}, {
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg",
    "name": "BootCDN",
    "introduction": "稳定、快速、免费的前端开源项目 CDN 加速服务。",
    "url": "https://www.bootcdn.cn/",
    "title": "前去加速"
}]  

2.3代码高亮

由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:

npm i -S hexo-prism-plugin  

然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess' #realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

2.4 搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

search:
  path: search.xml
  field: post   

2.5 修改页脚

页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。

2.6 修改社交链接

修改社交链接
在主题的 _config.yml 文件中,默认支持 QQ、GitHub 和邮箱的配置,可以在主题文件的 /layout/_partial/social-link.ejs 文件中,新增、修改需要的社交链接地址,增加链接如B站可参考如下代码:

<a href="https://space.bilibili.com/602389627" class="tooltipped" target="_blank" data-tooltip="访问我的B站" data-position="top" data-delay="50">  
    <i class="fa fa-github"></i>
</a>

这是我的B站个人空间你可以换成你自己的

2.7 修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中,可以替换成你的的微信和支付宝的打赏二维码图片。

特别注意修改前查看该图片信息确保你替换的图片和该图一样大小尺寸名称,建议使用ps修改,后面所有对图片的改动都是如此,不再赘叙

2.8文章链接转静态短地址

如果文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件生成文章时生成中文拼音的永久链接,或者用hexo-abbrlink 生成静态文章链接。以下结合hexo-abbrlink生成类似 /yyyy/mmdd+随机数.html 的文章链接地址。

安装命令如下:

npm install hexo-abbrlink --save  

在 Hexo 根目录下的 _config.yml 文件中,修改 permalink: ,并在文件末尾新增 abbrlink:配置项:

permalink: :year/:month:day:abbrlink.html

abbrlink: 
  alg: crc16 #算法选项:crc16丨crc32
  rep: dec #输出进制:dec为十进制,hex为十六进制

2.9 文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。

安装命令如下:

npm i --save hexo-wordcount  

然后只需在本主题下的 _config.yml 文件中,激活以下配置项即可:

wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true  

注意是主题文件夹里的-ymal文件

2.10自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息,有以下几个部分:
菜单
我的梦想
首页的音乐播放器和视频播放器配置
是否显示
推荐文章名称和按钮配置
favicon 和 Logo
个人信息
TOC 目录
文章打赏信息
复制文章内容时追加版权信息
MathJax
文章字数统计、阅读时长
点击页面的’爱心’效果
我的项目
我的技能
我的相册
Gitalk、Gitment、Valine 和 disqus 评论配置
不蒜子统计和谷歌分析(Google Analytics)
默认特色图的集合当文章没有设置特色图时,本主题会根据文章标题的 hashcode 值取余,来选择展示对应的特色图

2.11 修改 banner 图和文章特色图

可以直接在 /source/medias/banner 文件夹中更换喜欢的 banner 图片,主题代码中是每天动态切换一张,只需 7 张即可。

2.12 [增加看板娘官网地址配置:] https://www.npmjs.com/package/hexo-helper-live2d

1)首先检查博客主目录下面的 package.json里是否有
“hexo-helper-live2d”: “^3.0.3”,依赖,有的话可以先卸载
使用命令:

npm uninstall hexo-helper-live2d     

2)之后再安装:

npm install --save hexo-helper-live2d  

注意:命令都是在你的博客主目录执行

3)安装完成之后在package.json会看到安装的model
下载各种动画model:
[地址]https://github.com/xiazeyu/live2d-widget-models.git

4)下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里
5)配置博客站点配置文件,_config.yml

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-epsilon2_1  #模板目录,在node_modules里
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #是否在手机进行显示

2.13 新建文章模板修改

首先为了新建文章方便,我们可以修改一下文章模板,可以将/scaffolds/post.md修改为如下代码:

---   
title: {{ title }}   
date: {{ date }}  
author:   
img:   
coverImg:  
top: false   
cover: false   
toc: true   
mathjax: false   
password:   
summary:   
keywords:   
tags:   
categories:  
---

2.14 关闭首页颜色变换

进入主题文件的 /source/css/matery.css文件中,搜索 rainbow来关闭颜色变换:

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色.即滤镜颜色,不想要可以全部注释,或者换成你喜欢的颜色 */ 
}
 @keyframes rainbow {
    /* 动态切换背景颜色.,不想要可以全部注释,或者换成你喜欢的颜色 */
}  

2.15 markdown书写文章用

1)下载markdown安装包
[点我下载]http://editor.md.ipandao.com/ 下载完成之后是一个压缩包,解压。
2)移植文件:

  • 将压缩包解压之后放到 主题文件夹的source->libs目录中。可以将文件夹定改为editorMd
  • 新建一个新的页面。在博客站点目录下新建一个MyMarkdown文件夹,并在文件夹下新建index.md文件。将下面的代码复制到index.md文件夹中。
---
title: editor.md
date: 2020-02-16 11:20:03
type: "MyMarkdown"
layout: "MyMarkdown"
---  

3)导入editor的css和js
打开主题目录下的_config.yml文件,将editor的js文件和CSS写入,如下

4)新建MyMarkdown.ejs文件
在主题文件夹下的layout文件夹中新建MyMarkdown.ejs文件。将下列代码复制到MyMarkdown.ejs文件中。

<link rel="stylesheet" href="<%- theme.libs.css.editormdCss %>">

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

    .editormd {
      top: 76px;
    }

    pre {
      padding: 0;
    }

    .editormd-menu > li.divider {
      overflow: inherit; 
      padding: 5px 0px;
    }

    header .nav-transparent {    /*修改当行兰样式*/
        background-image: linear-gradient(to right, #bf30a3 0%, #0f9d58 100%);
    }

    .editormd-form input[type="text"], 
    .editormd-form input[type="number"] {
        height: 15px;
        margin: 0px;
        font-size: 14px;
    }

    .editormd-form input[type="text"] {
        display: inline-block;
        width: 246px;
    }

    .editormd-dialog-container label {
      font-size: 14px;
      color: #444;
  }

    .editormd-dialog-container select {
      display: inline-block;
      background-color: rgba(255,255,255,0.9);
      width: 182px;
      border-radius: 2px;
      height: 25px;
  }

</style>

<div class="pd-header page-cover">
  <div class="editormd" id="my-editormd">
    <textarea style="display:none;"></textarea>
  </div>
</div>

<script src="<%- theme.libs.js.jquery %>"></script>
<script src="<%- theme.libs.js.editormdJs %>"></script>
<script  type="text/javascript">
  var myEditor;
  $(function() {  
      myEditor = editormd("my-editormd", {
        width   : "98%",
        height  : 840,
        syncScrolling : "single",
        path    : "/libs/editorMd/lib/",
       // theme: "dark",
      //  previewTheme: "dark",
      //  editorTheme: "pastel-on-dark",
        markdown: '',
        codeFold: true,
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持,默认关闭
        flowChart: true,             // 开启流程图支持,默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持,默认关闭,
        htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析,为了安全性,默认不开启   
    });
  });
</script>  

2.16hexo安装插件hexo-admin

hexo使用编辑文章时,若用其原生方式,则不便利,还好官网提供了一款插件hexo-admin界面化了markdown编辑器,只需要访问:http://127.0.0.1:4000/admin 即可方便快捷的进行博文编辑了,

1)安装hexo-admin插件npm install --save hexo-admin
2) 启动访问hexo s
http://127.0.0.1:4000/admin

2.17 Hexo添加博客导航页

1)新建页面,执行下面的命令

hexo new page navigate  

2)修改 navigate 目录下的 index.md 的格式

---
title: 个人常用网站
date:  2020-10-09 11:19:14  
type: "navigate"
layout: "navigate"   
---  

3)在主题配置文件_config.yml中添加个人常用网站

  导航:
    url: /navigate
    icon: fas fa-location-arrow  

4)在 matery/layout 下新建 navigate.ejs

 <div class="navi-height bg-cover pd-header "> 
    <div class=" link-box container"> 
        <!-- 搜索框 --> 
        <div class="baidu baidu-2 large-screen"> 
            <form name="f" action="https://www.baidu.com/" target="_blank"> 
                 <div id="Select-2"> 
                     <div class="Select-box-2" id="baidu"> 
                         <ul style="height: 46px;"> 
                            <li class="this_s">百 · 度</li> 
                            <li class="bing_s">必 · 应</li> 
                            <li class="google_s">谷 · 歌</li> 
                            <li class="baidu_s">百 · 度</li> 
                         </ul> 
                     </div> <input name="wd" id="kw-2" maxlength="100" autocomplete="off" type="text"> 
                 </div> 
                 <div class="qingkong" id="qingkong" title="清 · 空" style="display: none;">x</div> <input value="搜 · 索" 
                     id="su-2" type="submit"> 
                 <ul class="keylist"></ul> 
             </form> 
         </div> <!-- 链接 -->
         <div class="row tags-posts "> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> 
                     <div class="jj-list-tit">娱乐 · 影视</div> 
                     <ul class="jj-list-con">  
                         <li><a href="https:pixiv.net" class="link-3" target="_blank">Pixiv</a></li>  
                         <li><a href="https://www.bilibili.com/" class="link-3" target="_blank">哔哩哔哩</a></li> 
                         <li><a href="https://www.acfun.cn/" class="link-3" target="_blank">ACfun</a></li> 
                         <li><a href="https://www.spotify.com/" class="link-3" target="_blank">Spotify</a></li> 
                         <li><a href="https://awbw.amarriner.com/" class="link-3" target="_blank">AWBW</a></li> 
                         <li><a href=" https://music.163.com/" class="link-3" target="_blank">网易云音乐</a></li>
                     </ul> 
                 </div> 
             </div> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> 
                     <div class="jj-list-tit">社区 · Code</div> 
                     <ul class="jj-list-con"> 
                         <li><a href="https://github.com/" class="link-3" target="_blank">GitHub</a></li> 
                         <li><a href="https://coding.net/" class="link-3" target="_blank">Coding</a></li> 
                         <li><a href="https://juejin.im/" class="link-3" target="_blank">掘金</a></li> 
                         <li><a href="https://gitee.com/" class="link-3" target="_blank">码云</a></li> 
                         <li><a href="https://www.v2ex.com/" class="link-3" target="_blank">V2EX</a></li> 
                         <li><a href="https://www.jianshu.com/" class="link-3" target="_blank">简书</a></li> 
                         <li><a href="https://www.52pojie.cn/" class="link-3" target="_blank">吾爱破解</a></li> 
                         <li><a href="https://segmentfault.com/" class="link-3" target="_blank">思否</a></li> 
                         <li><a href="https://cloud.tencent.com/developer/" class="link-3" target="_blank">云+社区</a></li> 
                     </ul> 
                 </div> 
             </div> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> 
                     <div class="jj-list-tit">图片处理</div> 
                     <ul class="jj-list-con"> 
                         <li><a href="https://tinypng.com/" class="link-3" target="_blank">TingPNG</a></li> 
                         <li><a href="https://www.upyun.com/webp" class="link-3" target="_blank">又拍云Webp</a></li> 
                         <li><a href="https://www.iconfont.cn/" class="link-3" target="_blank">IconFont</a></li> <li><a href="https://fontawesome.com/" class="link-3" target="_blank">AweSome</a></li> 
                         <li><a href="https://wallhaven.cc/" class="link-3" target="_blank">超清壁纸</a></li> 
                     </ul> 
                 </div> 
             </div> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> <div class="jj-list-tit">实用 · 工具</div> 
                 <ul class="jj-list-con"> 
                     <li><a href="https://mdnice.com/" class="link-3" target="_blank">Nice编辑器</a></li> 
                     <li><a href="https://www.processon.com/" class="link-3" target="_blank">思维导图</a></li> 
                     <li><a href="https://cli.im/" class="link-3" target="_blank">二维码</a></li> 
                     <li><a href="https://my.openwrite.cn/" class="link-3" target="_blank">OW分发</a></li>  
                     <li><a href="https://www.guidgen.com/" class="link-3" target="_blank">GUID在线生成</a></li> 
                     <li><a href="https://console.upyun.com/purge/purge_url/" class="link-3" target="_blank">又拍云刷新网站</a></li> 


                 </ul> 
             </div> 
         </div> 
         <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
             <div class="card"> 
                 <div class="jj-list-tit">编程 · 学习</div> 
                 <ul class="jj-list-con"> 
                     <li><a href="https://www.oschina.net/" class="link-3" target="_blank">开源中国</a></li> 
                     <li><a href="https://htmldog.com/" class="link-3" target="_blank">HTML狗</a></li> 
                     <li><a href="https://www.icourse163.org/" class="link-3" target="_blank">中国大学慕课</a></li> 
                     <li><a href="https://www.imooc.com/" class="link-3" target="_blank">慕课网</a></li> 
                     <li><a href="http://www.wxapp-union.com/" class="link-3" target="_blank">小程序</a></li> 
                     <li><a href="https://blog.51cto.com/" class="link-3" target="_blank">51CTO</a></li> 
                     <li><a href="https://www.shiyanlou.com/library/" class="link-3" target="_blank">实验楼</a></li> 
                     <li><a href="https://spring.io/" class="link-3" target="_blank">Spring</a></li> 
                     <li><a href="https://blog.csdn.net/" class="link-3" target="_blank">csdn</a></li>
                 </ul> 
             </div> 
         </div> 
         <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
             <div class="card"> 
                  <div class="jj-list-tit">资讯 · 趋势</div> 
                  <ul class="jj-list-con"> 
                      <li><a href="https://www.huxiu.com/" class="link-3" target="_blank">虎嗅</a></li> 
                      <li><a href="https://insights.stackoverflow.com/" class="link-3" target="_blank">技术调查</a></li> 
                      <li><a href="http://www.asciiworld.com/" class="link-3" target="_blank">摸鱼</a></li> 
                      <li><a href="https://sspai.com/" class="link-3" target="_blank">少数派</a></li> 
                      <li><a href="https://zh.wikihow.com/" class="link-3" target="_blank">WikeHom</a></li> 
                      <li><a href="https://www.awesomes.cn/rank?sort=hot" class="link-3" target="_blank">前端趋势</a></li> 
                      <li><a href="https://github-trending.com/" class="link-3" target="_blank">GitHub趋势</a></li> <li><a href="https://www.tiobe.com/" class="link-3" target="_blank">编程趋势</a></li> 
                      <li><a href="https://trends.google.com/" class="link-3" target="_blank">Google趋势</a></li> 
                  </ul> 
              </div> 
          </div> 
          <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
              <div class="card"> 
                  <div class="jj-list-tit">常用· 其他</div> 
                  <ul class="jj-list-con">   
                      <li><a href="https://www.qvdv.com/tools/qvdv-guid.html" class="link-3" target="_blank">在线工具</a> 
                      <li><a href="http://zhongguose.com/" class="link-3" target="_blank">中国色</a></li> 
                      <li><a href="https://opensource.builders/" class="link-3" target="_blank">OpenSource</a></li> 
                      <li><a href="https://cloud.tencent.com/" class="link-3" target="_blank">腾讯云</a></li>
                      <li><a href="https://www.leancloud.cn/" class="link-3" target="_blank">leancloud</a></li>
                      <li><a href="http://127.0.0.1:4000/admin/" class="link-3" target="_blank">管理</a></li>
                      <li><a href="https://www.natfrp.com/user/" class="link-3" target="_blank">Sakura</a></li>
                  </ul> 
              </div> 
          </div> 
      </div> 
      <script> /*选择搜索引擎*/ $('.Select-box ul').hover(function () { $(this).css('height', 'auto') }, function () { $(this).css('height', '40px') }); $('.Select-box-2 ul').hover(function () { $(this).css('height', 'auto') }, function () { $(this).css('height', '46px') }); $('.Select-box li').click(function () { var _tihs = $(this).attr('class'); var _html = $(this).html(); if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } $('.baidu form').attr('action', _tihs); $('.this_s').html(_html); $('#kw').attr('name', _name); $('.Select-box ul').css('height', '40px') }); $('.Select-box-2 li').click(function () { var _tihs = $(this).attr('class'); var _html = $(this).html(); if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } $('.baidu form').attr('action', _tihs); $('.this_s').html(_html); $('#kw-2').attr('name', _name); $('.Select-box-2 ul').css('height', '48px') }); //清空输入框内容 $('.qingkong').click(function () { cls(); $(this).css('display', 'none') }); function cls() { var sum = 0; var t = document.getElementsByTagName("INPUT"); for (var i = 0; i < t.length; i++) { if (t[i].type == 'text') { ++sum; t[i].value = "";//清空 } } } //清空输入框按钮的显示和隐藏 function if_btn() { var btn_obj = document.getElementById("kw") || document.getElementById("kw-2"); var cls_btn = document.getElementById("qingkong"); var btn_obj_val; var times; //当元素获得焦点时 if (btn_obj == '' || btn_obj == null) { return false; //如果没有找到这个元素,则将函数返回,不继续执行 } btn_obj.onfocus = function () { times = setInterval(function () { btn_obj_val = btn_obj.value; if (btn_obj_val != 0) { cls_btn.style.display = "block"; } else { cls_btn.style.display = "none"; } }, 200); } //元素失去焦点时 btn_obj.onblur = function () { clearInterval(times); } } </script> 
  </div> 
</div> 
<style> 
    * { 
        margin: 0; 
        padding: 0; 
        font-family: "微软雅黑" 
    } 
    ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd { 
        margin: 0px; 
        padding: 0px; 
        font-size: 14px; 
        font-weight: normal; 
    } 

    img { 
        border-style: none; 
    }     

    li { 
        list-style: none; 
        float: left 
    }     

    a { 
        text-decoration: none 
    } 

    .card { 
       background-color: rgba(25, 240, 229, 0); 
       width: 96%; 
       margin-left: 2% 
     } 

     .baidu { 
         float: left; 
         margin-left: 100px; 
    } 

    .baidu form { 
        position: relative 
    } 

    .Select-box ul { 
        height: 40px; 
        position: absolute; 
        left: -1px; 
        top: 0px; 
        z-index: 9999; 
        background: #FFF; 
        border: 1px solid #ccc; 
        border-top: none; 
        overflow: hidden 
    } 

    .Select-box li { 
        width: 60px; 
        line-height: 40px; 
        font-size: 14px; 
        color: #484848; 
        border: 0; 
        cursor: 
        pointer; 
    } 

    .Select-box li:hover { 
        background: #3385ff; 
        color: #FFF; 
    } 

    .Select-box .this_s { 
        color: #317ef3; 
    } 

    .Select-box .this_s:hover { 
        background: #FFF; 
        color: #317ef3;    
    } 

    .qingkong { 
        position: absolute; 
        right: 120px; 
        top: 12px; 
        width: 18px; 
        height: 18px;
        background: rgba(0, 0, 0, 0.1); 
        border-radius: 18px; 
        line-height: 16px; 
        color: #666666; 
        cursor: pointer; 
        text-align: center; 
        font-size: 14px; 
        display: none; 
    } 

    .qingkong:hover {
        background: rgba(0, 0, 0, 0.2); 
    } 

    .qingkong:active { 
        background: rgba(0, 0, 0, 0.3);        
    } 

    .baidu-2 { 
        width: 100%; 
        height: 110px; 
        margin: 0 auto; 
        background: none; 
        padding-top: 50px; 
    } 

    .baidu-2 form { 
        width: 520px; 
        margin: 0 auto; 
    } 

    .baidu-2 input { 
        padding: 13px 8px; 
        opacity: 0.9; 
        font-size: 15px; 
    } 

    #Select-2 { 
        float: left; 
    } 

    .Select-box-2 { 
        text-align: center; 
        float: left; 
        position: relative; 
    } 

    .Select-box-2 ul { 
        height: 46px; 
        position: absolute; 
        left: 0px; 
        top: 1px; 
        z-index: 9999; 
        background: rgba(255, 255, 255, 0.9); 
        border: 1px solid #ccc; border-top: none; 
        overflow: hidden 
    } 

    .Select-box-2 li { 
        width: 60px; 
        line-height: 46px; 
        font-size: 15px; 
        color: #484848; 
        border: 0; 
        cursor: pointer; 
    } 

    .Select-box-2 li:hover { 
        background: #3385ff; 
        color: #FFF; 
    } 

    .Select-box-2 .this_s { 
        color: #317ef3; 
    } 

    .Select-box-2 .this_s:hover { 
        background: none; 
        color: #317ef3; 
    } 

    #kw-2 { 
        width: 335px; 
        outline: 0; 
        border: 1px solid #ccc; 
        background: rgba(255, 255, 255, 0.2); 
        color: #000000; 
        padding-left: 70px; 
        font-weight: bold; 
    } 

    /*修改搜索框样式*/ 
    #su-2 { 
        width: 90px; 
        background: blue; 
        border: none; 
        border-top: #3385ff 1px solid; 
        border-bottom: 1px solid #2d78f4; 
        color: #FFF; 
        cursor: pointer;
        /*去轮廓阴影*/ 
        outline: none; 
    } 

    /*光标移动到搜索框颜色*/ 
    #su-2:hover { 
        background: blue; 
        border-bottom: 1px 
        solid blue; 
    } 

    #su-2:active { 
        background: blue; 
        box-shadow: inset 1px 1px 3px blue; 
        -webkit-box-shadow: inset 1px 1px 3px blue; 
    } 

    .jj-list-tit { 
        font-size: 16px; 
        line-height: 25px; 
        color: #ffffff; 
        width: 100%; 
        padding-left: 38.5%; 
    } 

    .jj-list-con { 
        overflow: hidden; 
        margin: 0 auto 
    } 

    /*控制网站列表间距*/ 
    .jj-list-con li { 
        width: 31.333%; 
        margin: 1%; 
    } 

    .link-3 { 
        display: block; 
        background: rgba(0, 0, 0, .35); 
        color: #FFF; 
        font-size: 13px; 
        text-align: center; 
        line-height: 35px; 
        padding: 4px 0; 
        border-radius: 2px; 
        transition: all 0.2s 
    } 


    .link-3:hover { 
        background: rgba(0, 0, 0, .45); 
        font-size: 15px; 
        font-weight: bold 
    } 

    /*1栏 小于584*/ 
    @media only screen and (max-width: 584px) { 
        .navi-height { 
            height: 1300px; 
        } 

        .link-box { 
            margin-top: 5%; 
        } 

        .large-screen { 
            display: none; 
        } 
    } 

    /* 2栏 大于584 小于993px */ 
    @media only screen and (min-width: 584px) and (max-width: 993px) { 
        .navi-height { 
            height: 800px; 
        } 

        .link-box { 
            margin-top: 5%; 
        } 

        .large-screen { 
            display: none; 
        } 
    } 

    /*3栏 大于993px*/ 
    @media only screen and (min-width: 993px) { 
        .navi-height { 
            position: absolute; 
            width: 100%; 
            height: 100%; 
        } 
    } 

    /* 隐藏footer */ 
    .page-footer { 
        display: none; 
    } 
</style> 
<% if (theme.banner.enable) { %> 
<script> 
    // 每天切换 banner 图. Switch banner image every day. 
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg'; $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')'); 
    </script> 
    <% } else { %> 
    <script> 
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)'); 
</script> 
<% } %>

2.18 Hexo 博客订阅文章通知功能

进入站点根目录

npm install hexo-web-push-notification --save 

编辑站点配置文件_config.yml

webPushNotification:
  webpushrKey: "your webpushr rest api key"
  webpushrAuthToken: "your webpushr authorize token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

[注册账号]https://app.webpushr.com/signup

按照步骤操作
将第二步中所指的代码复制粘贴到你的 layout.ejs文件内,执行hexo clean&&hexo g&&hexo d部署即可!

部署之后可能会遇到无法正常发送通知的情况.

进入目录 node_modules/hexo-web-push-notification/index.js文件中第22行'summary': util.stripHTML(newPost.excerpt),这里取值取的是excerpt,改成summary即可。

修改前

json
var JSONFeed = {
        'title': newPost.title,
        'id': newPost.path,
        'date_published': newPost.date.format('L'),
        'summary': util.stripHTML(newPost.excerpt),
        'url': newPost.permalink,
        'tags': newPost.tags.data.map(function (v) { return v.name }),
        'categories': newPost.categories.data.map(function (v) { return v.name })
    }

修改后

json
var JSONFeed = {
        'title': newPost.title,
        'id': newPost.path,
        'date_published': newPost.date.format('L'),
        'summary': util.stripHTML(newPost.summary),
        'url': newPost.permalink,
        'tags': newPost.tags.data.map(function (v) { return v.name }),
        'categories': newPost.categories.data.map(function (v) { return v.name })
    }

文章作者: 不染轻裳
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 不染轻裳 !
评论
 上一篇

阅读全文

hexo部署到centos服务器
hexo部署到centos服务器 hexo部署到centos服务器
将hexo部署到服务器系统centos 7.6 64bit环境 git nginxgit安装与配置1. 安装依赖库和编译工具 yum install curl-devel expat-devel gettext-devel openssl
2020-10-24
下一篇 

阅读全文

hexo部署到本地
hexo部署到本地 hexo部署到本地
hexo部署到本地本地nodejs,淘宝云镜像,git环境搭建1.nodejs搭建教程:1.1下载: 下载地址:https://nodejs.org/en/download/ 一般的Windows系统都选择.msi 64位安装。(.ms
2020-10-24
  目录