Hello my blog 之 material

字数统计: 2.8k字   |   阅读时长≈ 11分

  知道Hexo很久了，半个月前更换Material主题生成静态文件时总是遇到问题没有成功，就一直拖到了今天，换了个旧版本总算是成功了，自己并不是经常写博客的人，希望搭个博客之后能经常更新吧哈哈哈哈哈哈。
  我深知自己很多技术都只是入门级别，希望自己能在学习路上永不停歇，搭个blog就偶尔写写学习总结，希望自己在技术的路上不断提升，写写生活体会，感受不同时间段里自己的变化，然后顺便安利安利林先生吧2333333333
  加油！生命不息，学习不止！

关于Markdown

一些遇到的问题

localhost:4000无法访问

1
hexo s

执行后提示成功，但是打开http://localhost:4000/却发现无法访问，后来通过上网搜索，刚好碰到一个与我的情况一样的朋友，遇到这个情况是因为电脑上正在运行着“福昕阅读器”。

  • 解决方法：在任务管理器中找到 FoxitProtect.exe ，将进程关闭。

如果不是上面这个原因，但出现端口被占用的情况，可以尝试以下方法（我还没试过）：

  • 在_config.yml内加上如下代码更改hexo-server运行时的端口号
1
2
3
4
server:
  port: 4001
  compress: true
  header: true

关于博客搭建

可优化项

  • 开启本地搜索功能
  • 添加标签云、关于我、友情链接等页面
    • 在侧边栏添加自定义页面
  • 给每篇博文生成二维码
    • 二维码未能正常识别，原因待查
  • 添加评论系统
  • 隐藏网页底部powered By Hexo
    • 开发不易，改成功后又改回来了
  • 添加微信支付宝打赏功能
  • 在文章底部增加版权信息
  • 添加更新时间、修改时间显示样式
  • 添加动态背景
  • 实现点击出现桃心效果
  • 点击爆炸效果
  • 博文压缩
  • 在右上角或者左上角实现fork me on github
  • 修改代码块自定义样式
  • 侧边栏社交小图标设置
  • 给网站加访客量/给文章加上访问量
  • 添加热度
  • 网站底部字数统计
  • 设置网站的图标Favicon
  • 实现统计功能
  • 自定义鼠标样式
  • 为博客加上萌萌的宠物
  • DaoVoice 在线联系
参考链接

下面列一些添加个性化配置时的操作

因为第一次接触Hexo，很多东西都不懂，也是第一次接触ejs，所以刚开始加个性化配置经常遇到问题，就想记录一下成功的操作。

  1. 添加标签云、关于我、友情链接等页面

一开始，我先按照别人的分享一步一步去新增标签云、关于我、友情链接等页面，到后面，我想自己再加一个作品集的页面，就试着研究了一下，最后也成功了，后面会说到。

  • 在主题的配置文件_config.yml中找到Pages，加入或修改相关内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    标签:
        link: "/tags"
        icon: local_offer
        divider: false
    Timeline:
        link: "/timeline"
        icon: send
        divider: false
    友情链接:
        link: "/links"
        icon: person_add
        divider: false
    About Me:
        link: "/aboutMe"
        icon: account_box
        divider: false

  • 创建标签云/Timeline/友情链接/关于我 页面

    • 在hexo目录（目录内有_posts、_data等文件夹）下的source文件夹内创建名为tags、timeline、links、aboutMe的文件夹
    • 在tags、timeline、links、aboutMe的文件夹内均建一个名为index.md的Markdown文件
    • 分别修改每个Markdown文件的内容为
1
2
3
4
5
---
title: 本站标签
date:
layout: tags
---
1
2
3
4
5
---
title: timeline
date:
layout: timeline
---
1
2
3
4
5
---
title: 友情链接
date:
layout: links
---
1
2
3
4
5
---
title: About me
date: 2018-09-01
layout: about
---

这里要注意的是title(对应的链接名称) 可修改，标签云/Timeline/友情链接的markdown文件中的layout不可修改，因为material主题已经在主题文件夹内的layout中的post.ejs中定义好了，对应的layout调用对应的页面ejs文件去生成相关页面。
layout为about没有相关定义的页面，所以会生成一篇普通文章，但是如果想作修改，就可以按照后方第2点说到的来做啦。

  • 创建友情链接页面还需要继续进行下面操作
    在hexo目录下的source文件夹内创建一个名为_data（不可以改名）的文件夹
    然后在文件内创建一个名为links.yml的文件,在其中添加相关数据即可，格式如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #Name: #将 Name 改为友情链接的名字，例如 Viosey。
    #    link: http://example.com #友情链接的地址
    #    avatar: http://example.com/avatar.png #为友情链接的头像
    #    descr: "这里填写对友情链接的描述"
    # 例如
    Viosey:
        link: http://example.com
        avatar: ../img/picture.jpg #路径是主题文件夹里的source的img
        descr: "这是描述文字"

