MOxFIVE's Blog

图解网页设计！125个小优化提升网页可用性

2016-06-29T15:17:50.000Z

英文原文: 125 Easy Tweaks to Optimize Your Website’s Usability Today
中文译文: 有图有案例！125个提升网页可用性的优化小技巧

将英文原文整理于此，便于目录跳转、学习、研究和记笔记

Welcome to a huge resource on user experience (UX), user interfaces (UI), and interaction design.

Whether you’re designing a website or mobile app, you’ll learn 125+ tactics to optimize its usability.

I organized the tactics into various categories and strategies. Click a strategy to view examples and applications.

Control the User’s Focus and Attention

Emphasize a Point of Entry in the Interface

Every interface should have a clear starting point. Where should viewers look first? Make it clear.

Add Visual Contrast to Page Headlines

Guide Users Through a Visual Hierarchy

Control the user’s experience by guiding them through the interface. Where should they look first, second, and third? Establish that hierarchy.

Avoid Trapping Negative Space in the Composition

Use a One Column Layout

Overlap a Design Element to Emphasize Continuity

Design the Layout Using Gestalt Principles

We’re inundated with stimuli. According to gestalt psychology, we try to overcome that chaos by simplifying our perception. We group things. We categorize elements. We look for the whole.

Some principles include: similarity, proximity, closure, connection, continuity, and figure/ground.

Group Similar Functions or Menu Items by Proximity

Position Headlines Closer to Respective Sections

Constrain Headlines to Respective Sections

Depict Interface Changes Without Disrupting the User

Sometimes you’ll need to adjust the interface in front of the user. Make those changes noticeable, yet nondisruptive.

Visibly Animate Changes in the Interface

Differentiate Elements That Triggered an Error

Remove or Deemphasize Unnecessary Information

Our mental focus is finite. Unnecessary elements will deplete those resources. So keep users focused on the important information and functions.

Obscure Backgrounds Behind Popup or Modal Boxes

Maximize Data-Ink Ratios in All Imagery

Remove Unnecessary Borders From Design Elements

Remove Redundant or Self-Explanatory Instructions

Hide Infrequent But Necessary Settings, Features, and Information

Indicate Whether Content Exists Beyond the Fold

Nowadays, most browsers hide scroll bars when they’re inactive. You need “scroll hints” to communicate whether content exists beyond the fold.

Extend Elements Through the Fold

Add a Shadow to Indicate Depth

Indicate More Content With Words or Graphics

Guide Users Toward the End Goal

Now that you’ve captured and directed the user’s attention, help them achieve their goal.

Position Frequent Functions and Important Data Closer to Users

Predict the user’s intention. Then position that goal as close as possible.

Filter or Jump to Items That Users Are Searching

Create Smart Defaults Based on Frequently Chosen Input

Include Important Data on Product Listing Pages

Oftentimes, users will pogo stick. They click an item to look for information. Then they’ll return to the previous page to repeat that process with another item. That’s poor usability. Minimize pogo-sticking by placing important information on primary pages.

If you don’t like the extra clutter, you could include that information on hover (see next tactic).

Provide Useful Information on Hover

Expose Frequently Used Functions

Display Primary Data or Statuses in a Dashboard

Position Common Answers at the Top of Drop Down Lists

Communicate the Statuses of Interactions

Reduce uncertainty by conveying all pertinent information.

Display Current Progress and Time Remaining on Machine-Driven Tasks

Communicate the Current Phase of Complex or Lengthy Interactions

Reveal the Number of Steps Within a Sequence

Reveal the Number of Items in a Category

Offer Multiple Ways to Accomplish the Same Task

Users prefer different workflows. Create different paths for each goal, and let users choose the most appropriate path for their workflow.

Let Users Log In Via Username or Email

Offer Keyboard Shortcuts for Repetitive Functions

Let Users Drag and Drop Elements

Let Users Directly Edit Data

Communicate Requirements or Parameters for an Interaction

Prepare users for each interaction. What will they need? How do they proceed?

Describe the Input That You Require From Users

Give Real-Time Password Requirements and Feedback

Prepopulate Form Elements With Universal Parameters

Indicate Required and Optional Form Elements

Communicate the Expected Outcome of an Interaction

Before users interact with an element, they should understand the intended outcome.

Use Descriptive Button Labels

Show a Preview of the Output Based on the Current Input

Indicate or Preview the Next Item in a Sequence

Use Smart Menu Items to Clarify Actions

Reward or Reassure Users When They Make Progress

Are users making progress? Was their interaction successful? Let them know. And entice them to continue.

Maintain Congruency Between Links and Target Pages

Provide Quick Wins During Onboarding

Start Progress Bars Above 0%

Solve the User’s Core Intent

Oftentimes, we solve surface-level needs. Go deeper. Always brainstorm why users need certain features or information. Then solve the underlying intent.

Indicate Whether Your Office is Open or Closed

Indicate the Recency of Events

Reduce Mental Effort and Maintain Flow

In addition to guiding users, reduce their cognitive workflow. That way, you prolong their state of “flow.”

Minimize User Calculations

Never make the user perform math. Let the computer handle it.

Indicate the Number of Items Remaining

Convey the User’s Current Location Within the Interface

Interfaces are like airports. Without a “you are here” marker, users can get lost. So create those markers.

Highlight the Section Within the Navigation Menu

Provide Breadcrumbs or Sequence Maps in Complex Interfaces

Put Descriptive or Useful Information at the Beginning of Page Titles

Simplify Choice Tasks

Choices require effort. Reduce that effort by simplifying those tasks.

Indicate the Options That Most Users Choose

Provide a Curated List of Common Search Terms

Create Tight Categories Within Navigation Menus

Use Conventional Web Design Interfaces

Creativity is great. But don’t stray far from a conventional design. Users are accustomed to certain layouts and structures. Those conventional designs are popular because they work.

Use Conventional Navigation Menus

Put Utilities in the Top Right Corner

Provide Feedback After Each Interaction

When users interact with your interface, they should experience real-time feedback. Was something successful? Was it unsuccessful? What changed?

Display Success Messages After Important Interactions

Indicate Which Items the Cursor is Hovering Over

Minimize the Negative Effects of Waiting Periods

Eliminate all unnecessary waiting periods. If users need to wait, then minimize those negative effects.

Use Cool Colors in Loading Animations to Decrease Arousal

Blue reduces arousal (and increases relaxation). With blue loading elements, users perceive quicker loading times (Gorn et al., 2004). See my article on color for more detail.

Keep Users Engaged During Lengthy Waiting Periods

Prevent Users From Uploading Files That Are Incompatible

Display a Running Tally of Tasks Occurring

Minimize the User’s Reliance on Memory

Don’t force the user to remember anything. Keep all pertinent information in the open.

Keep Form Labels Visible At All Times

Avoid inline labels that disappear when users click inside the element.

Position Placeholder Text Outside the Form Element

Add Copy Buttons to Movable Input

Minimize Zig Zagging Eye Patterns

Reduce the amount of back-and-forth eye motions. Keep all complementary data within close distances.

Merge Congruent Data to Help Users Compare Items

Align Form Labels Directly Adjacent to Elements

Communicate Which Items Are Clickable or Interactive

Users should identify which elements are interactive (and how to interact with them). If you’re familiar with UX/UI, then you probably know signifiers and affordances, popularized by Don Norman in The Design of Everyday Things.

Design Buttons Using 3D Characteristics

Add Dotted Textures to Drag and Drop Elements

Use Icons and Symbols to Convey the Meaning of an Interaction

You can create most of these icons using various shapes in PowerPoint or Keynote.

Communicate Using Familiar Words and Symbols

In most cases, clarity trumps creativity or jargon.

Speak the Language of the User, Not the System

Offer a Translate Button When Foreign Languages Appear

Choose Colors That Are Semantically Congruent

When colors are incongruent, users have more trouble processing the information. Currently, meetup.com has great usability. However, they’re using red to confirm attendance (when they should be using green):

Maximize the Scannability of Your Interface

Most users will process your content by scanning it. And you shouldn’t fight it. Embrace it. Make your interface more conducive to scanning.

Keep Paragraphs Short and Highlight Key Terms

Position Important Information at Beginning of List Items

Add Row Stripes to Your Tables

Write Standalone Subheadlines

Break Up Text With Visual Variety

Maximize the Readability of Text

Obviously, text should be readable. But here are some tips to make it more readable.

Create Strong Contrast Between the Text and Background

Be careful displaying text over backgrounds. You might need to add contrast through an overlay or blur. Let’s add text over my beautiful face…

Left Align the Majority of Body Text

Use Consistent Patterns Throughout the Interface

With inconsistent patterns, users will need more time to learn your interface. Simplify it by maintaining a consistent layout and appearance.

Create a Front-End Style Guide

Create a document summarizing the design specifications for each element in your interface.

Other elements include:

Colors

Grids and Layouts

Placement and Positioning

Size and Shape

Labels and Language

Navigation

Tables

Lists

Links

Voice and Tone

Need inspiration? Look through Mailchimp’s style guide.

Keep Navigation Menus in the Same Position

Create Beautiful Designs With Visual Balance

Designs are more usable when they’re aesthetically pleasing — a principle called the aesthetic-usability effect (Kurosu & Kashimura, 1995).

Construct Designs Using Mathematical Principles

Choose Contrasting Fonts

When some people choose a matching typeface, they search for a font that looks similar to the existing one. But that’s the wrong approach. Oftentimes, the similarity will look like a mistake.

Instead, be deliberate. Choose typefaces with noticeable contrast. If you’re a newb designer, you can choose a serif vs sans-serif combination (serifs are the “twigs” on the ends of letters).

Maximize the Compatibility for All Users and Scenarios

Your users are different people with different goals. Design your interface so that it’s compatible for everyone.

Maximize Compatibility With the User’s Knowledge and Skill Level

Your users will be novices, experts, or a mixture. Design your interface accordingly.

Use the Proper Amount of Onboarding

There are four main onboarding strategies:

Those four approaches align nicely in a 2 x 2 matrix. Use the following diagram to choose the best approach for your interface.

Add Tooltips to Coach Novice Users Without Disrupting Expert Users

Use Card Sorting to Construct the Information Architecture

Use open card sorting if you want to see how users determine or conceptualize the menu categories.

Use closed card sorting if you want to see how users organize existing elements into pre-determined categories.

Maximize Compatibility With the User’s Workflow

Users will have different needs. Customize your interface toward those different workflows.

Let Users Control the Appearance of Data

Let Users Control the Order of Data

Other sorting criteria include:

Alphabetically

Availability

Categorically

Date

Distance

Popularity

Price

Relevance

Size

Let Users Control the Quantity of Data

Construct Personas to Identify Specific Workflows

Let Users Open Pages in New Tabs

Many users will page park. They’ll open tabs to read later.

Maximize the Accessibility of Your Interface

Make your interface accessible to people with disabilities. Not only is it a best practice, but you could also face legal consequences (depending on your product).

Use Semantic Labels in HTML5

Use Multiple Cues to Communicate Information

