Shanqi Jiang

Blog

All posts in one long list

项目管理流程

on 项目管理

完整的项目开发从需求沟通、需求评审、项目研发（联调）、测试验收、上线维护迭代等流程。

1.需求沟通

主要目的是明确项目要做什么。
1.预期的效果 2.项目阶段(分几级分几期) 3.项目边界 4.优先级 5. 拆解需求形成方案

准备内容：

项目相关的背景和预期效果
业务流程图

涉及人员：

用户、产品、研发后端RD、研发前端RD

阶段过程：

其中包括用户沟通和内部沟通。	
用户沟通：主要是沟通用户需求、预期、当前状态和业务规范，以及可用资源状态。
内部沟通：内部讨论，根据用户提出的需求做需求分析，拆解成可执行的方案和功能。

当中涉及到原有系统或者未知资源可以和开发沟通（与前后端RD）；
当中涉及的项目边界的确定，大体功能的确定，功能的优先级（与用户与前后端RD）；

交付内容：

RP原型
需求文档PRD
思维导图（Xmind）
领域模型
泳道图
业务流程图
用例图use case digram+用例描述

2.需求评审

和开发相关人员讲解项目需求，功能和预期效果，确定方案可行性和实现细节。

准备内容：

业务流程图：涉及不同业务不同操作人员的流程图
PRD产品需求文档：
	针对每个页面和菜单的功能、操作、规则和展示效果进行描述
	不同角色的功能区分
	算法和规则

涉及人员：

PM、交互、设计、后端研发、前端研发、测试

阶段过程：

开发相关人员围绕 PRD 需求细节进行讨论
交互、视觉、前端、测试，需要明确最终业务效果，后端除此之外还需要，明确所有的算法策略细节

交付内容：

PM 更正\补充 PRD 需求文档的细节
交互、设计、前端、后端、测试，给出项目拆解和排期（优先级和时间节点），并且明确交付内容	，指定对应的负责人

3.项目研发

协调资源，解决开发当中的问题，调整方案。

准备内容：

项目的整体排期、时间节点和负责人（接口人）
详细的项目拆解内容：交互、设计、前端、后端、测试

涉及人员： 

PM、交互、设计、后端研发、前端研发、测试

阶段过程：

建立沟通讨论机制：qq群，通讯录，沟通结果记录反馈
PM、交互、设计、后端研发、前端研发、测试的负责人例会踪各个时间节点和问题，检查交付内容效果
PM协调问题，跟踪项目进度、实现效果和项目质量
PM资源申请：包括接口打通、资源调配，上线服务器申请

交付内容：

PM：完善的原型稿，涵盖细节，期间保持整个队伍的沟通
交互：按照时间节点分阶段的交互稿	
设计：按照时间节点分阶段的设计稿
后端研发：按照排期的功能交付、单元测试、代码review、接口测试、联调测试
前端研发：按照排期的功能交付、单元测试、代码review、接口测试、联调测试

4.测试验收

产品上线前，进行项目的全面测试，保证达到预期和bug free。

准备内容：

PM 完整的产品原型：明确产品细节要求
完整的交互稿、设计稿：明确产品最终效果

涉及人员：

测试，后端RD、前端RD

阶段过程：

测试工程师，对每个功能点，逐个测试，针对有异常的功能点，提起 task，同时，在讨论群中，沟通确认，描述清楚 bug 重现场景【冒烟测试，回归测试】
RD 需要根据task list解决bug
PM验收功能，确定上线内容

交付内容：

封版可上线的代码版本

5.项目上线

准备内容：

梳理清单：
	上线内容列表
	服务器列表
	配置项

涉及人员：

PM、测试，后端RD、前端RD

阶段过程：

代码部署、数据库导入、配置项目配置，生产环境复测

交付内容：

可用的系统
测试报告
上线通知
维护计划和负责人

6.额外：

需求讨论：讨论之前，确定讨论的目标和边界，和希望达到的预期

记录：
开发环境：服务器、数据库、版本、发布内容
测试环境：服务器、数据库、版本、发布内容
线上环境：服务器、数据库、版本、发布内容
避免混乱