添加多个友情链接，我们只需要根据上面的格式重复填写即可。

  1. 在侧边栏添加自定义页面
    这里以我的作品集为例

  • 在主题的配置文件_config.yml中找到Pages，加入或修改相关内容

    1
    2
    3
    4
    5
    6
    7
    我的作品集:
        # 如果不需要在站内自定义页面，可以直接贴地址跳转，直接贴地址的话，后面的步骤都不需要做了
        # link: "https://niccce.github.io/MyWorks/"
        #图标选择网站是https://material.io/icons/,只需要像下面一样把icon对应的配置项换掉就可以切换图标
        link: "/myWorks"
        icon: book
        divider: false

  • 创建我的作品集页面

    • 在hexo目录（目录内有_posts、_data等文件夹）下的source文件夹内创建名为myWorks的文件夹
    • 在myWorks的文件夹内建一个名为index.md的Markdown文件
    • 修改Markdown文件的内容为
      1
      2
      3
      4
      5
      ---
      title: 我的作品集
      date:
      layout: myWorks
      ---

  • 在hexo目录中找到themes文件夹，进入material主题文件夹，打开layout文件夹中的post.ejs文件，在<!-- Layouts -->下方适当位置添加下列代码

    1
    2
    3
    <% } else if(page.layout === 'myWorks') { %>
        <!-- Single myWorks Page -->
        <%- partial('_widget/page-myWorks') %>

  • 在hexo目录中找到themes文件夹，进入material主题文件夹，进入layout文件夹，在_widget文件夹中新建page-myWorks.ejs文件
    而我的作品集页面直接用了主题原有的page-links.ejs文件，只是复制了一下，改了名字，内容也做相应修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <ul class="md-links">
        <% if (site.data.myWorks) { %>
            <% for (var i in site.data.myWorks) { %>
                <li class="md-links-item">
                    <a href="<%= site.data.myWorks[i].link %>" title="<%= i %>" target="_blank">
                        <img src="<%= site.data.myWorks[i].avatar %>" alt="<%= i %>" height="72px"/>
                        <span class="md-links-title"><%= i %></span><br />
                        <span><%= site.data.myWorks[i].descr %></span>
                    </a>
                </li>
            <% } %>
        <% } %>
    </ul>

然后像友情链接页面一样，在_data（不可以改名）文件夹中新建了myWorks.yml文件，内容格式与links.yml一样即可。

当然，想自己另外写一个页面的朋友，自己编写page-myWorks.ejs文件的内容即可。

  1. 在文章底部增加版权信息

material主题自带了license的，只要在主题配置文件中的license中填入自己想展示的信息即可。
也可以按下面的方法自定义。

  • 在主题的配置文件_config.yml最后添加下列代码作为文章是否添加版权信息的总开关

    1
    2
    post_license:
        enable: true # or false

  • 在文章的 Front-matter 中添加如下字段，作为每篇文章是否添加版权信息的独立开关

    1
    post_license: true #or false

  • 在themes/material/layout/_partial/目录下新建post_license.ejs文件(具体代码可结合个人喜好作修改)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div>
       <br/>
       <ul id="post-license" class="post-license">
           <li class="post-license-author">
               <strong>本文作者：</strong>
               <a href="<%= config.url %>"><%= theme.author %></a>
           </li>

           <li class="post-license-link">
               <strong>本文链接：</strong>
               <a href="<%= page.permalink %>"><%= page.title %></a>
           </li>

           <li class="post-license-statement">
               <strong>版权声明： </strong>
               本文由 <%= config.author %> 原创，采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="license" target="_blank">署名-非商业性使用-相同方式共享（CC BY-NC-SA）4.0 国际许可协议</a>
    		   </br>转载请保留以上声明信息！
           </li>
       </ul>
    </div>

  • 在themes/material/layout/_partial/post-content.ejs文件最后添加下列代码

    1
    2
    3
    <% if(theme.post_license.enable && page.post_license !== false){%>
       <%- partial('_partial/post_license') %>
    <% } %>

  • 在themes/material/source/css/style.min.css中添加css样式(可结合个人喜好作修改)

    1
    2
    3
    4
    5
    6
    7
    #post-license {
       margin: 0.5em 4.5em 3em 4.5em;
       padding: 1em 1.5em;
       border-left: 3px solid #F44336;
       background-color: #F5F5F5;
       list-style: none;
    }

参考:

Hexo 折腾记

  1. 添加更新时间、修改时间显示样式
    • 找到themes/material/layout/_partial/Paradox-post-info.ejs文件的<!-- Author Name & Date -->字段
      1
      2
      3
      4
      5
      6
      <div>
          <strong><%= config.author %></strong>
          <!--<span><%= date(page.date, 'MMM DD, YYYY') %></span>-->
          <span>发表：<%= date(page.date, 'YYYY.MM.DD') %></span>
          <span>更新：<%= date(page.updated, 'YYYY.MM.DD') %></span>
      </div>
  2. 修改代码块自定义样式
    • 一直觉得这种代码块的展示颜色太淡了，让我不容易察觉，所以心血来潮就把原本灰色的字体改成了红色。
    • 先在浏览器里找到影响代码块的相应代码，再到themes/material/source/css目录里寻找那些代码所在的css文件，有原本的css文件还有min的css文件，我尝试了一下，只在原本的文件里修改，没有效果，要在min这个压缩的css文件里加，然后在生成（hexo g）一次文件，就可以看到效果。
      color: #f75858;

搭建时的部分注意事项

  • 换material主题时记得把主题配置文件_config.template.yml重命名为_config.yml

下面是Hello world，留着以后有需要看文档的时候用

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start
Create a new post
$ hexo new "My New Post"

加四个空格或Tab可以变成一块区域显示耶

More info: Writing

Run server
1
$ hexo server

More info: Server

Generate static files
1
$ hexo generate

More info: Generating

Deploy to remote sites
1
$ hexo deploy

More info: Deployment

赏

感谢支持！我会继续努力产出哒~

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true