Around 8 percent of males are colorblind (Chan, Goh, & Tan, 2014). Never convey meaning through color alone. Always offer additional cues.

Maximize Compatibility for All Inputs and Extreme Cases

Users should be able to enter a wide range of input without consequences.

Resolve Unfavorable Outcomes in Automatically Generated Messages

Use Form Elements That Accept Various Formats of Input

Display Results That Solve the Searcher’s Need

Use Search Fields That Handle Typos, Synonyms, and Variants

Maximize Compatibility for All Mediums

Your interface should work in all environments (e.g., devices, browsers, etc.).

Customize Instructions for the User’s Browser

Use One-Window Drilldowns on Small Devices

Help Users Minimize and Overcome Potential Errors

In most interfaces, errors are unavoidable. If they do happen, help users overcome them quickly and easily.

Prevent the Possibility of Errors

When designing your interface, don’t immediately focus on solutions. Rather, try to make errors impossible to occur (referred to as poka-yoke).

Remove, Disable, or Replace Buttons When Users Click Them

Don’t tell users to click “Submit” once. If they can click more than once, they will. Instead, disable buttons when users click them. That way, duplicate submissions are impossible.

Only Offer Inputs That Are Acceptable

Use Responsive Enabling or Disclosure in Form Elements

Structure Text Fields to Match the Required Input

Monitor Signals That Are Typical in Errors

What are common errors in your interface? Identify signals that are inherent in those errors. Then monitor when those signals occur.

Search for Wording That Contradicts User Intent

Remind Users if They’ve Already Purchased an Item

Differentiate Powerful Functions to Minimize Slips

Users will lose focus. You can’t prevent it. However, you should visually distinguish powerful functions so that you minimize the possibility of damaging errors.

Separate Powerful Functions by Space or Color

Add Constraints to Significant Irreversible Changes

Provide Easy Ways to Revert or Escape

Always give users the option to return to a previous page or safe/recognizable area.

Use Undos Rather Than Confirmations

Offer an Escape Hatch on All Pages and Functions

For example, some drop down menus offer no escape hatch. When users click an option, they can’t leave it blank anymore.

Provide a Visible Close on Popups and Modal Boxes

Minimize the Negative Effects of Leaving Sequences

Users should be able to return to a sequence in the same position with the same data.

Save Data That Users Enter

Let Users Return to the Same Position in a Sequence

Extend Movable Paths and Clickable Areas

Users aren’t perfect. They make mistakes with the cursor. Create interfaces that are flexible and forgiving.

Add a Transparent Border to Small Buttons

Add a Slight Delay to Hover Pop Ups and Drop Down Menus

Hyperlink the Entire Menu Option Container

Hyperlink Primary Menus, List Items, and Complementary Icons

Oftentimes, users click items that aren’t clickable. Don’t fight those mistakes. Instead, add clickable functionality to those common areas.

Provide Useful and Supportive Error Messages

Never give a standard “there was an error” message. Explain the reason — and ideally the solution — to the error.

Explain the Reason for Validation Errors

Point Users Toward Documentation or Support for Complex Errors

Avoid Saying “You” in Error Messages

Keep a Record of the User’s Previous Actions

Remind users of their past actions in your interface.

Display the User’s Recent Searches

Use Different Colors for Visited Links

Indicate Which Items Users Have Already Viewed

Analyze User Behavior to Find Interface Issues

Always iterate and improve your interface. Use these tactics to get started.

Gather User Feedback in Appropriate Places

Create Alerts for Increases in 404 Errors

Identify Pages Where Users Are Pogo-Sticking

If a page is receiving many views (yet few unique views), then double check whether users are pogo sticking on that page

Final Thoughts

How I Compiled These Tactics

I usually focus heavily on academic research. However, the field of web usability is evolving so quickly. So I couldn’t find many useful and timely studies. Instead, I compiled the tactics by reading a bunch of UX/UI books.

Maybe I went a little overboard…

I read those books from cover to cover, looking for concrete actionable tactics. Afterward, I supplemented my list by (a) going through online guides (e.g., GoodUI has a great list) and (b) studying current platforms with strong reputations for usability (e.g., Mailchimp).

Here are the books from the previous image (from top to bottom):

The Design of Everyday Things by Don Norman

Simple and Usable by Giles Colborne

UX Strategy by Jaime Levy

Lean UX by Jeff Gothelf and Josh Seiden

Microinteractions by Dan Saffer

Interdisciplinary Interaction Design by James Pannafino

Don’t Make Me Think by Steve Krug

100 Things Every Designer Needs to Know About People by Susan Weinschenk

100 MORE Things Every Designer Needs to Know About People by Susan Weinschenk

Neuro Web Design by Susan Weinschenk

The Non-Designer’s Design Book by Robin Williams

Design for Emotion by Trevor van Gorp and Edie Adams

Usable Usability by Eric Reiss

Visual Thinking for Design by Colin Ware

The UX Book by Rex Hartson and Pardha Pyla

Designing Interfaces by Jenifer Tidwell

CSS Secrets by Lea Verou

Design Elements: A Graphic Style Manual by Timothy Samara

Graphic Design Solutions by Robin Landa

Universal Principles of Design by William Lidwell, Kristina Holden, & Jill Butler

Digital Design Essentials by Raj Lal

Universal Methods of Design by Bella Martin and Bruce Harrington

Envisioning Information by Edward Tufte

获取多说和 Disqus 文章评论数的方法

2016-06-14T13:19:34.000Z

前言

不少网站使用的是多说等第三方评论系统，有时候需要在特定位置显示对应文章的评论数，下面的方法可以快速获取多说和 Disqus 的文章评论数，所得为纯数字，方便排版布局。

See the Pen Count Comment for Duoshuo & Disqus by MOxFIVE (@MOxFIVE) on CodePen.

多说

多说提供了获取文章评论数的接口，需要做的只是填好相关参数，然后再从返回的 JSON 数据中提取出评论数即可

请求参数

short_name: 站点注册的多说二级域名，比如注册了 http://helloworld.duoshuo.com/, 则对应二级域名为 helloworld;
threads: 文章的 thread-key, 与评论框中 data-thread-key 一致。

返回数据示例

{
    "response": {
        "about/index.html": {
            "thread_id": "6205475504969401090",
            "channel_key": null,
            "thread_key": "about/index.html",
            "reposts": 0,
            "views": 0,
            "likes": 8,
            "dislikes": 0,
            "comments": 187
        }
    },
    "options": {
        "comments_zero": "暂无评论",
        "comments_one": "1条评论",
        "comments_multiple": "{num}条评论"
    },
    "code": 0
}

数据提取

需要的只是评论数 comments，这里使用 jQuery 的 getJSON 比较方便

$(function() {
    var shortName = "moxfive";
    var threads = "about/index.html";

    var jsonUrl = "http://api.duoshuo.com/threads/counts.jsonp?short_name=" + shortName + "&threads=" + threads +  "&callback=?";
    $.getJSON(jsonUrl, function(result) {
        $.each(result.response, function(i, field) {
            var value = field.comments;
            $(".duoshuo-count").text(value);
        })
    })
})

获得的值会显示在匹配的区域中

1	<span class="duoshuo-count"></span>

适用场景

适合只需显示当前文章评论数的页面；
若页面中需要分开显示多篇文章评论数，则按多说官方教程配置比较合适。JSON 解析法每篇文章都需要发起一次请求，文章一多相对效率就低了。

Disqus

加载相关 JS

域名中填入自己的 Disqus shortname，获取方式参考官方文档

<script id="dsq-count-scr" src="//<shortname>.disqus.com/count.js" async></script>

<!-- e.g. -->
<script id="dsq-count-scr" src="//moxfive.disqus.com/count.js" async></script>

显示评论数

这里介绍两种借助特定 Class 显示评论数的方法

<!-- 通过 `data-disqus-identifier` -->
<span class="disqus-comment-count" data-disqus-identifier="about/index.html"></span>


<!-- 通过 `data-disqus-url` -->
<span class="disqus-comment-count" data-disqus-url="http://MOxFIVE.xyz/about/index.html"></span>

identifier 和 url 的值如果不清楚，可以自行设置，方法参考官方文档

获取的评论数不正确，很可能是因为远程数据没更新，等等就好。

提取纯数字

上面方法显示的评论数是类似 1 Comment 这样的格式，这里可以把它转为纯数字格式 1
使用 jQuery 绑定事件，当评论数信息显示时去掉非数字字符即可。为了避免循环错误，这里新建了一个标签来显示评论数。

var $disqusCount = $(".disqus-comment-count");
$disqusCount.bind("DOMNodeInserted", function(e) {
    var num = $(this).text().replace(/[^0-9]/ig,"");
    $(this).after("<span class='count-comment'></span>");
    $(this).siblings(".count-comment").text(num);
    $(this).remove();
})

为 Hexo 添加可折叠的文章目录

2016-06-13T12:06:30.000Z

前言

Hexo 支持自动给文章加上目录，但默认生成的目录比较简陋，好在我们可以手动改进一下它，比如增加点击展开/收起多级目录的功能。

前期准备

目录生成

比如 Yelee 主题中用以下代码自带生成目录，使用 Hexo 自带的辅助函数 <%-toc(post.content)%> 来生成文章目录，同时将目录包裹起来以便修改样式。其他主题大同小异。

<div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <%- toc(post.content) %>
</div>

观察结构

审查元素，观察到生成后的目录 HTML 结构大致如下

<div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc">
        <li class="toc-item toc-level-2">
            <a class="toc-link" href="#标题1">
                <span class="toc-number">1.</span> <span class="toc-text">标题1</span>
            </a>
        </li>
        <li class="toc-item toc-level-2">
            <a class="toc-link" href="#标题2">
                <span class="toc-number">2.</span> <span class="toc-text">标题2</span>
            </a>
            <!-- 含子标题 -->
            <ol class="toc-child">
                <li class="toc-item toc-level-3">
                    <a class="toc-link" href="#子标题1"><span class="toc-number">2.1.</span> <span class="toc-text">子标题1</span>
                    </a>
                </li>
                <li class="toc-item toc-level-3">
                    <a class="toc-link" href="#子标题2"><span class="toc-number">2.2.</span> <span class="toc-text">子标题2</span></a>
                </li>
            </ol>
        </li>
    </ol>
</div>

功能构思

在每个包含子标题的大标题前插入小图标；
找出需要绑定点击事件的元素；
理清每次事件中子目录折叠和小图标切换的逻辑。

代码编写

添加小图标

var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
var $titleHasChild = $itemHasChild.children(".toc-link");
$itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i>");

var $iconToFold = $(".toc-item > .fa-caret-down");
$iconToExpand.addClass("hide");

这里在匹配的大标题前插入了两个 <i> 标签，用于表示目录 展开 和 收起 这两种状态；
标签使用了 Font Awesome 中的小三角形图标，可自行更换或者用 CSS 绘制；

点击小图标

var clickIcon = function(){
    $("#toc .toc-item > i").click(function(){
        $(this).siblings(".toc-child").slideToggle(100);
        $(this).toggleClass("hide");
        $(this).siblings("i").toggleClass("hide");
    })
}()