项目排期和任务拆解的标准：
具体的：具体的需求
可量化的：不是模糊概念
可实现的：可行性分析
有相关性的：跟事业部的整体目标相关
有时间限制的：明确起始时间、结束时间

IE-Compatible

on IE, Compatible

1.Use-Agent

浏览器模式决定了 Internet Explorer 发出请求时自带的 User-Agent，也决定了在默认情况下 Internet Explorer 使用哪一种文档模式来渲染页面
通常都会用user-agent中的关键字来判断浏览器版本类型，如下:

	public static String responseFileName(String fileName,String agent){
			try{
			if(null != agent){
				if(-1 != agent.indexOf("MSIE") || -1 != agent.indexOf("Trident") 
						|| -1 != agent.indexOf("Edge")){// ie
					fileName = URLEncoder.encode(fileName,"UTF-8");
				}else if(-1 != agent.indexOf("Mozilla")){// 火狐,chrome等
					fileName = new String(fileName.getBytes("UTF-8"),"ISO8859-1");
				}
			}
			}catch(IOException e){	
			}
			return fileName;
		}

或

	// 文件名处理，否则会出现文件名为中文时不能下载
	if (request.getHeader("User-Agent").toLowerCase().indexOf("firefox") > 0) {
		originalName = new String(originalName.getBytes("UTF-8"), "ISO8859-1");// firefox浏览器
	} else{
		if (request.getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0) 
			originalName = URLEncoder.encode(originalName, "UTF-8");
	}

但程序随着浏览器版本更新会修改当中的字段，并且某些情况可以更改user-agent，所以建议用特性检测

	function registerEvent( sTargetID, sEventName, fnHandler ) 
	{
	   var oTarget = document.getElementById( sTargetID );
	   if ( oTarget != null ) 
	   {
	      if ( oTarget.addEventListener ) {   
	         oTarget.addEventListener( sEventName, fnToBeRun, false );
	      } else {
	        var sOnEvent = "on" + sEventName; 
	        if ( oTarget.attachEvent ) 
	        {
	           oTarget.attachEvent( sOnEvent, fnHandler );
	        }
	      }
	   }
	}
	/*本示例显示了一个利用功能检测来注册网页事件的函数，这在如何检测功能而非浏览器中有详细论述。 
	它优先采用基于标准的备选方法，而不是专有备选方法。 这种方法意味着，此函数适用于支持文档对象模型
	(DOM) Level 3 事件标准的现代浏览器，也适用于不支持该标准的旧版 Windows Internet Explorer。 
	此版本的示例增加支持不属于其他任何一类的其他 Web 浏览器。
    创建 JavaScript 回退策略时，首先设计基于标准的解决方案，然后为备用浏览器提供支持。 
    这有助于确保你的网页在较大范围内正常运作，并减少旧版浏览器或非传统浏览器的负面影响。*/
	if(typeof  window.addEventListener==="function") 
		{ 
	    	alert("DOM浏览器"); 
		} 
	else 
		{ 
	   		alert("IE"); 
		}

2. <!DOCTYPE html>

  • Internet Explorer 7, 8, 9 默认模式 Internet Explorer 7, 8, 9 会检测当前页面是否包含 <!DOCTYPE> 声明，如果有那就会用当前 IE 所支持最高的文档模式，如果没有，IE 则会使用 IE5 Quirks 文档模式
  • Internet Explorer 10, 11 默认模式 Internet Explorer 10 和 Internet Explorer 11 不管当前页面是否包含 <!DOCTYPE> 声明，都会使用最高的文档模式，即：IE10 使用 IE10 标准文档模式，IE11 使用 IE11 标准文档模式

用

	//Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容
	<meta http-equiv=“X-UA-comptaible” content=“IE=Edge”>

来声明文档模式以哪个版本浏览器解析

使用标准方法:

  1. 为w3c标准化的方法
  2. 使用第三方库，框架（jQuery，angularJS, VUE）

3.标准化的CSS、DOM前缀

