2016-07-29

记录博客的优化

最后更新： 2018-01-31

阅读次数：次

2016 年 7 月 26 日，我第一次接触 Hexo，之后便搭建了一个基于 Hexo 和 Github Page 的博客。

在这之前，我使用的是 Wordpress 搭建的博客，但是并没有写过几篇文章（>_<），不过确确实实地更改过 Wordpress 的主题（因为自己不太满意主题的样式和某些额外的功能）。

后来改的稍微好看了些，然后一个偶然的机会接触了 Hexo，觉得 Hexo 才是我想要的：本地 markdown 写文章，yilia 主题简洁好看，轻量，没有 Wordpress 那么臃肿等等。所以就放弃了 Wordpress，踏踏实实地使用 hexo 写文章。

^_^

有关 Hexo

hexo 各种 API 说明

hexo-workflow

2016-07-30

更改首页文章摘要展示部分的实现
- Yilia 主题的摘要部分的实现是要在你文章的 markdown 文件中插入 <!– more –>
文章内容（用来作为文章摘要）
<!– more –>
文章剩余内容
- 另一种实现摘要的方法是取自yelee 主题文章摘要的实现，这里，先感谢 yelee 主题的作者！

<!-- 首先找见自己yilia主题目录中的 article.ejs 文件，找到下面的代码 -->
<!-- 目录： .\themes\yilia\layout\_partial\article.ejs -->
<div class="article-entry" itemprop="articleBody">
  <% if (post.excerpt && index){ %> <%- post.excerpt %> <% } else { %> <%-
  post.content %> <% } %>
</div>

<!-- 然后用yelee主题的article.ejs文件中的下面的代码覆盖上面的代码即可 -->
<div class="article-entry" itemprop="articleBody">
  <% if (index && (post.description || post.excerpt)){ %> <% if
  (post.description){ %> <%- post.description %> <% } else { %> <%- post.excerpt
  %> <% } %> <% } else { %> <% if (is_page()){ %> <%- partial('_partial/page')
  %> <% } %> <%- post.content %> <% } %>
</div>

这两种方法相比之下，我更喜欢第二种方法，因为它更自由一点！^_^

调整分类的样式

2016-08-10

添加文章最后更新时间和许可协议

我觉得这个很有必要，技术类的文章你必须要保证它的时效性，一定要注明文章的发布日期和最后更改日期，这不仅是对他人的负责，更是对自己的负责！

yilia-article-info

<!-- .... -->
    <!-- begin -->
    <div class="article-moreinfo">
        <div class="lastModifiedDate">
            <span>最后更新：</span>
            <time datetime="<%= date_xml(post.updated) %>" itemprop="dateLastModified">
            <%= date(post.updated, null) %>
            </time>
        </div>
        <div class="copyright">
            <span>许可协议：</span>
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议</a>
        </div>
    </div>
    <!-- end -->

    <%- post.content %>
    <% } %>
</div>

将 begin 与 end 之间的内容添加到主题的 article.ejs 文件中<%- post.content %>代码的上面。

2016-11-04

添加回滚到顶部按钮

参考链接

添加鼠标单击数字上升特效

新建文件 user.js ，存放于 .\themes\yilia\source\js\user.js。

找到after-footer.ejs文件(\themes\yilia\layout\_partial\after-footer.ejs)，将<%- js('js/user') %>复制到文件最底部。

将after-footer.ejs文件中的<%- js('http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min') %>剪切，放到同目录下head.ejs文件的</head>代码上面即可。

//   user.js 的内容
// 数字上升特效
var _click_count = 0;
var colorArr = [
  "#00BCF3",
  "#00f3b1",
  "#f3b100",
  "#f30043",
  "#bcf300",
  "#f300bc",
  "#00f337",
  "#f33700",
  "#f37400"
];
var colorLen = colorArr.length;

// 直接给body一个事件好了
$("body").bind("click", function(e) {
  // 添加到页面的元素
  var $i = $("<b>").text("+" + ++_click_count);

  // 鼠标点击的位置
  var x = e.pageX,
    y = e.pageY;

  $i.css({
    "z-index": 99999,
    top: y - 15,
    left: x,
    position: "absolute",
    color: colorArr[Math.floor(Math.random() * colorLen)]
  });

  $("body").append($i);

  $i.animate(
    {
      top: y - 180,
      opacity: 0.5
    },
    1500,
    function() {
      $i.remove();
    }
  );

  e.stopPropagation();
});

2016-10-24

去掉所有的目录分类，只保留标签分类
去掉图片 fancybox、instagram 功能

2017-02-20

重新设计所有文章页面

这次主要更改了 .\themes\yilia\layout\_partial\archive.ejs 和 .\themes\yilia\source\css\_partial\archive.styl 这两个文件。

之前的 所有文章 页面有太多无关紧要的信息，我觉得归档页面只需注明文章标题和文章发表日期就行了，不需要注明文章的分类目录和标签。

2017-07-08

利用 js 获取文章的各个标题，然后在右侧显示

2017-08-21

成功将 hexo 博客的本地文件从 Windows 系统移植 Mac 系统（保证文章的创建时间一致）

2017-09-24

添加不蒜子统计并在页面上展示网站访问量
添加百度统计
添加 Disqus 评论框（需要翻墙）
去掉 MathJax，因为用的比较少
优化若干样式

2017-10-02

使用 hexo-douban 插件，生成自己豆瓣的读书和电影记录

2017-10-03

添加 README.md，为推送到 GitHub 上面的博客内容加个说明
- 将 README.md 放到 source 文件夹下，并更改根目录的配置文件中的 skip_render 字段

skip_render:
  * README.md

去掉没用的 hexo 插件（当初年少无知，跟着教程装了很多从没用到的插件）
重新配置了文章的永久链接
- 最开始是 /2016/09/22/文章名，现在是 articles/文章名
使用更简洁的 404 页面（404 页面）