// 默认展开目录，所以隐藏掉表示“目录已展开”的图标（向下的小三角）
var $iconToFold = $(".toc-item > .fa-caret-down");
$iconToExpand.addClass("hide");

点击小图标折叠次级目录，同时切换到相应图标；

这里图标的显示状态是在 inline-block 和 none 中切换，用 toggleClass 比较合适。

点击大标题

var clickTitle = function(){
    $titleHasChild.dblclick(function(){
        $(this).siblings(".toc-child").hide(100);
        $(this).siblings("i").toggleClass("hide");
    })
    // After dblclick enent
    $titleHasChild.click(function(){
        var $curentTocChild = $(this).siblings(".toc-child");
        if ($curentTocChild.is(":hidden")) {
            $curentTocChild.show(100);
            $(this).siblings("i").toggleClass("hide");
        }
    })
}()

这里按我自己的习惯设计成 单击 即展开目录，而折叠目录需要 双击。因为点击某个目录时，代表我希望了解该目录的内容，所以不希望单击就把对应目录给收起了；

单击事件要在双击事件之后，要不点击事件会出现异常。

点击总标题

之前给目录区加了个总标题 文章目录，现在可以给赋予其函数，以便点击时展开/收起所有目录

var clickTocTitle = function(){
    var $iconToExpand = $(".toc-item > .fa-caret-right");
    var $iconToFold = $(".toc-item > .fa-caret-down");
    var $subToc = $titleHasChild.next(".toc-child");

    var $tocTitle = $("#toc .toc-title");

    // 当包含多级目录时再执行
    if ($titleHasChild.length) {
        $tocTitle.addClass("clickable");
        $tocTitle.click(function(){
            if ($subToc.is(":hidden")) {
                $subToc.show(150);
                $iconToExpand.removeClass("hide");
                $iconToFold.addClass("hide");
            } else {
                $subToc.hide(100);
                $iconToExpand.addClass("hide");
                $iconToFold.removeClass("hide");
            }
        })
    }
}()

CSS 样式

功能函数设置好后，再通过 CSS 调整下样式即可，样式根据主题风格和个人喜好自行调整；
下面是部分自用样式，可参考

/*小图标*/
#toc ol.toc li.toc-item i {
    display: inline-block;
    margin-left: -0.9em;
    width: 0.9em;
    color: #b3b3b3;
    font-weight: bold;
    cursor: pointer;
}
#toc ol.toc li.toc-item i:hover {
    color: #000;
}
/*关联图标的 Class*/
#toc ol.toc li.toc-item i.hide {
    display: none;
}

/*关联总标题的 Class*/
#toc .toc-title.clickable {
    cursor: pointer;
}
#toc .toc-title.clickable:hover {
    color: #88acdb;
}
#toc .toc-title.clickable:active {
    color: #d3d3d3;
}

/*其他目录相关*/
#toc {
    font-size: 0.9em;
    line-height: 1.65em;
}
#toc .toc-title {
    font-weight: bold;
    color: #808080;
}
#toc ol.toc {
    margin-left: 0;
    padding: 0.7em;
    padding-right: 0;
}
#toc ol.toc li.toc-item {
    list-style-type: none;
}

#toc ol.toc li.toc-item:hover {
    background: none;
}
#toc ol.toc a.toc-link {
    color: #808080;
}
#toc ol.toc a.toc-link:visited {
    color: #f48385;
}
#toc ol.toc a.toc-link:hover {
    color: #88acdb;
    text-decoration: none;
    background: rgba(158,188,226,0.21);
}
#toc ol.toc ol.toc-child {
    padding-left: 1.25em;
    margin: 4px 0;
}

让 Hexo 博客支持本地站内搜索

2016-05-31T05:50:19.000Z

前言

最近给 Yelee 主题加上了本地搜索功能，终于能在自己的博客里愉快地搜索资料了。大致思路来源于 HaHack 的教程，根据需要做了些调整。重新整理一下本地搜索折腾记录，分享于此。

索引生成

要使用搜索，必须先生成博客索引数据，Hexo 可以通过插件生成：

1	npm install --save hexo-generator-search

插件默认只索引文章(post)，要想页面(page)也能被检索，只需要在 Hexo 站点 _config.yml 中添加如下配置即可：

1
2
3

search:
  path: search.xml
  field: all

更多配置说明可到插件页面查看：hexo-generator-search

界面结构

因为自己博客是双栏，顺手就把搜索结果放在边栏中了，大致 HTML 结构如下：

<form id="search-form"> <!-- 搜索框相关 -->
    <input type="text" id="local-search-input" name="q" results="0" placeholder="search..." class="search form-control" autocomplete="off" autocorrect="off"/>
    <i class="fa fa-times" onclick="resetSearch()"></i> <!-- 清空/重置搜索框 -->
</form>
<div id="local-search-result"></div> <!-- 搜索结果区 -->
<p class='no-result'>No results found </p> <!-- 无匹配时显示，注意请在 CSS 中设置默认隐藏 -->

搜索重置按钮使用了 Font Awesome 图标，可按需更换

功能代码

基础代码

基础搜索函数 (jQuery) 来源于 HaHack 的教程，个人进行了些调整：
1.新标签中打开文章页面；2.减少截取的字符数；3.去掉部分非必要的代码

使用时将下边代码保存为 js 文件并在页面中的合适位置引入

// A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
// Copyright (C) 2015 
// Joseph Pan <http://github.com/wzpan>
// Shuhao Mao <http://github.com/maoshuhao>
// Edited by MOxFIVE <http://github.com/MOxFIVE>

var searchFunc = function(path, search_id, content_id) {
    'use strict';
    $.ajax({
        url: path,
        dataType: "xml",
        success: function( xmlResponse ) {
            // get the contents from search data
            var datas = $( "entry", xmlResponse ).map(function() {
                return {
                    title: $( "title", this ).text(),
                    content: $("content",this).text(),
                    url: $( "url" , this).text()
                };
            }).get();
            var $input = document.getElementById(search_id);
            var $resultContent = document.getElementById(content_id);
            $input.addEventListener('input', function(){
                var str='<ul class=\"search-result-list\">';                
                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                $resultContent.innerHTML = "";
                if (this.value.trim().length <= 0) {
                    return;
                }
                // perform local searching
                datas.forEach(function(data) {
                    var isMatch = true;
                    var content_index = [];
                    var data_title = data.title.trim().toLowerCase();
                    var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                    var data_url = data.url;
                    var index_title = -1;
                    var index_content = -1;
                    var first_occur = -1;
                    // only match artiles with not empty titles and contents
                    if(data_title != '' && data_content != '') {
                        keywords.forEach(function(keyword, i) {
                            index_title = data_title.indexOf(keyword);
                            index_content = data_content.indexOf(keyword);
                            if( index_title < 0 && index_content < 0 ){
                                isMatch = false;
                            } else {
                                if (index_content < 0) {
                                    index_content = 0;
                                }
                                if (i == 0) {
                                    first_occur = index_content;
                                }
                            }
                        });
                    }
                    // show search results
                    if (isMatch) {
                        str += "<li><a href='"+ data_url +"' class='search-result-title' target='_blank'>"+ "> " + data_title +"</a>";
                        var content = data.content.trim().replace(/<[^>]+>/g,"");
                        if (first_occur >= 0) {
                            // cut out characters
                            var start = first_occur - 6;
                            var end = first_occur + 6;
                            if(start < 0){
                                start = 0;
                            }
                            if(start == 0){
                                end = 10;
                            }
                            if(end > content.length){
                                end = content.length;
                            }
                            var match_content = content.substr(start, end); 
                            // highlight all keywords
                            keywords.forEach(function(keyword){
                                var regS = new RegExp(keyword, "gi");
                                match_content = match_content.replace(regS, "<em class=\"search-keyword\">"+keyword+"</em>");
                            })
                            str += "<p class=\"search-result\">" + match_content +"...</p>"
                        }
                    }
                })
                $resultContent.innerHTML = str;
            })
        }
    })
}

调用函数

search.xml 使用默认路径，可以直接把下面代码放到 js 文件中

1 2	var path = "/search.xml"; searchFunc(path, 'local-search-input', 'local-search-result');

上面的函数， search.xml 文件会跟随页面一起加载，如果索引文件太大，可能会影响页面加载速度，可以将其调整为激活搜索框时再下载所需文件

var inputArea = document.querySelector("#local-search-input");
var getSearchFile = function(){
    var path = "/search.xml";
    searchFunc(path, 'local-search-input', 'local-search-result');
}

inputArea.onfocus = function(){ getSearchFile() }

搜索重置

提供按钮用于清空搜索结果和重置搜索框，按钮已经绑定了点击事件，直接写函数就行

var $resetButton = $("#search-form .fa-times");
var $resultArea = $("#local-search-result");

inputArea.oninput = function(){ $resetButton.show(); }
resetSearch = function(){
    $resultArea.html("");
    document.querySelector("#search-form").reset();
    $resetButton.hide();
    $(".no-result").hide();
}

屏蔽回车

虽然用了表单但其实并没有数据要提交，所以这里需要手动屏蔽掉回车键

1	inputArea.onkeydown = function(){ if(event.keyCode==13) return false}

无搜索结果

无搜索结果时，显示指定的提示内容。
原本想在基础搜索函数上改，折腾无果，只能曲线救国，通过监听搜索区内容变动来判断是否有匹配的内容

$resultArea.bind("DOMNodeRemoved DOMNodeInserted", function(e) {
    if (!$(e.target).text()) {
        $(".no-result").show(200); 
    } else {
      $(".no-result").hide();
    }
})

CSS 样式

样式部分按自己喜好设计即可，下面是个人目前使用的样式，可参考

/*搜索框*/
.search {
  width: 68%;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  font-family: inherit;
  border: 2px solid transparent;
  border-bottom: 2px solid #d3d3d3;
  border-radius: 2px;
  opacity: 0.65;
  background: none;
}
.search:hover {
  border: 2px solid #d3d3d3;
  opacity: 1;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/*搜索重置按钮*/
#search-form .fa-times {
  display: none;
  padding: 1px 0.7em;
  box-shadow: 0 0 3px rgba(0,0,0,0.15);
  cursor: pointer;
  color: #808080;
}
#search-form .fa-times:active {
  background: #d3d3d3;
}
#search-form .fa-times:hover {
  zoom: 1.1;
  padding: 1px 0.6em;
  border: 1px solid #d3d3d3;
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
}

/*搜索结果区*/
#local-search-result {
  margin: auto -12% auto -6%;
  font-size: 0.9em;
  text-align: left;
  word-break: break-all;
}

#local-search-result ul.search-result-list li:hover {
  font-weight: normal;
}

/*单条搜索结果*/
#local-search-result li {
  margin: 0.5em auto;
  border-bottom: 2px solid #d3d3d3;
}
#local-search-result .search-result-list li:hover {
  background: rgba(158,188,226,0.21);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/*匹配的标题*/
#local-search-result a.search-result-title {
  line-height: 1.2;
  font-weight: bold;
  color: #708090;
}

