修改 Hexo 源码实现默认主题的 CSS 文件自动压缩

开始使用 HEXO 时就发现默认主题 light 的 style.css 文件是没有经过压缩的，虽然文件本身不大，对博客加载速度不会有太大影响，但是作为喜欢折腾的程序猿，同时为了提升自身博客那么一点点的完美性，一直想去解决这个问题，由于工作比较忙，这个就一直压在心里，直到昨天写完博客，又开始折腾起来。下面记录了具体的修改方式，有需要的同学可以试试。

PS：本博的主题是基于默认主题稍作修改后的样式。

最开始想使用 Grunt 来压缩，但是这样只能在博客文件目录内引入 Grunt 插件。这就使得文件结构不那么清晰，作为比较追求完美的我，最后还是放弃了该方式。什么？你还不知道 Grunt，那么你 out 很久了，简单的说 Grunt 就是前端自动化构建工具，实现 JS、CSS 文件合并和压缩什么的，飞一般的赶脚啊，有木有。。还有什么 CSS 预编译，JS 单元测试，都可以轻松搞定，如果你在前端开发过程中还在不停按 F5 刷新页面（另外有个工具叫 F5，不推荐使用，免费版每十分钟的弹窗太揪心了），推荐使用 Grunt 的 watch 和 livereload 插件，监视文件自动刷新，用起来太爽了，个人非常感谢 NodeJS 和 Grunt 给前端带来的便利。

学习 ui-router 系列文章索引

Angular-Ui 对于 AngularJS 开发者来说是一个非常重要的工具，其中 UI-Router 又是重中之重。UI-Router 插件提供了“嵌套作用域等规则”等有用的特性，对于复杂项目开发非常实用，最近在项目中开始使用 UI-Router ，于是决定好好把它学习一遍，这些文章都来源于 UI-Router 的 github，由于能力有限，有些地方没有看懂，另外还有一些地方只能意译出来，希望大家在参观的过程中指出其中的错误。

  1. 学习 ui-router - 管理状态
  2. 学习 ui-router - 状态嵌套和视图嵌套
  3. 学习 ui-router - 多个命名的视图
  4. 学习 ui-router - 路由控制
  5. 学习 ui-router - 组件

学习 ui-router - 组件

参考原文：https://github.com/angular-ui/ui-router/wiki/The-Components

  • $state / $stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的 url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。

  • ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。

  • $urlRouter / $urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。

  • $urlMatcherFactory：将 url和占位符编译为UrlMatcher对象。除了$routeProvider支持的占位符语法之外，它还支持扩展语法，允许一个正则表达式指定占位符，并且能够提取命名参数和查询url的一部分。

  • $templateFactory - 通过$http / $templateCache来加载模板，供状态配置中使用。

学习 ui-router - 路由控制

参考原文：https://github.com/angular-ui/ui-router/wiki/URL-Routing

在你的应用中大多数状态都有与其相关联的 url，路由控制不是设计完成 state 之后的事后想法，而是开始开发时就应该考虑的问题。

这里是如何设置一个基本url。

1
2
3
4
5
$stateProvider
    .state('contacts', {
        url: "/contacts",
        templateUrl: 'contacts.html'
    })

当我们访问index.html/contacts时， 'contacts'状态将被激活，同时index.html中的ui-view将被'contacts.html'填充。或者，通过transitionTo('contacts')方法将状态转变到'contacts'状态，同时 url 将更新为index.html/contacts。

学习 ui-router - 状态嵌套和视图嵌套

参考原文：https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

状态嵌套的方法

状态可以相互嵌套。有三个嵌套的方法：

  1. 使用“点标记法”，例如：.state('contacts.list', {})
  2. 使用parent属性，指定一个父状态的名称字符串，例如：parent: 'contacts'
  3. 使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象）

学习 ui-router - 管理状态

参考原文：https://github.com/angular-ui/ui-router/wiki

ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。

  • 在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置
  • 通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为
  • 通过嵌套的方式来解决页面中的一些重复出现的部位

最简单的形式

模板可以通过下面这种最简单的方式来指定

1
2
3
4
<!-- in index.html -->
<body ng-controller="MainCtrl">
    <section ui-view></section>
</body>
1
2
3
4
// in app-states.js (or whatever you want to name it)
$stateProvider.state('contacts', {
  template: '<h1>My Contacts</h1>'
})

AngualrJS 使用笔记

元旦放假一天，由于太宅，于是有了新年第一个产出。主题来源于这一周在项目中使用 AngularJS 所遇到的问题，在此做一个使用笔记，以加深对 AngularJS 的理解。本人文笔不行，如文章被有幸浏览到，还请各位童鞋多多提意见。

AugularJS 简单介绍

AngularJS 由 Google 倾力打造的前端 JavaScript 工具。这里只说它是“工具”，没说它是完整的“框架”，是因为它并不是定位于去完成一套框架要做的事。更重要的，是它给我们提供了一种新的应用组织与开发方式。与其他许多模版系统最大的不同在于，他直接扩展了现有的 HTML 架构，透过声明式语言 (Directives Syntax)直接赋予 HTML 新的功能，让许多 AngularJS 自定义的 HTML 属性自然而然地融入 HTML 之中，并且赋予其意义。这是大多数模版系统不敢做的尝试。

另外，在其他模版系统当中，都会实作所谓的模板引擎(Template Engine)，它们通常都通过模版字符串与数据进行连接，生成最终的 HTML 字符串，并将结果通过innerHTML属性插入 DOM 树中。这意味着任何数据发生改变时，都需要重新将数据、模版合并成字符串，然后当作innerHTML插入 DOM 树中，所以存在一些从字符串转换成 HTML 的隐性成本。但是 AngularJS 是与众不同的，AngularJS 通过自身的编译引擎将 HTML 和自定义的 HTML 语法(Directives)，解析成 DOM 结构之后，AngularJS 会直接将原生的 DOM 当作网页片段模板，然后直接对 DOM 进行操作，大幅减少了转换成本，当然绑定效率可见比其他模板要高很多。

没有银弹，与其他所有的模版系统一样，这个世界没有银弹，不会有任何一套框架可以解决所有问题，AngularJS 也不例外。所以，要能理解 AngularJS 所擅长与不擅长的领域，可以有助于你评估与理解是否要采用 AngularJS 当作你未来的开发框架。

关于 Hexo 的若干问题

这几天折腾了一下Hexo，遇到一些问题，解决方案大都来自Google和Hexo官方文档，现在把这些问题汇总在这里，并附上解决方案，或者抛出自己遇到的问题，渴求解决方案。

后续会陆续更新我在使用过程中遇到的问题和使用心得。

注：这里不涉及Hexo的安装方法，具体的安装和使用可以参照下面教程：

给文章添加多个tag或category

第一次写Hexo的时候发现，如果这样写tags:前端,Hexo,HTML,JavaScript，tag显示不是按照逗号分隔的方式显示，而是整个显示为一个tag，这显然不是我们需要的，经过研究可以采用如下两种方式给文章添加多tag，对于添加category同样适用。

go2top