-ms-transform:rotate(7deg);             //-ms代表ie内核识别码
-moz-transform:rotate(7deg);            //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg);         //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg);              //-o代表欧朋【opera】内核识别码
transform:rotate(7deg);                 //统一标识语句。。。最好这句话也写下去，符合w3c标准

使用css3属性时，大部分都要带这些识别前缀，早期点的浏览器才能识别，可以有整合一个js文件的，嵌入你的页面

工具：autoprefixer
http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html

4.创建有效的回退策略fallback

意思是有不支持这种方式的替代方式

	<object data="vectorPanda.svg" type="image/svg+xml">
   		<img src="pandaFallbackImage.png">
	</object>
	<audio id="myAudio" src="audiofile.wav">
      The audio element is not supported by your browser.
    </audio>

5.文档模式优先级

meta标签 > HTTP返回头
X-UA-Compatible > 浏览器默认行为模式，兼容模式

总结：

浏览器兼容方式:

  1. 代码内部兼容【虚拟机测试多IE版本浏览器
  2. 浏览器方面兼容（企业模式（组策略），兼容性视图）【两者不要混用】
  • 确定站点支持的最高文档模式
  • 确定站点当前是否需要某种指定的User-Agent
  • 尽量加X-UA-Compatible来指定文档模式

参考文章：http://joji.me/zh-cn/blog/ie11-migration-guide-understanding-browser-mode-document-mode-user-agent-and-x-ua-compatible

事务管理和界面应用问题 Fix Bug

on Sql, JavaScript

事物只读

<font color=#FFA500>错误：</font>
java.sql.SQLException: Connection is read-only. Queries leading to data modification are not allowed

<font color=#FFA500>解决方法：</font>
事务配置在service层，但是你的service层的方法是不是<事务管理器>指定开头的，service调用的x方法根本就没有事务或者设置为了read-only。修改你service方法的开头变成不是read-only的那种配置，如已经设置的开头

	<!-- 事务管理器 -->
	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		  <property name="dataSource" ref="dataSource" />
	</bean>

	<tx:advice id="txadvice" transaction-manager="transactionManager">
		<tx:attributes>
		<tx:method name="add*" propagation="REQUIRED"  read-only="false" rollback-for="Exception" />
		<tx:method name="save*" propagation="REQUIRED"  read-only="false" rollback-for="Exception" />
		<tx:method name="modify*" propagation="REQUIRED"  read-only="false" rollback-for="Exception" />
		<tx:method name="update*" propagation="REQUIRED"  read-only="false" rollback-for="Exception" />
		<tx:method name="del*" propagation="REQUIRED"  read-only="false" rollback-for="Exception"/>
		<tx:method name="*" propagation="REQUIRED" read-only="true"/>
		    </tx:attributes>
	</tx:advice>

this

  取上一层级的参数值 this.prev()

浏览器适配

	//子窗口弹框 
	window.showModalDialog()//在chrome里不适用
	window.open(pageURL,name,parameters)//替代

数据库连接失效

采取了两个方法解决：
1.在数据库连接xml里增加条件

	<!-- 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒 -->
	<property name="timeBetweenEvictionRunsMillis" value="60000" />
	<!-- 配置一个连接在池中最小生存的时间，单位是毫秒 -->
	<property name="minEvictableIdleTimeMillis" value="25200000" />
	
	<!-- 打开removeAbandoned功能 -->
	<property name="removeAbandoned" value="true" />
	<!-- 1800秒，也就是30分钟 -->
	<property name="removeAbandonedTimeout" value="{SUB_DATABASE_MAX_TIME}"/>
	<property name=“validationQueryTimeout" value="{VALID_ATION_QUERY_TIMEOUT}"></property>