/*搜索预览段落*/
#local-search-result p.search-result {
  margin: 0.4em auto;
  line-height: 1.2em;
  max-height: 3.6em;
  overflow: hidden;
  font-size: 0.8em;
  text-align: justify;
  color: #808080;
}

/*匹配的关键词*/
#local-search-result em.search-keyword {
  color: #f58e90;
  border-bottom: 1px dashed #f58e90;
  font-weight: bold;
  font-size: 0.85em;
}

/*无匹配搜索结果时显示*/
p.no-result {
  display: none;
  margin: 2em 0 2em 6%;
  padding-bottom: 0.5em;
  text-align: left;
  color: #808080;
  font-family: font-serif serif;
  border-bottom: 2px solid #d3d3d3;
}

一些不足

[ ] 如果文章很多，索引文件可能很大，无论是随页面下载还是激活搜索框再下载，似乎都不理想；

[ ] 搜索结果中全部内容都转成了小写，应该有办法忽略大小写的同时，保持文本原始大小写格式；

[ ] 使用自动补全填上的内容并不能立即显示搜索结果，待改进。

关于 Yelee 主题背景图的压缩与优化

2016-05-17T07:59:04.000Z

　　目前主题里可以使用多张随机大图作背景，如果不做好图片压缩和优化，可能会严重影响网站流畅性。下面简单介绍两种比较便捷的优化方案。

优化说明

请使用 jpg 后缀名的背景图片；
如果可以，使用 渐进式JPEG，让图片加载时逐渐清晰；
将图片品质尽量调低，一般可以压缩到几十kb（背景图半透明显示，因此细节并不重要）；

下图1 为目前主题自带背景图的分辨率和文件大小展示，图2 为渐进式图片加载示例

优化方案

PhotoShop

电脑上如果装有 PhotoShop, 那用其来优化图片真是再好不过了
PS 打开图片 → 文件 → 存储为 Web 所用格式 → JPEG 格式，品质 0，勾选 连续 （渐进式），最后存储，这样一张高压缩渐进式的 JPG 背景图就做好了

智图

智图是腾讯 ISUX 出品的在线图片优化工具，可以方便的对比优化前后的图片，同时可以自行调节图片品质，除了不能设置 渐进式JPEG , 其他基本满足背景图优化需要
进入网站后按提示上传图片，再调低图片品质，之后下载图片即可

因为主题背景图为 jpg 格式，其他格式请转为 jpg 再上传到该网站优化。转换格式方法很多，比如用 Windows 自带的画图打开图片然后另存为 jpg

方案对比

原图为 420kb，智图选择最低品质(10)后约为 129kb；
PhotoShop 选择品质 0，可以压缩到 62k，同时可以设为 渐进式JPEG；
因此，有条件的话更推荐使用 PS 压缩背景图。

几个国内专用的公共 DNS

2016-05-11T12:57:08.000Z

　　之前有个网站自己经常上不去，查了挺久才发现是 DNS 的问题，更换为公共 DNS 后访问恢复正常。由此可见，挑选一个合适自己网络的 DNS 还是挺有必要的。

DNS 简介

DNS 全称 Domain Name System，中文译为 域名系统，是因特网的一项服务，其域名服务器的分布式数据库中存储着因特网上域名和 IP 地址相互映射的关系，经解析器解析，使用户能够通过域名来访问互联网。

114DNS

114.114.114.114
114.114.115.115

官　网：http://www.114dns.com/
关键词：权威，高速，稳定，可靠，无劫持，防钓鱼，防病毒

阿里公共DNS

223.5.5.5
223.6.6.6

官　网：http://www.alidns.com/
关键词：快速，稳定，智能

腾讯 Public DNS +

119.29.29.29

官　网：https://www.dnspod.cn/Products/Public.DNS
关键词：快速，准确，稳定

百度公共DNS

180.76.76.76

官　网：http://dudns.baidu.com/intro/publicdns/
关键词：云防护，无劫持，更精确

oneDNS

南方首选：112.124.47.27
北方首选：114.215.126.16

官　网：http://www.onedns.net/
关键词：安全，快速，恶意网站拦截，广告过滤，上网加速

CNNIC SDNS

1.2.4.8
210.2.4.8

官　网：http://public.sdns.cn/
关键词：权威，安全，智能，高速

DNS 选用

在线查询

可以通过在线小工具测试一下 DNS 的解析速度，结果可以作为参考

本地优选

下载魔方DNS助手，可以方便地检测，选择和修改 DNS

如果更换 DNS 后网络异常，可以尝试刷新本地的DNS缓存

在百度分享中使用 Font Awesome 图标

2016-04-20T03:25:10.000Z

　　百度分享自带的图标有点简陋，而自己站点的图标基本来自 Font Awesome，为了美化和统一风格，对其中的图标进行了替换。

See the Pen Baidu Share with Font Awesome by MOxFIVE (@MOxFIVE) on CodePen.

前期准备

载入 Font Awesome

通过 CDN 加载 Font Awesome，一般放在页面头部

1	<link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

添加图标 Class

在官网图标列表中查询所需代码，添加到百度分享提供的 HTML 代码中
下面以微博、微信等为例: (fa 这个 class 要保留)

<div class="bdsharebuttonbox">
  <a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
  <a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
  <a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></i>
  </a>
</div>

样式修改

通过 CSS 修改图标的样式，以微博、微信、QQ 、more(分享到…) 为例，样式已尽可能精简

基本样式

/*部分样式可能会被百度分享自带样式覆盖，因而加上 `!important` 确保生效*/
.bdsharebuttonbox a, /*.bds_more 关联较多，需单独设置*/
.bdsharebuttonbox .bds_more {
  width: 50px; /*设置图标容器宽度*/
  height: 50px !important; /*宽等于高，正方形*/
  line-height: 50px !important; /*行高等于图标容器高度，垂直居中*/
  text-align: center; /*水平居中*/
  padding-left: 0 !important; /*覆盖自带样式，消除内边距*/
  font-size: 34px !important; /*图标大小*/
  text-decoration: none; /*去掉图标下划线*/
  color: #fff !important; /*图标颜色*/
}

.bdsharebuttonbox a:hover, /*鼠标悬停时图标颜色*/
.bds_more:hover {
  color: #fff !important;
}

图标背景

.bds_tsina { /*新浪微博图标背景色*/
  background: #db332f !important;
}
.bds_sqq { /*QQ*/
  background: #1cbcef !important;
}
.bds_weixin { /*微信*/
  background: #8cdc49 !important;
}
.bds_more { /*分享到...*/
  background: #8cbcf5 !important;
}

CSS 设置文本省略 ellipsis (…)

2016-04-18T12:25:35.000Z

　　在 CSS 中应用 ellipsis 属性，可显示省略符号(…)来代表被修剪的文本。

See the Pen text-overflow: ellipsis by MOxFIVE (@MOxFIVE) on CodePen.

单行省略

样式代码

1 2	<span>CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.</span>

span {
    display: block;
    width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

代码简析

text-overflow: ellipsis；
// [必需], 文本溢出时显示省略号(…)

display: block;
// [可选], `ellipsis` 只应用于 `block containers`（块级容器），
// 如果所在 HTML 标签非块级，那需要设置 `display` 属性

white-space: nowrap;
// [必需], 将文本限制在一行内

overflow: hidden;
// [必需], 隐藏溢出的内容
// 可按需要仅设置 `overflow-y` 或 `overflow-x`

width: 14em;
// [可选], 限制容器宽度
// 可使用 `max-width`

多行省略

在指定行数后，才使用省略号代替溢出文本，这可以借助 -webkit-line-clamp 属性实现

-webkit- 内核属性，不支持 IE 和 Firefox 浏览器查看兼容性

样式代码

1 2	<p>CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.</p>

p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 15em;
    line-height: 1.5;
    text-overflow: ellipsis;
    overflow : hidden;
}

代码简析

// 必需的属性
display: -webkit-box; // 将元素设为弹性盒模型
-webkit-line-clamp: 2; // 文本最大行数
-webkit-box-orient: vertical; // 模型内元素垂直排列
text-overflow: ellipsis;
overflow : hidden;

// 可选的样式
width: 15em; // 限制容器宽度
line-height: 1.5; // 建议增大行高，避免文字被腰斩

Hexo 页面自动刷新与移动端调试

2016-03-26T16:17:50.000Z

前言

经常本地调试 Hexo 主题, 如果有工具能监视文件更改幷自动刷新页面，那一定能提高不少效率，Browsersync 就是这样一款浏览器同步测试工具。

自动刷新

安装 Browsersync

Browsersync 依赖包较多，Mac 和 Linux 中建议加上 sudo 避免安装时因权限不足而报错

1	npm install -g browser-sync

安装结束后执行下面命令，能显示对应版本则表示安装成功

1	browser-sync --version

如果显示无此命令，请尝试使用淘宝 NPM 镜像，或者全局科学上网后再安装

安装 Hexo 端插件

要把 Browsersync 应用到 Hexo 上，还需要安装一个小插件 hexo-browsersync 。命令行中进入 Hexo 根目录，执行以下命令:

1	npm install hexo-browsersync --save

安装后像往常一样执行 hexo s 开启本地服务器，当相关文件被修改或者保存时，关联的浏览器页面会自带刷新

一些不足

变动后将重新加载整个页面，不能局部刷新；
使用 Hexo 自带服务器时，无法在移动端调试；
偶尔会报错，需要多保存几次；

移动端调试

如果只是为了自动刷新页面，或许使用 LiveReload 就够了。Browsersync 真正强大之处在于其多设备调试功能，局域网设备访问同一网址，页面同步变动。

生成静态文件

要在移动端调试，需要先生成 Hexo 站点的静态文件

hexo g

开启服务

命令行进入静态文件所在的文件夹，默认为 Hexo 根目录下的 public，然后执行以下命令：

1	browser-sync start --server --files "css/.css, .html"

输入完毕按回车，会自动打开网站首页
更多命令行用法请参考官方文档

局域网访问

回到命令行窗口，External 那行的 IP 地址就是局域网地址，打开你的手机平板访问即可，各种操作和文件修改都会同步变动，调试极为便利

此种方式不是直接修改主题源文件，所以平时一般使用 Hexo 本地服务修改样式，有需要时再生成静态文件在移动端测试页面效果

Markdown 表格样式调整与自适应优化

2016-03-04T12:39:17.000Z

　　Markdown 写的表格最终会被解析成 HTML 代码，如果使用的编辑器支持自定义 CSS，就能方便的调整样式。如果可以引入 JavaScript，样式自适应也能较好地实现。

See the Pen Table style by MOxFIVE (@MOxFIVE) on CodePen.

样式调整

基础概念

<table>: 表格
<thead>: table header 表头区
<th>: table headings 表头单元格内容
<tbody>: table body 表格内容区
<tr>: table row 表行
<td>: table data 单元格内容

基本样式

table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度，避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}

table th,
table td {
  height: 35px; /*统一每一行的默认高度*/
  border: 1px solid #dedede; /*内部边框样式*/
  padding: 0 10px; /*内边距*/
}

表头样式

table th {
    font-weight: bold; /*加粗*/
    text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
}

隔行变色

使用选择器选取复数行设置背景色。一般 Markdown 表格编译后都有 <tbody> 包裹内容，那下面就相当于从表格第二行开始计数

1
2
3

table tbody tr:nth-child(2n) {
    background: rgba(158,188,226,0.12); 
}

悬浮变色

鼠标悬浮时该行改变背景色

1
2
3

table tr:hover {
    background: #efefef; 
}

自适应优化

表格用 Markdown 书写，编辑器解析，因而只能在已经生成好的代码上进行自适应优化。

表头不换行

设置表头单元格内容不换行，这样可以通过表头控制该列的最小宽度，避免浏览器窗口缩小时内容被压缩得太紧

1
2
3

table th {
    white-space: nowrap; /*表头内容强制在一行显示*/
}

首列不换行

表格第一列单元格内容不换行，多数情况下表格首列不应该被压缩换行

1
2
3

table td:nth-child(1) {
    white-space: nowrap; 
}

表格滚动条

添加 JavaScript 代码，用一个 <div> 把表格包裹起来，父元素宽度不足时显示横向滚动条，避免表格撑破布局

[].slice.call(document.querySelectorAll('table')).forEach(function(el){
    var wrapper = document.createElement('div');
    wrapper.className = 'table-area';
    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);
})

jQuery

1	$("table").wrap("<div class='table-area'></div>");

同时添加如下 CSS

1
2
3

.table-area {
    overflow: auto;
}

To be added

前端工程化工具初选

2016-02-16T10:53:03.000Z

　　面对日益纷杂的前端工具，作为新人常感无从下手。经过一番检索和简单对比，再结合自己的喜好，筛选了将要学习和使用的工具，以适应日益工程化、专业化的 Web 前端开发工作。

Library & Framework | 库与框架

jQuery

jQuery UI: A curated set of user interface interactions, effects, widgets, and themes

Vue.js: 数据驱动的组件，为现代化的 Web 界面而生

React.js: A JavaScript library for building user interfaces

React Native: A framework for building native apps using React

The Build System | 构建工具

The Build System is used to build, preview and test your project.

gulp.js: Automate and enhance your workflow

The Module Bundler | 模块打包器

Packs many modules into a few bundled assets.

webpack: Take modules with dependencies and generate static assets representing those modules

The Package Manager | 包管理

The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts.

npm: Node Package Manager.

CSS Extension | CSS 处理

Provide an efficient, dynamic, and expressive way to generate CSS.

Stylus: Expressive, robust, feature-rich CSS language built for nodejs

PostCSS: Transforming styles with JS plugins

JavaScript Module | JavaScript 模块化

ECMAScript 6 Module

JavaScript Template | JavaScript 模板引擎

Generate HTML markup with plain JavaScript.

EJS

Test Framework | 测试框架

Mocha: a simple, flexible, fun JavaScript test framework for node.js and the browser

Chai: a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework

The scaffolding tool | 手脚架

Scaffolds out a new application, writing your build configuration and pulling in relevant build tasks and package manager dependencies that you might need for your build.

Yeoman

集成方案

FIS: 解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

Container | 容器

Docker: Build, Ship, and Run Any App, Anywhere

关联 GitHub, 让 Hexo 支持查看文章更新历史

2016-01-10T14:38:01.000Z

前言

Hexo 的文章源文件就是一个个 Markdown 文本，自己一直把这些文件备份在 GitHub 上。渐渐发觉，如果只把 GitHub 当作普通网盘，那真是有点大材小用了。于是稍作折腾，成功地把 GitHub 上的备份关联到主题中。现在，在文章文末版权区，可以很方便地跳转查看文章更新记录、历史版本以及下载源文件。

文件处理

文件命名

为了便于文章识别和自动关联文件，文章 Markdown 的文件名应该符合规范。
建议使用文章建立日期.固定链接 YY-MM-DD.permalink.md 的形式。
在文章 [Front-matter] 中设置固定链接 permalink，然后填写文件名，例如本文完整文件名为 2016-01-10.hexo-post-version-control.md
为什么不使用文章标题作为文件名:

一是因为标题偶尔会变动，修改相对麻烦；二是标题可能包含不能用作文件名的符号，导致关联出错。

文件备份

把 hexo/sources/_posts 文件夹同步备份到你的 GitHub 上，不熟悉 Git 的可使用 GitHub Desktop 操作，具体方法自行搜索。

代码添加

把下面 EJS 代码添加到主题文章模板合适位置中，Yelee 主题是添加在文末版权区中。参考备份文件在 Github 的链接修改前半部分地址。

yelee/layout/_partial/post/nav.ejsPost Version Control

<% if (post.backup != false){ %>
    <p>
        <span>更新历史:</span><i class="fa fa-github"></i>
        <a href="<文章 Blame 地址>/<%= post.date.format("YYYY-MM-DD") %>.<%= post.slug %>.md" title="顺序查看文章各部分修改记录" target = "_blank">Blame</a>,
        <a href="<文章 History 地址>/<%= post.date.format("YYYY-MM-DD") %>.<%= post.slug %>.md" title="查看文章有关更新记录" target = "_blank">History</a><span class="raw">文本模式:</span><i class="fa fa-file-text-o"></i>
        <a href="<文章 Raw 地址>/<%= post.date.format("YYYY-MM-DD") %>.<%= post.slug %>.md" title="查看 & 下载文章 Markdown 原始文本" target = "_blank"> .md Raw</a>
    </p>
<% } %>

代码简析

<!-- 不设置 backup: false 则默认显示 -->
<% if (post.backup != false){ %>
    <p> 
        <span>更新历史:</span><i class="fa fa-github"></i>
        <!-- 不同功能替换前面超链接即可，文件名不变 -->
        <!-- 文件名生成: <%= post.date.format("YYYY-MM-DD") %>.<%= post.slug %> -->
        <a href="<文章 Blame 地址>/<%= post.date.format("YYYY-MM-DD") %>.<%= post.slug %>.md" title="顺序查看文章各部分修改记录" target = "_blank">Blame</a>,
        <a href="<文章 History 地址>/<%= post.date.format("YYYY-MM-DD") %>.<%= post.slug %>.md" title="查看文章有关更新记录" target = "_blank">History</a><span class="raw">文本模式:</span><i class="fa fa-file-text-o"></i>
        <a href="<文章 Raw 地址>/<%= post.date.format("YYYY-MM-DD") %>.<%= post.slug %>.md" title="查看 & 下载文章 Markdown 原始文本" target = "_blank"> .md Raw</a>
    </p>
<% } %>

Blame

顺序列出文章内容，左侧显示各部分 commit 信息，最后修改时间等。

History

列出与该文件相关的更新记录 (commit)，按路径匹配。我一般直接就用提交时间作为 commit 信息了，想要更直观查看变动的可以在提交时书写更完善的 commit 信息。

.md Raw

在线查看或者直接下载文章原始 Markdown 文本。

后记

这是半自动的版本控制，需要手动把文章同步备份到 GitHub；

代码部分的变动基于 Yelee 主题，其它主题用户可以参考另一篇文章的方法，自行添加代码到合适位置；

小图标来自 Font Awesome，需主题支持才会正常显示；

本文不详解 Hexo 基础知识，有设置项不理解的请先阅读 Hexo 官方帮助文档。

为 Hexo 主题添加评论模块 — Disqus, 多说, 友言

2016-01-01T17:26:48.000Z

前言

目前自己的主题 Yelee 已支持使用 Disqus, 多说和友言评论，代码逻辑和配置也做了些优化，应该是比较完善了。简单分离整理一下，分享于此，方便大家添加到自己制作或使用的主题中。

文件结构

参考以下文件结构把复制的代码和下载的文件放到合适的位置，必要时自行修改文件引用位置。

yelee/_config.yml
-----/layout/_partial/article.ejs
---------------------/comments/disqus.ejs
------------------------------/duoshuo.ejs
------------------------------/youyan.ejs

文件下载

Hexo 评论模块（Disqus, 多说, 友言）.zip by MOxFIVE

关联模块

在合适位置添加以下代码，以便引入评论模块代码。代码使用我比较熟悉的 EJS 书写，使用 Swig, Jade 等其他模板的，请自行转换。

<% if (!is_home() && post.comments){ %>
    <% if (theme.duoshuo.on) { %>
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <% } else if (config.disqus_shortname) { %>
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
    <% } %>
<% } %>

代码简析

<!--//如果不是首页且没使用 `comments: false` 关闭评论，则尝试加载评论 -->
<% if (!is_home() && post.comments){ %>
    <!--//配置中启用多说时，导入相应代码 -->
    <% if (theme.duoshuo.on) { %> 
      <!--//导入duoshuo.ejs时，同时指定其中几个变量的内容。 -->
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <!--//配置中仅启用友言时，导入相应代码 -->
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <!--//配置中仅启用 Disqus 时，导入相应代码 -->
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <!--//以上皆关闭且 Hexo 配置中设置了 disqus_shortname 时，导入相应代码 -->
    <% } else if (config.disqus_shortname) { %>
        <!--//文件分离和变量的使用，使代码能较好的兼容 Hexo 主配置 -->
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
    <% } %>
<% } %>

新评论系统添加

如果你想使用畅言或者其他社会化评论系统，并能灵活切换，请参考上文，新加一个 else if 判断引入服务商提供的代码，同时参考后文的配置添加新的设置项。

配置更新

在主题中添加以下设置项进行评论功能的配置。评论设置为二级选项，因为之前不少人设置了 duoshuo: true ，结果都进群聊了。要启用某一个评论系统，只需去掉 on 前的 “#”，同时按照说明设置好对应个人账号信息即可。

# >>> Conments 评论系统 <<<
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统，其他保持禁用。

disqus: 
  #on: true
  shortname: 
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if 
  # you have set "disqus_shortname" in your site's "_config.yml" 

duoshuo: 
  #on: true
  domain: 
  # 是否开启多说评论，http://duoshuo.com/create-site/
  # 使用上面网址登陆你的多说，然后创建站点，在 domain 中填入你设定的域名前半部分
  # http://<要填的部分>.duoshuo.com (domain只填上<>里的内容，不要填整个网址)

youyan:
  #on: true
  id: 
  # 是否开启友言评论，http://www.uyan.cc/index.php
  # id 中填写你的友言用户数字ID，注册后进入后台管理即可查看
  # 友言服务在 Web 环境下运行，普通本地环境无法查看，请部署后在线上测试。

# >>> <<<

模块代码

模块代码已附在下载文件中，在此同时列出备用。依旧是使用 EJS 编写，引入一些信息，设置了几个变量，使用其他模板引擎请自行转换。所有评论模块都设置了 id="comments"，以便有需要时通过锚点定位跳转到评论区。

Disqus

<section id="comments">
  <div id="disqus_thread"></div>
    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<%= shortname%>'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>

多说评论

<div class="duoshuo" id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= key%>" data-title="<%= title%>" data-url="<%= url%>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"<%= theme.duoshuo.domain%>"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
    <!-- 多说公共JS代码 end -->