2.数据库轮询（轮流访问数据库操作）

	public void job() {
		log.info("任务调度,每隔1分钟访问一次数据库---开始..........................");
			
			log.info("连接审计系统数据库--start--");
			auditPrjStatusMapper.selectAuditdbtOracle();
			log.info(“连接审计系统数据库—end--");
	
		log.info(“任务调度,每隔1分钟访问一次数据库---结束..........................");

GET请求和POST请求的区别

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.
  • GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的
  • GET方式对传输的数据大小有限制，通常不能大于2KB,而POST方式传递的数据量要比GET方式大得多，理论上不受限制
  • GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题

toResizeTable and loading

on ResizeTable, loading

页面引用这4种:

<link href="${pageContext.request.contextPath}/resource/js/jquery/plugin/loading/css/loading.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/resource/js/jquery/plugin/colresizable/css/main.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/loading/CommonPerson.js"></script>
<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/colresizable/colResizable-1.6.min.js"></script>

js中添加这个方法:

//可拖拽
function toResizeTable() {
	$("#normal").colResizable({disable:true});
	$("#normal").colResizable({liveDrag:true,draggingClass:"dragging",resizeMode:'fit',gripInnerHtml:"<div class='grip'></div>"});
		}

页面可刷新div:

<!-- 4 定义局部刷新区域的id -->
<input type="hidden" name="id_zone" value="countriesList1"  loading="true" successRun="toResizeTable">

loading为加载时候的样式
successRun 可拖拽的js方法名
table中加上class样式加上text-nowrap

CSS实现内容超过长度后以省略号显示

样式：

	<width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;>

说明：
white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格
overflow: hidden 隐藏超出单元格的部分
text-overflow: ellipsis 将被隐藏的那部分用省略号代替

Server-building

on Server

服务器部署程序所需步骤：

Install JDK
Install mysql
Install tomcat/nginx

install mysql

  • 初始化mysql设置（）【当中有个 不区分大小写 在mysql.ini】
  • 登录mysql 有个临时密码（在日志下）
  • 存在密码过期的问题（如果过期需修改列：password_expired）
  • % 所有地址登录
  • 执行 .sql文件 构建表

copy tomcat

启动web服务器

	sh startup.sh
	tail -f ./logs

程序在webapps下
地址：10.0.210.160：8080/upf
数据库重启：

	mysqld --defaults-file=../my.cnf --user=mysql &

修改host文件 域名解析：

	vi /etc/hosts

10.0.3.207 sso.portal.unicom.local
10.0.3.208 www.portal.unicom.local
10.0.3.154 sit3.portal.unicom.local
10.0.3.211 name.portal.unicom.local
10.0.3.213 intf2.portal.unicom.local

tomcat启动日志查看：

	tail -f catalina.out

linux命令:

ll 权限查看
free 命令显示系统使用和空闲的内存情况，包括物理内存、交互区内存(swap)和内核缓冲区内存。共享内存将被忽略

命令参数:

  • b 　以Byte为单位显示内存使用情况
  • k 　以KB为单位显示内存使用情况
  • m 　以MB为单位显示内存使用情况
  • g 以GB为单位显示内存使用情况
  • o 　不显示缓冲区调节列
  • s 　持续观察内存使用状况间隔秒数>
  • t 　显示内存总和列
  • V 　显示版本信息

tail 循环查看文件内容

ps -ef l grep + 运行程序（java，mysql）可查看进程状态

fdisk -l 此命令可以查看到磁盘总空间、分区情况以及每个分区的大小

df -h 可以查看到已挂载的磁盘的大小以及挂载位置

Theme Installation and Usage

on Jekyll Theme GitHub Installation

This is a blog template for a static site generator named Jekyll based on a Ghost template named Decent. If you like to see the theme in production have a look at jwillmer.de.

Screenshots

Frontpage
Post
Demo
About Page

Installation

  • To generate/host the blog you need to install Jekyll.
  • For the plugins (github-pages) you need to install Bundler: gem install bundler
    • Open a command prompt and install the plugins (github-pages): bundle install
    • On Windows you will propably get an exception. To solve it you can read How to install Jekyll and pages-gem on Windows (x64) or you remove the plugins by deleting the Gemfile and delete all gems: from the _config.yml

Build

  • To build the static site you can use the generated site folder that Jekyll creates when you use jekyll serve or you can build it explicitly with jekyll build.
  • If you like to use GitHub to host your blog you can fork this project and publish the code to gh-pages. GitHub has jekyll included and will generate the site for you.

User Content

Blogposts can be written in Markdown.

  • The folder for blog content is _posts
  • For author details you need to modify _data/authors.yml
  • For site properties (like the name) you need to modify _config.yml and robots.txt
  • For the about page you need to modify the about.md in _pages

After modifying *.yml files you need to restart jekyll to take effect.

YAML Features

Following (additional) features are supported in the header (YAML Front Matter) of each post. A detailed description can be found in the YAML Custom Features post.

---
title:         Example      #Page/post title
author:        jwillmer     #Page/post author
cover:         /image.jpg   #Optional: Posibillity to change cover on a post/page
redirect_from: /foo         #Optional: Redirect url
visible:       false        #Optional: Hide page from listing in the menu.
weight:        5            #Optional: Influence sorting of pages in the menu
menutitle:     Offline      #Optional: Use a secondary name in the menu/post list
tags:          hallo welt   #Optional: Will be displayed as tags and as keywords in posts
keywords:      hallo welt   #Optional: Will add keywords to a page
language:      en           #Optional: Will set a specific language of the page
---

License

The theme is released under The MIT License (MIT).

The MIT License (MIT)

Copyright (c) 2016 Jens Willmer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Theme Features

on Jekyll Theme GitHub Installation

The features described in this section are specific for this template. All other language features can be found in the kramdown documentation.

Image Features

Parallax Effect

Keep in mind that paralax effect will not be captured if you like to print the page.

<div class="bg-scroll" style="background-image: url('https://jpotato0o.github.io/media/img/mountain1.jpg')"></div>

Caption for Image

<figure>
   <img src="https://jpotato0o.github.io/media/img/mountain2.jpg" />
   <figcaption>A nice mountain.</figcaption>
</figure>
A nice mountain

Image Allignment

![](https://jpotato0o.github.io/media/img/mountain3.gif#right)
![](https://jpotato0o.github.io/media/img/mountain2.gif#left)

Allignment with caption

<aside>
   <figure class="left">
      <img src="https://jpotato0o.github.io/media/img/mountain3.jpg#left" />
      <figcaption>What a view!</figcaption>
   </figure>
</aside>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan ante nulla, quis pulvinar nibh tempus sed. In congue congue odio, vel ornare mauris ultrices vel. Vestibulum tristique eros at enim vulputate fringilla. Nullam non augue sit amet elit interdum tempus non ut justo.

Phasellus ut ipsum id leo sagittis pretium a quis neque. Maecenas rutrum lectus id magna malesuada, non dapibus neque tincidunt. Suspendisse ultrices accumsan eros, sit amet facilisis quam hendrerit a. Integer sed felis et diam efficitur accumsan. Suspendisse facilisis lectus non orci mattis vestibulum. Suspendisse molestie vulputate nunc non tincidunt. Maecenas vulputate, mauris ut rhoncus vulputate, tellus augue aliquet nibh, vel egestas nulla ipsum bibendum lorem. Pellentesque posuere laoreet lectus eget luctus. Vestibulum mattis ut ligula sed sodales. Vestibulum sit amet viverra arcu.

Fullscreen image

<div class="large">
   ![](https://jpotato0o.github.io/media/img/mountain2.jpg)
</div>

With caption

<figure class="large" markdown="1">   
   ![](https://jpotato0o.github.io/media/img/mountain2.jpg)
   <figcaption>On top of the mountain!</figcaption>
</figure>

On top of the mountain!
<div class="album">
   ![](https://jpotato0o.github.io/media/img/Screenshot_2016-04-09-19-16-28.png)
   ![](https://jpotato0o.github.io/media/img/Screenshot_2016-04-02-00-48-25.png)
   ![](https://jpotato0o.github.io/media/img/Screenshot_2016-04-01-12-03-36.png)
   ![](https://jpotato0o.github.io/media/img/Screenshot_2016-04-01-12-01-33.png)
   ![](https://jpotato0o.github.io/media/img/Screenshot_2016-03-24-12-13-58.png)
   ![](https://jpotato0o.github.io/media/img/Screenshot_2016-03-17-22-50-05.png)
</div>

With caption

<div class="album">
   // ...
   <figure>
      <img src="https://jpotato0o.github.io/media/img/mountain2.jpg" />
      <figcaption>On top of the mountain!</figcaption>
   </figure>
   <figure>
      <img src="https://jpotato0o.github.io/media/img/mountain3.jpg" />
      <figcaption>What a view</figcaption>
   </figure>
</div>
Mountain and lake
On top of the mountain!
What a view

Sourcecode Features

With language highlighting

    ```html
    <script>
        var decentThemeConfig = {
            ga: 'YOUR TRACK ID'
        };
    </script>
    ```

With language highlighting, line numbers and line highlighting

<pre data-line="5" class="line-numbers language-javascript"><code>
   Array.prototype.uniq = function () {
       var map = {};
       return this.filter(function (item) {
           if (map[item]) {
               return false;
           } else {
               map[item] = true;
               return true;
           }
       });
   };
</code></pre>

Author in quote

> Our destiny offers not the cup of despair, but the chalice of opportunity. So let us seize it, not in fear, but in gladness.
> 
> <cite>——R.M. Nixon</cite>

Our destiny offers not the cup of despair, but the chalice of opportunity. So let us seize it, not in fear, but in gladness.

——R.M. Nixon

404 Page

The 404 page has a fuzzy search implemented that lists urls that are similar to the entered url. Try it out: Unknown URL

JSON API

The theme offers a JSON API for the blog posts. You can query all blog posts via: /api/posts.json

PDF and PowerPoint integration

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://img.labnol.org/di/PowerPoint.ppt' frameborder='0'></iframe>

More

More formating features can be found in the Kramdown syntax.

YAML Custom Features

on Jekyll YAML Features Explained

In this short post I changed the title that is displayed on the front page from YAML Custom Features to YAML Features.

---
title:             "YAML Custom Features"
menutitle:         "YAML Features"
---

I also added a redirect to this post. If you browse to YAML-Feature-Redirect you should be redirected to this page. This only works if you have not removed the plugins.

---
redirect_from:     "/YAML-Features-Redirect"
---

If you like to redirect from multible sources you can specify it as an array.

---
redirect_from:  
  - "/YAML-Features-Redirect/"
  - "/blog/old-category/YAML-Features/"
---

I also changed the cover image for this block via YAML.

---
cover:         /assets/mountain-alternative-cover.jpg
---

To generate keywords for the search engines I use the tags that you specify in the post. If you are writing a page you need to specify keywords instead of tags.

---        
tags:          Jekyll YAML Features Explained  #Only used in posts!
keywords:      Jekyll YAML Features Explained  #Only used in pages!
---

Post will be sorted by category on the front page. This is how you define the category in YAML.

---        
category:     Readme
---

On a page I have additional options. For instance I can hide the page from the menu by setting the visible tag to false.

---        
visible:       false     
---

If I like to have the page in the menu I can add weight to the page in order to specify a position in the menu.

---        
weight:       5  
---

The default language of your blog is defined in the _config.yml file but if you like to write a post/page in another language you can use the language attribute. This will specify that you are using another language on this page for search engines. Please use on of the language codes as value.

---        
language:       en  
---

Additional features, that can be specified, can be found in the YAML Front Matter documentation.

This post demonstrates post content styles

on Jekyll Content Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.

Some great heading (h2)

Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu.

Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Another great heading (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.

Some great subheading (h3)

Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum.

Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.

Some great subheading (h3)

Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

This quote will change your life. It will reveal the secrets of the universe, and all the wonders of humanity. Don’t misuse it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.

Some great subheading (h3)

Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum.

<html>
  <head>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

You might want a sub-subheading (h4)

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

But it’s probably overkill (h4)

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

Specifying some footnotes (h2)

This is text with a footnote. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. 1

Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. 2 3

Oh hai, an unordered list!!

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

  • First item, yo
  • Second item, dawg
  • Third item, what what?!
  • Fourth item, fo sheezy my neezy

Oh hai, an ordered list!!

In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.

  1. First item, yo
  2. Second item, dawg
  3. Third item, what what?!
  4. Fourth item, fo sheezy my neezy

Headings are cool! (h2)

Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.

  1. Some footnote ↩

  2. Another footnote ↩

  3. Last footnote ↩