</div>

友言评论

<section class="youyan" id="comments">
    <div id="uyan_frame"></div>
    <script src="http://v2.uyan.cc/code/uyan.js?uid=<%= theme.youyan.id%>"></script>
</section>

关于 Hexo 配置文件中的 true 和 false

2016-01-01T15:55:13.000Z

　　在使用文件 “_config.yml” 对 Hexo 进行配置时，大家习惯于填写 true 和 false 来启用/停用某个功能模块。不过还有几种方法可以表示逻辑真假(boolean)，掌握后可以更灵活地进行功能配置。

false

如果配置文件中有一个选项 search_box，那下面几种写法都表示该选项逻辑值为假：false。

即当使用 if (theme.search_box) 进行判断时返回 false.

1－常规写法

1	search_box: false

2－前面加 “#”，把该选项变为注释，判断时自然也就 false 了

1	#search_box: false

3－用 0 代替。填写 0 时（不含引号），该项会被判断为 false

1	search_box: 0

4－选项留空。留空默认也会判断为 false

1	search_box:

true

下面几种写法都表示该选项逻辑值为假：true。即当使用 if (theme.search_box) 进行判断时返回 true.

1－常规写法

1	search_box: true

2－用 1 代替。填 1 时，该项会被判断为 true

1	search_box: 1

3－填 0 之外的其他字符，通常也会被判断为 true

1
2
3

search_box: Hexo Yelee
search_box: 998
search_box: "0"

后记

为了减少误解，在 Yelee 主题的配置中我基本还是使用常规写法。如果大家都能了解这些写法的话，应该能更开心地折腾 Hexo。对配置还有兴趣的，可以去看看 YAML 语法说明，Hexo 的配置文件默认就是使用 YAML 编写。

Anki 记忆库之 Excel 快捷键大全

2015-12-22T15:15:00.000Z

前言

如果微软 Office 系列套件里只能保留一个，我会选择保留 Excel。只需要学一点基础的 Excel 知识，就能直观地感受到信息技术所带来的高效生产力。有些软件，掌握了它的快捷键，不仅能较全面地了解它的功能，也能极大地提升使用效率。Excel 就属于这类软件。

记忆库使用

所有快捷键已整理为 Anki 记忆库，下载后导入即可开始使用。

下载: Excel 快捷键大全 (Windows) for Anki

释义默认中英对照显示，可按需隐藏。

常用快捷键

列出自己平时使用最频繁的10个 Excel 快捷键。

-	快捷键	说明
1	CTRL+D	使用“向下填充”命令将选定范围内最顶层单元格的内容和格式复制到下面的单元格中。
2	CTRL+ENTER	使用当前输入的条目填充选定的单元格区域。
3	F2	编辑活动单元格并将插入点放在单元格内容的结尾。如果禁止在单元格中进行编辑，它也会将插入点移到编辑栏中。
4	CTRL+1	显示“单元格格式”对话框。
5	CTRL+SHIFT+~	应用“常规”数字格式。
6	CTRL+G	显示“定位”对话框。
7	CTRL+`	在工作表中切换显示单元格值和公式。
8	CTRL+’	将公式从活动单元格上方的单元格复制到单元格或编辑栏中。
9	F4	重复上一个命令或操作（如有可能）。编辑公式时，在绝对引用和相对引用间切换
10	ALT+ENTER	在同一单元格中另起一个新行。

快捷键大全

Ctrl 组合快捷键

-	快捷键	说明
1	CTRL+PgUp	向左切换工作表
2	CTRL+PgDn	向右切换工作表
3	CTRL+SHIFT+&	将外框应用于选定单元格。
4	CTRL+SHIFT_	从选定单元格删除外框。
5	CTRL+SHIFT+~	应用“常规”数字格式。
6	CTRL+SHIFT+$	应用带有两位小数的“货币”格式（负数放在括号中）。
7	CTRL+SHIFT+%	应用不带小数位的“百分比”格式。
8	CTRL+SHIFT+^	应用带有两位小数的“指数”格式。
9	CTRL+SHIFT+#	应用带有日、月和年的“日期”格式。
10	CTRL+SHIFT+@	应用带有小时和分钟以及 AM 或 PM 的“时间”格式。
11	CTRL+SHIFT+!	应用带有两位小数、千位分隔符和减号 (-)（用于负值）的“数值”格式。
12	CTRL+SHIFT+*	选择环绕活动单元格的当前区域（由空白行和空白列围起的数据区域）。在数据透视表中，它将选择整个数据透视表。
13	CTRL+SHIFT+:	输入当前时间。
14	CTRL+SHIFT+”	将值从活动单元格上方的单元格复制到单元格或编辑栏中。
15	CTRL+SHIFT+Plus (+)	显示用于插入空白单元格的“插入”对话框。
16	CTRL+Minus (-)	显示用于删除选定单元格的“删除”对话框。
17	CTRL+;	输入当前日期。
18	CTRL+`	在工作表中切换显示单元格值和公式。
19	CTRL+’	将公式从活动单元格上方的单元格复制到单元格或编辑栏中。
20	CTRL+1	显示“单元格格式”对话框。
21	CTRL+2	应用或取消加粗格式设置。
22	CTRL+3	应用或取消倾斜格式设置。
23	CTRL+4	应用或取消下划线。
24	CTRL+5	应用或取消删除线。
25	CTRL+6	在隐藏对象、显示对象和显示对象占位符之间切换。
26	CTRL+8	显示或隐藏大纲符号。
27	CTRL+9	隐藏选定的行。
28	CTRL+0	隐藏选定的列。
29	CTRL+A	☆选择整个工作表。 ☆如果工作表包含数据，则按 Ctrl+A 将选择当前区域，再次按 Ctrl+A 将选择当前区域及其汇总行，第三次按 Ctrl+A 将选择整个工作表。 ☆当插入点位于公式中某个函数名称的右边时，则会显示“函数参数”对话框。 ☆当插入点位于公式中某个函数名称的右边时，按 Ctrl+Shift+A 将会插入参数名称和括号。
30	CTRL+B	应用或取消加粗格式设置。
31	CTRL+C	复制选定的单元格。如果连续按两次 Ctrl+C，则会显示剪贴板。
32	CTRL+D	使用“向下填充”命令将选定范围内最顶层单元格的内容和格式复制到下面的单元格中。
33	CTRL+F	显示“查找和替换”对话框，其中的“查找”选项卡处于选中状态。按 Shift+F5 也会显示此选项卡。
34	SHIFT+F4	重复上一次“查找”操作。
35	CTRL+SHIFT+F CTRL+SHIFT+P	打开“设置单元格格式”对话框，且其中的“字体”选项卡处于选中状态。
36	CTRL+G F5	显示“定位”对话框。
37	CTRL+H	显示“查找和替换”对话框，其中的“替换”选项卡处于选中状态。
38	CTRL+I	应用或取消倾斜格式设置。
39	CTRL+K	为新的超链接显示“插入超链接”对话框，或为选定的现有超链接显示“编辑超链接”对话框。
40	CTRL+N	创建一个新的空白工作簿。
41	CTRL+O	显示“打开”对话框以打开或查找文件。
42	CTRL+SHIFT+O	选择所有包含批注的单元格。
43	CTRL+P	显示“打印”对话框。
44	CTRL+R	使用“向右填充”命令将选定范围最左边单元格的内容和格式复制到右边的单元格中。
45	CTRL+S	使用其当前文件名、位置和文件格式保存活动文件。
46	CTRL+T	显示“创建表”对话框。
47	CTRL+U	应用或取消下划线。
48	CTRL+SHIFT+U	在展开和折叠编辑栏之间切换。
49	CTRL+V	在插入点处插入剪贴板的内容，并替换任何所选内容。只有在剪切或复制了对象、文本或单元格内容之后，才能使用此快捷键。
50	CTRL+ALT+V	显示“选择性粘贴”对话框。只有在剪切或复制了工作表或其他程序中的对象、文本或单元格内容后此快捷键才可用。
51	CTRL+W	关闭选定的工作簿窗口。
52	CTRL+X	剪切选定的单元格。
53	CTRL+Y	重复上一个命令或操作（如有可能）。
54	CTRL+Z	使用“撤消”命令来撤消上一个命令或删除最后键入的内容。
55	CTRL+SHIFT+Z	显示了自动更正智能标记时，可撤消或恢复上一次自动更正操作。

功能键

-	快捷键	说明
1	F1	显示“Microsoft Office Excel 帮助”任务窗格。
2	ALT+F1	创建当前范围中数据的图表。
3	ALT+SHIFT+F1	插入新的工作表。
4	F2	编辑活动单元格并将插入点放在单元格内容的结尾。如果禁止在单元格中进行编辑，它也会将插入点移到编辑栏中。
5	SHIFT+F2	添加或编辑单元格批注。
6	CTRL+F2	显示“打印预览”窗口。
7	F3	显示“粘贴名称”对话框。
8	SHIFT+F3	显示“插入函数”对话框。
9	F4	“重复上一个命令或操作（如有可能）。编辑公式时，在绝对引用和相对引用间切换”
10	Ctrl+F4	关闭选定的工作簿窗口。
11	Ctrl+F5	从最大化中恢复选定工作簿窗口的窗口大小。
12	F6	在工作表、功能区、任务窗格和缩放控件之间切换。在已拆分（通过依次单击“视图”菜单、“管理此窗口”、“冻结窗格”、“拆分窗口”命令来进行拆分）的工作表中，在窗格和功能区区域之间切换时，按 F6 可包括已拆分的窗格。
13	SHIFT+F6	在工作表、缩放控件、任务窗格和功能区之间切换。
14	CTRL+F6	如果打开了多个工作簿窗口，则可切换到下一个工作簿窗口。
15	F7	显示“拼写检查”对话框，以检查活动工作表或选定范围中的拼写。
16	CTRL+F7	如果工作簿窗口未最大化，则可对该窗口执行“移动”命令。使用箭头键移动窗口，并在完成时按 Enter，或按 Esc 取消。
17	F8	打开或关闭扩展模式。在扩展模式中，“扩展选定区域”将出现在状态行中，并且按箭头键可扩展选定范围。
18	SHIFT+F8	使用箭头键将非邻近单元格或区域添加到单元格的选定范围中。
19	CTRL+F8	当工作簿未最大化时，可执行“大小”命令（在工作簿窗口的“控制”菜单上）。
20	ALT+F8	显示用于创建、运行、编辑或删除宏的“宏”对话框。
21	F9	计算所有打开的工作簿中的所有工作表。
22	SHIFT+F9	按 Shift+F9 可计算活动工作表。
23	CTRL+ALT+F9	计算所有打开的工作簿中的所有工作表，不管它们自上次计算以来是否已更改。
24	CTRL+ALT+SHIFT+F9	重新检查相关公式，然后计算所有打开的工作簿中的所有单元格，其中包括未标记为需要计算的单元格。
25	CTRL+F9	将工作簿窗口最小化为图标。
26	F10	“打开或关闭键盘操作提示。当打开提示时箭头键可用于导航。”
27	SHIFT+F10	按 Shift+F10 可显示选定项目的快捷菜单。
28	ALT+SHIFT+F10	显示智能标记的菜单或消息。如果存在多个智能标记，按该组合键可切换到下一个智能标记并显示其菜单或消息。
29	CTRL+F10	最大化或还原选定的工作簿窗口。
30	F11	创建当前范围内数据的图表。
31	SHIFT+F11	按 Shift+F11 可插入一个新工作表。
32	ALT+F11	打开 Microsoft Visual Basic 编辑器，您可以在其中通过使用 Visual Basic for Applications (VBA) 来创建宏。
33	F12	显示“另存为”对话框。

其他实用快捷键

-	快捷键	说明
1	ARROW KEYS	在工作表中上移、下移、左移或右移一个单元格。
2	CTRL+ARROW KEY	移动到工作表中当前数据区域的边缘。
3	SHIFT+ARROW KEY	将单元格的选定范围扩大一个单元格。
4	CTRL+SHIFT+ARROW KEY	按 Ctrl+Shift+箭头键可将单元格的选定范围扩展到活动单元格所在列或行中的最后一个非空单元格，或者如果下一个单元格为空，则将选定范围扩展到下一个非空单元格。
5	BACKSPACE	在编辑栏中删除左边的一个字符。也可清除活动单元格的内容。在单元格编辑模式下，按该键将会删除插入点左边的字符。
6	DELETE	从选定单元格中删除单元格内容（数据和公式），而不会影响单元格格式或批注。在单元格编辑模式下，按该键将会删除插入点右边的字符。
7	END	当 Scroll Lock 处于开启状态时，移动到窗口右下角的单元格。当菜单或子菜单处于可见状态时，也可选择菜单上的最后一个命令。
8	CTRL+END	移动到工作表上的最后一个单元格，即所使用的最下面一行与所使用的最右边一列的交汇单元格。如果光标位于编辑栏中，它会将光标移到文本的末尾。
9	CTRL+SHIFT+END	按 Ctrl+Shift+End 可将单元格选定区域扩展到工作表上所使用的最后一个单元格（位于右下角）。如果光标位于编辑栏中，则按 Ctrl+Shift+End 可选择编辑栏中从光标所在位置到末尾处的所有文本，这不会影响编辑栏的高度。
10	ENTER	从单元格或编辑栏中完成单元格输入，并（默认）选择下面的单元格。打开选定的菜单（按 F10 激活菜单栏），或执行选定命令的操作。在数据表单中，按该键可移动到下一条记录中的第一个字段。在对话框中，按该键可执行对话框中默认命令按钮（带有突出轮廓的按钮，通常为“确定”按钮）的操作。
11	ALT+ENTER	在同一单元格中另起一个新行。
12	CTRL+ENTER	使用当前输入的条目填充选定的单元格区域。
13	SHIFT+ENTER	完成单元格输入并选择上面的单元格。
14	ESC	取消单元格或编辑栏中的输入。关闭打开的菜单或子菜单、对话框或消息窗口。在应用全屏模式时，按该键还可关闭此模式，返回到普通屏幕模式，再次显示功能区和状态栏。
15	HOME	移到工作表中某一行的开头。当 Scroll Lock 处于开启状态时，移到窗口左上角的单元格。当菜单或子菜单处于可见状态时，选择菜单上的第一个命令。
16	CTRL+HOME	移到工作表的开头。
17	CTRL+SHIFT+HOME	将单元格的选定范围扩展到工作表的开头。
18	PAGE DOWN	在工作表中下移一个屏幕。
19	ALT+PAGE DOWN	在工作表中向右移动一个屏幕。
20	CTRL+SHIFT+PAGE DOWN	选择工作簿中的当前和下一个工作表。
21	PAGE UP	在工作表中上移一个屏幕。
22	ALT+PAGE UP	在工作表中向左移动一个屏幕。
23	CTRL+SHIFT+PAGE UP	选择工作簿中的当前和上一个工作表。
24	SPACEBAR	在对话框中，执行选定按钮的操作，或者选中或清除复选框。
25	CTRL+SPACEBAR	选择工作表中的整列。
26	SHIFT+SPACEBAR	选择工作表中的整行。
27	CTRL+SHIFT+SPACEBAR	按 Ctrl+Shift+空格键可选择整个工作表。如果工作表中包含数据，则按 Ctrl+Shift+空格键将选择当前区域，再按一次 Ctrl+Shift+空格键将选择当前区域及其汇总行，第三次按 Ctrl+Shift+空格键将选择整个工作表。当某个对象处于选定状态时，按 Ctrl+Shift+空格键可选择工作表上的所有对象。
28	ALT+SPACEBAR	显示 Microsoft Office Excel 窗口的“控制”菜单。
29	TAB	在工作表中向右移动一个单元格。在受保护的工作表中，可在未锁定的单元格之间移动。在对话框中，移到下一个选项或选项组。
30	SHIFT+TAB	移到前一个单元格（在工作表中）或前一个选项（在对话框中）。
31	CTRL+TAB	在对话框中，按 Ctrl+Tab 可切换到下一个选项卡。
32	CTRL+SHIFT+TAB	在对话框中，按 Ctrl+Shift+Tab 可切换到前一个选项卡。

Hexo 最常用的几个命令

2015-12-21T14:12:04.000Z

　　Hexo 约有二十个命令，但普通用户经常使用的大概只有下列几个:

hexo s

hexo s

启动本地服务器，用于预览主题。默认地址： http://localhost:4000/

hexo s 是 hexo server 的缩写，命令效果一致；
预览的同时可以修改文章内容或主题代码，保存后刷新页面即可；
对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。

hexo n

1	hexo n "学习笔记六"

新建一篇标题为 学习笔记六 的文章，因为标题里有空格，所以加上了引号。

文章标题可以在对应 md 文件里改，新建时标题可以写的简单些；
hexo n 是 hexo new 的缩写，命令效果一致。

hexo d

hexo d

自动生成网站静态文件，并部署到设定的仓库。

hexo d 是 hexo deploy 的缩写，命令效果一致。

hexo clean

1	hexo clean

清除缓存文件 db.json 和已生成的静态文件 public。

网站显示异常时可以执行这条命令试试。

hexo g

hexo g

生成网站静态文件到默认设置的 public 文件夹。

便于查看网站生成的静态文件或者手动部署网站；
如果使用自动部署，不需要先执行该命令；
hexo g 是 hexo generate 的缩写，命令效果一致。

hexo n page

1	hexo n page aboutme

新建一个标题为 aboutme 的页面，默认链接地址为 主页地址/aboutme/

标题可以为中文，但一般习惯用英文；
页面标题和文章一样可以随意修改；
页面不会出现在首页文章列表和归档中，也不支持设置分类和标签。

常用组合

1 2	hexo clean && hexo s hexo clean && hexo d

可以用输入法等软件为这些命令设置快捷键，方便调用。

CSS font-family 网页字体使用小结

2015-12-08T16:33:55.000Z

前言

一直到最近才开始调整博客的字体，之前都是全站微软雅黑了事。慢慢调整后发现 font-family 这个属性相关的知识还是不少的，整理一下常用的部分，分享于此。

基本用法

使用语法

1 2	font-family: 字体名1, 字体名2, 字体名n, 字体系列名; font-family: Verdana, Helvetica, "Microsoft YaHei", Arial;

语法说明

系统将选择列表中最先可用的字体来显示文字;

因为规则1，通常在最末添加一个 generic-family 字体系列名，保证文字获得相似的显示效果;

因为规则1，西文字体名应该写在中文字体前，这样才能中英文同时使用不同字体;

字体名为中文或包含空格等时，需要加双引号””才能正确识别;

中文字体建议也是用其对应英文字体名，如”微软雅黑”为”Microsoft YaHei”，以提高编码兼容性。

常见字体系列

Serif 衬线字体

Times New Roman, Georgia 和宋体都是很常见的衬线字体；
特征: 文字笔划的开始或结束处有额外的装饰，笔划有粗细之分。

Sans-serif 无衬线字体

Arial, Verdana, Tahoma, 微软雅黑都是很常见的无衬线字体;
说明: sans-源于法语前缀，意思为没有。Sans-serif 也就是指无衬线字体。
特征: 字体比较圆滑，笔划较为均匀。

字体选用: 有种说法是正文多用衬线字体，易于区分；标题多用无衬线字体。不过这个也看个人喜好，我更习惯正文用无衬线字体。如果实在不知道怎么选，随便找一个自己看着舒服的网站，套用它的字体样式好了。

Monospace 等宽字体

Courier New, Consolas, Menlo 都是比较常见的等宽字体;
特征: 字母、数字、空格以及其他符号所占宽度都一致。识别度高，易于对齐和定位，通常用于显示代码。

一个优秀的代码字体除了等宽外，还应该能较好地区分出0 o O i l 1 I "" '' [] () {} 等字符。

Cursive 手写体

Comic Sans, Author, 华文行楷都是比较常见的仿手写体;
特征: 模仿人的手写体，笔划圆滑或者有连笔等装饰。英文的花体，中文的行书草书等都属于此类。

获取字体名称

同一个字体在不同系统和应用中可能会显示为不同名字，但其内部一般有一个不变的英文名字。CSS font-family 需要引用的就是字体的内部名字。

本地字体

Win 上通过搜索或控制面板进入字体文件夹，然后双击字体查看字体名称;
通过软件，如记事本、Office 等也可以查看字体名字:

Mac 上搜索打开字体册即可，中间一栏显示的就是字体名称:

网页字体

审查元素，查看生效的 font-family:

通过 Chrome 插件 WhatFont:

字体图标

使用@font-face引入字体后，可以像使用文字那样，无损的控制图标的大小，颜色等样式。常见的有 Webdings，Wingdings, Font Awesome.

备用记录

字体配置

下面是自己目前比较常用的字体配置，通常按系列设置为 CSS 预处理器的变量，方便调用。

//中文
font-chs = "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei"
//无衬线字体 sans-serif
font-sans = Verdana, "Helvetica Neue", Helvetica, Tahoma, Arial
//衬线字体 serif
font-serif = Times, Georgia
//等宽字体 monospace
font-mono = Menlo, Consolas, "Source Code Pro", Inconsolata, Monaco, "Courier New"

字体英文名

一些常见中文字体的对应英文名。

-	中文名	英文名
1	苹方	PingFang SC
2	冬青黑/苹果丽黑	Hiragino Sans GB
3	思源黑体	Source Han Sans CN
4	华文细黑	STHeiti Light [STXihei]
5	华文黑体	ST Heiti
6	华文楷体	STKaiti
7	华文宋体	STSong
8	华文仿宋	STFangsong
9	丽黑 Pro	LiHei Pro Medium
10	丽宋 Pro	LiSong Pro Light
11	标楷体	BiauKai
12	苹果丽中黑	Apple LiGothic Medium
13	苹果丽细宋	Apple LiSung Light
14	新细明体	PMingLiU
15	细明体	MingLiU
16	标楷体	DFKai-SB
17	(中易)黑体	SimHei
18	宋体	SimSun
19	新宋体	NSimSun
20	仿宋	FangSong
21	楷体	KaiTi
22	仿宋_GB2312	FangSong_GB2312
23	楷体_GB2312	KaiTi_GB2312
24	微软正黑体	Microsoft JhengHei
25	微软雅黑	Microsoft YaHei
26	隶书	LiSu
27	幼圆	YouYuan
28	华文中宋	STZhongsong
29	方正舒体	FZShuTi
30	方正姚体	FZYaoti
31	华文彩云	STCaiyun
32	华文琥珀	STHupo
33	华文隶书	STLiti
34	华文行楷	STXingkai
35	华文新魏	STXinwei
36	文泉驿微米黑	Wenquanyi Micro Hei
37	文泉驿正黑	WenQuanYi Zen Hei
38	文泉驿点阵正黑	WenQuanYi Zen Hei Sharp

Sublime Text 3 使用配置与插件安装

2015-11-30T13:07:38.000Z

　　记录安装配置 Sublime 的过程，同时列出所用到的插件，方便自己在新系统新电脑上快速用上熟悉的 Sublime。

开始使用

软件下载

一直使用的是 Sublime 3，直接转到 3 的下载页面好了。

用户设置

Preferences/Settings - User，设置字体为 Consolas 雅黑混合体 yx5g，字号11，tab 转空格，显示空格和制表符。

"font_face": "Yahei Consolas Hybrid",
"font_size": 11,
"translate_tabs_to_spaces": true,
"draw_white_space": "all",

/*统一使用 UTF-8 编码和 UNIX 风格的换行符(LF, 0x0A)*/
"default_line_ending": "unix",
"default_encoding": "UTF-8",

其他设置参考 Preferences/Settings - Default。

基础插件

Package Control

用于管理插件的插件，基础中的基础。之后列的插件全部通过 Package Control 安装。

插件使用与安装: https://packagecontrol.io/installation

ConvertToUTF8

文本编码自动转换，减少中日韩文乱码问题。

插件安装: Ctrl+Shift+P, Package Control: Installed Packages, 搜索 ConvertToUTF8

IMESupport

解决输入法选字框不跟随问题。

SideBarEnhancements

自带边栏功能太少，必须安装此插件增强一下。

主题配色

Theme - Spacegray

Spacegray 主题的 Base16 Eighties Dark 配色方案看着最顺眼，用着最舒服。

代码规范

SublimeLinter

用于管理其他 code linting 代码规范插件。

使用说明: http://sublimelinter.readthedocs.org/en/latest/installation.html#installing-via-pc

SublimeLinter-jshint

基于 JSHint，用于检查规范 JavaScript 代码。

NPM 依赖包: npm install -g jshint
使用说明: https://github.com/SublimeLinter/SublimeLinter-jshint

SublimeLinter-csslint

基于 CSSLint，用于检查规范 CSS 代码。

NPM 依赖包: npm install -g csslint
使用说明: https://github.com/SublimeLinter/SublimeLinter-csslint

SublimeLinter-contrib-htmlhint

基于 HTMLHint，用于检查规范 HTML 代码。

NPM 依赖包: npm install -g htmlhint@latest
使用说明: https://github.com/mmaday/SublimeLinter-contrib-htmlhint

常用插件

HTML-CSS-JS Prettify

格式化 HTML, CSS, JavaScript 及 JSON 代码。

Color Highlighter

直接在代码中预览颜色。

Stylus

使代码高亮支持 Stylus。

Stylus Clean Completions

Stylus 代码自动补全。

AutoFileName

文件名自动补全。

Can I Use

http://caniuse.com/ 的插件版，快速查询 HTML, CSS 等前端技术的浏览器兼容性

BracketHighlighter

调整各类括号匹配的高亮样式

To be added

Anki 自用卡片模板分享

2015-11-23T12:34:38.000Z

前言

Anki 是一款卡片式的记忆辅助软件。软件在保持轻巧简洁的同时，各种设置也很丰富。另外， Anki 通过嵌入式的网页来展示卡片，大大增强了卡片样式的自定义功能。下面是目前自己常用的卡片样式代码，有折腾闲情的可以试试。

基础模板

标题居中，用不同背景色区分答案类型，设置圆角等样式。

模板使用区域

主要需要填写如图所示4个区域。

正面模板

1 2	<img src="{{logo}}" class="logo"/> <div style="font-size:2em">{{Front}}</div>

样式

.card {
	font-family: 方正中雅宋_GBK;
	font-size: 1em;
	text-align:center;
}
.logo {
	width: 9em;
	padding: 2em 0 1em;
}
.English {
	font-family: 方正中雅宋_GBK;
	font-size: 1.5em;
	text-align: justify;
	background-color: #ffe4f4;
	border-radius: .3em;
	padding: 1em;
}
.Chinese {
	 font-family: 方正中雅宋_GBK;
	 font-size: 1.5em;
	 text-align: justify;
	 background-color: #edffc4;
	 border-radius: 1.2em .3em;
	 padding: 1em;
}

背面模板

{{FrontSide}}

<hr id=answer>
<div class= Chinese>{{Chinese}}</div>
<p>
<div class= English>{{English}}</div>

带页脚模板

加了页脚，左下显示标签分类信息，右下链接到设定的网址。

模板使用区域

主要需要填写如图所示5个区域。

正面模板

<div class= item_eng>{{Item_ENG}}</div>
<p class= front>{{Front}}</p>
<p class= title>{{Tags}}</p>
<p class= author>M.ZH</p>

样式

.card {
	font-family: 方正中雅宋_GBK;
	font-size: 1em;
	text-align: center;
}
.Chinese {
	font-family: 方正中雅宋_GBK;
	font-size: 1.5em;
	text-align: justify;
	background-color: #edffc4;
	border-radius: 1.2em 0.3em;
	padding : 0.5em;
}
.English {
	font-family: 方正中雅宋_GBK;
	font-size: 1.5em;
	text-align: justify;
	background-color: #ffe4f4;
	border-radius: .3em;
	padding: .5em;
}
.front {
	font-size: 1.8em;
}
.item_eng {
	padding-top : 5%;
	color: orange;
	font-size: 2em;
 }
.tag {
	display: block;
	position: fixed;
	left: 3%;
	bottom: 0;
	color: gray;
	font-size: 1.1em;
}
a {
	color: grey;
}
.title {
	display: block;
	position: fixed;
	left: 3%;
	bottom: 0;
	color: gray;
	font-size: 1em;
}
.author {
	display: block;
	position: fixed;
	right: 3%;
	bottom: 0;
	color: gray;
	font-size: 1em;
}
.link {
	display: block;
	position: fixed;
	right: 3%;
	bottom: 0;
	color: gray;
	font-size: 1.1em;
	font-style: italic;
}

背面模板

<div class= item_eng>{{Item_ENG}}</div>
<p>
<p class= front>{{Front}}</p>
<hr id= answer>
<div>{{image}}</div>
<p class= Chinese>{{Chinese}}</p>
<p>
<p class= English>{{English}}</p>
<a href="{{Link}}"><p class=link>Reference Site</p></a>
<p class= tag>{{Tags}}</p>

字体下载

测试了不少字体，感觉方正中雅宋_GBK 和这个软件最匹配。当然，大家可以自行修改font-family，换用喜欢的字体。

Git 基础命令与相关术语

2015-11-22T19:01:30.000Z

　　笔记基本上整理自网站 Try Git，一套很不错的 Git 在线入门教程。

git init

To initialize a Git repository here

Repository

A directory where Git has been initialized to start version controlling your files.

git status

See what the current state of the project is.

staged

Files are ready to be committed.
unstaged
Files with changes that have not been prepared to be committed.
untracked
Files aren’t tracked by Git yet. This usually indicates a newly created file.
deleted
File has been deleted and is waiting to be removed from Git.

git add `<file>`

Add files to the staging area.

Staging Area

A place where we can group files together before we “commit” them to Git.
Commit

add all

You can also type git add -A . where the dot stands for the current directory, so everything in and beneath it is added. The -A ensures even file deletions are included.

git reset

You can use git reset <filename> to remove a file or files from the staging area.

Commit

A “commit” is a snapshot of our repository. This way if we ever need to look back at the changes we’ve made (or if someone else does), we will see a nice timeline of all changes.

git commit -m “msg”

To store our staged changes we run the commit command with a message describing what we’ve changed.

‘-a’ option

Auto removes deleted files with the commit.

1	git commit -am "msg"

git log

a journal that remembers all the changes we’ve committed so far

git log –summary

see more information for each commit. You can see where new files were added for the first time or where files were deleted. It’s a good overview of what’s going on in the project.

git remote

1 2	git remote add <remote name> <repository URL> git remote add origin https://github.com/try-git/try_git.git

Git doesn’t care what you name your remotes, but it’s typical to name your main one origin.

It’s also a good idea for your main repository to be on a remote server like GitHub in case your machine is lost at sea during a transatlantic boat cruise or crushed by three monkey statues during an earthquake.

git push

Tells Git where to put our commits when we’re ready.

1 2	git push -u <remote name> <branch name> git push -u origin master

The -u tells Git to remember the parameters, so that next time we can simply run git push.

git stash

Sometimes when you go to pull you may have changes you don’t want to commit just yet. One option you have, other than commiting, is to stash the changes.

Use the command git stash to stash your changes, and git stash apply to re-apply your changes after your pull.

git pull

1 2	git push <remote name> <branch name> git pull origin master

Check for changes on remote repository and pull down any new changes.

git diff

A good overview of changes we have made and lets us add files or directories one at a time and commit them separately.

git diff HEAD

Show what is different from our last commit. HEAD points to your most recent commit by default.

git diff –staged

Look at changes within files that have already been staged.

git checkout – `<target>`

Changed files back to how they were at the last commit, namely get rid of all the changes since the last commit.

--: promise the command line that there are no more options after the ‘–’, avoid switching to the branch of the same name.

git branch

List local branches of now repository.

git branch `<name>`

Create a new branch.

When developers are working on a feature or bug they’ll often create a copy (aka. branch) of their code they can make separate commits to. Then when they’re done they can merge this branch back into their main master branch.

git checkout `<branch>`

Switch to certain branch.

git checkout -b new_branch

Checkout and create a branch at the same time.

git rm `<file>`

Not only remove the actual files from disk, but will also stage the removal of the files for us.

git rm -r folder

Recursively remove all folders and files from the given directory.

git merge `<branch>`

Merge your changes from the given branch into current branch.

Merge Conflicts

Merge Conflicts can occur when changes are made to a file at the same time. Reading more on how conflicts are presented.

Delete Branch

git branch -d `<branch>`

Delete a local branch. -d won’t let you delete something that hasn’t been merged.

`-f` and `-D`

Force delete the branch that hasn’t been merged.

Add the -f(–force) option or use -D which combines -d -f together into one command.

Delete Remote Branch

1 2	git branch -r -d <remote name>/<branch name> git push <remote name>: <branch name>

1 2	git branch -r -d origin/branch-name git push origin :branch-name