Facebook出品的Android声明式开源新框架Litho文档翻译-增量式挂载

2017-04-27 Android知识

欢迎转载,转载请标明出处.
英文原文文档地址: Litho-doc

架构

增量式挂载


虽然Component提供了扁平化的view层级结构和主线程外的布局计算功能,但是装载操作(包括对view和drawable的创建,回收和附加工作)在复杂的component中依然花费主线程的大量资源,尤其是那些包含很多view的component.

Litho可以把装载component的花费平均分配至每一个UI帧来避免卡顿,并且对开发者来说是透明的.

使用增量式挂载(默认支持),LithoView将只会挂载与当前可见区域大小相适应的内容并且卸载(并且回收)那些已经看不见了的component.


如果你使用Litho的异步RecyclerView支持,框架将会无缝的支持增量式挂载.




回到导航页




Facebook出品的Android声明式开源新框架Litho文档翻译-回收机制

2017-04-27 Android知识

欢迎转载,转载请标明出处.
英文原文文档地址: Litho-doc

架构

回收机制


设备屏幕通常以每秒60帧的速率刷新。为了能提供流畅的UI效果，应用程序需要能够每16ms一帧的速度持续渲染我们的UI。如果达不到这个时间标准，就会导致丢帧和不佳的用户体验。随着UI变得越来越复杂，在限制的时间内越来越难以完成所有的渲染工作。特别是在动态滚动的界面上,因为新的UI块的不断被添加到屏幕上，完成渲染就变得尤其有挑战性。
Android使用RecyclerView解决了这个问题，RecyclerView是一个动态UI容器，可以通过创建足够的视图来填充屏幕，然后在UI滚动中回收和重用它们，以显示大量数据中的元素。

RecyclerView支持异构的内容的显示。为此，它会根据item的不同的类型将其保留在不同的池中。虽然这个方法在简单情况下工作正常，但是对于具有许多不同item类型的UI，这种方法已经被证明是有问题的。在具有许多item类型的场景中，如果一个item随着滚动事件进入视窗,则它这种类型的item是RecyclerView第一次显示可能性非常大。如果发生这种情况，RecyclerView必须为这个item进行内存分配。在短短的16ms中,RecyclerView必须为新的item进行绑定，测量和布局工作。


Litho增量式回收

我们希望为Litho建立一个更具可扩展性和更高效率的回收系统，同时我们希望从API中消除item类型的复杂性。在Litho中，布局的描述与实际用于在屏幕上呈现UI的Views和Drawable完全不相关。这意味着当我们需要在屏幕上放置一个新的RecyclerView item时，我们已经完全知道了该item的内容和该item与其余UI的相对位置。这允许Litho完全摆脱item类型的概念。在recyclerview滚动时,比起重复利用view来表示item,我们选择了增量式的利用例如Text或者Image这样的构建块.这种做法在传统的Android view上是不可能的，因为在传统的Android中,我们需要在完整的view tree上进行布局计算,当我们算出所有view的位置时，一切都已经被实例化了。

回收利用像Text这样的”原始item”能够大大增加应用程序的内存效率，比如你可以回收list中的任何一个Text的给其他需要显示的Text来用。最重要的是，由于我们的布局是提前计算的，所以我们能够确切地知道一个新的item什么时候会变得可见，这意味着，我们可以在屏幕上引入非常少量的”原始item”来显示每一帧,而不是在一帧中绑定并且绘制一个大的view tree。




回到导航页




Facebook出品的Android声明式开源新框架Litho文档翻译-编写动机

2017-04-25 Android知识

欢迎转载,转载请标明出处.
英文原文文档地址: Litho-doc

介绍Litho

编写动机


在Android上构建一个列表式界面相当的简单，虽然大多数app要更加复杂一点，但是大体上你只需要编写一个列表中Item的layout，然后再将其挂载到RecytclerView的adapter上去就完成了。

当你的adapter拥有许多类型的view的时候，你就不得不去考虑一种更健壮的方法来回收view。如果你有很多很多种类型的view时，每次一个新的类型的view被显示的时候，RecyclerView都会不断的inflate新的view，这很可能导致滚动时帧数的下降。

你可以通过回收和重复利用,在多个item之前共享一些view实例,来达到减少view的类型的目的,但是随着你添加了更多的逻辑到你的产品中去,bug往往会越来越容易发生.

如果列表的item比较复杂,你很可能会优化你的layouts.对于简单的情况,你可以直接使用Android库里的layout来避免许多的”坑”,但是情况往往比较复杂.在这种情况下,一个通用的做法是特别为你的需求定制特殊的Custom view(客制化view).使用Custom view可以有效的提升UI的效率,但是由于它们会增添项目的复杂度并且维护成本也很高,所以会拖慢项目进度.

你也可以通过分解一个复杂的item为多个小的item,来把滚动时计算布局和绘制每一帧的花费的时间分解开来,从而优化RecyclerView的item.这种方法在一些情况下效果不错,但是它通常会导致adapter中view类型的爆炸式增长,并且有可能仍然需要花费代价去创建Custom Views,这就依然导致了我们上面所讲到的问题.

Litho主要工作就是把优化RecyclerView的复杂工作打包起来.在使用Litho时,没有view类型的区别,你可以在后台线程中提前、无缝的构建你的UI,并且自动地把他们渲染成更加扁平化的层级结构。这些梦幻的特性，你都可以免费的通过一套非常简单的编程模式来获得。




回到导航页




Facebook出品的Android声明式开源新框架Litho文档翻译-Litho是什么?

2017-04-25 Android知识

欢迎转载,转载请标明出处.
英文原文文档地址: Litho-doc

介绍Litho

Litho是什么?


Litho是一个为在Android系统上高效的构建用户界面(UI)的声明式框架.它允许你通过使用一套基于Java注解的简单的API来编写最优化的Android views.这个框架主要是被设计用来实现在RecyclerView上构建复杂的可滚动的UI的.

通过Litho,你可以使用Litho的Components(组件)代替传统的Android Views来构建UI.一个Component本质上是一个带有不可变输入(我们称之为props)并且返回component hierachy(组件层级结构)来描述UI的方法.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@LayoutSpec
class HelloComponentSpec {
  @OnCreateLayout
  static ComponentLayout onCreateLayout(
      ComponentContext c,
      @Prop String name) {
    return Text.create(c)
        .text("Hello, " + name)
        .textSizeRes(R.dimen.my_text_size)
        .textColor(Color.BLACK)
        .withLayout()
        .paddingDip(ALL, 10)
        .build();
  }
}

你只需要简单的声明你想要展示的元素,然后Litho就会自动的渲染他们,并且以一种高效的方式——使用后台线程计算布局参数、自动扁平化层级结构、还有使用增量式挂载机制处理复杂的component。

我们的教程可以指导你一步一步的在你的APP里使用Litho，或者你也可以阅读”快速开始”来学习如何编写和使用Litho的Component。




回到导航页




Facebook出品的Android声明式开源新框架Litho文档翻译-使用

2017-04-25 Android知识

欢迎转载,转载请标明出处.
英文原文文档地址: Litho-doc

介绍Litho

使用


Litho的首要使用场景为:具有复杂内容的RecyclerView.因为它甚至在具有复杂的item和多种类型的内容RecyclerView上也表现出了极好的滚动特性.这在使用传统的android view的情况下是非常具有挑战性的工作.

你也可以因为Litho简单的声明式的API来选择采用Litho来构建UI,Litho的基于单向数据流函数式编程模型会在你的产品变得复杂的时候也很容易理解.

高动态化的UI动画和复杂手势现在还很难用Litho实现,新的针对layout专场和手势的API将会很快推出.




回到导航页




为你的Github README生成漂亮的徽章和进度条

2017-03-01 其他知识

github上常见的徽章标签和进度条

平时在上github的时候看到别人写的精美的README,我总是感到非常的羡慕.近来我也开始使用markdown写博客,看到之前有一些项目的README的开始部分总是会有例如

这样的徽章样式的标签.

甚至还有些文章会有


这样的进度条,简直炫酷.这是怎么做到的呢?

已有的标签小程序

网上搜了一下,用shields.io就可以解决!
但是这个网站怎么用?貌似写的不太清楚,网上也没有详细一点的介绍微博,只能自己试验了一下.

我的理解这个网站提供了一批”标签小程序”,他们的作用是抓取一些动态的数据并自动生成标签图片.
比如抓取github上项目的最新的release版本号生成release标签,抓取twitter的账号关注人数生成关注标签等等.
使用这种标签能够保证每次刷新网页都会重新抓取数据,并且重新更新标签上的文字.这样就实现了动态变化的徽章标签.

举例来说:

这一行的小程序功能就是用来展示某一个github项目最新的release版本号.

点开你可以看到如下界面

Image这一行就是小程序的URL,前面的

1
https://img.shields.io/github/release/

是小程序的位置,后面需要填写要获取的github用户名和项目名.svg,例如著名的tinker项目

它的用户名是Tencent,项目名是tinker,所以我们把上面的小程序的URL补全成

1
https://img.shields.io/github/release/Tencent/tinker.svg

这样一个小勋章就做好了,我们可以把上面的URL粘贴到浏览器地址栏试一下

是不是很炫酷?
再上tinker-release的github上看一下,果然显示的版本号就是tinker最新的版本号.

等等,这就生成好了?那上面的小程序界面其他的部分是做什么的呢?
其实小程序只是为我们提供了一个便捷生成markdown图片链接的方式:
Link后面可以填写我们希望点击徽章跳转到的URL,注意这个地址跟徽章上显示什么毫无关系.能够影响徽章上的文字的只有Image后面的URL.

填写了Link后,下方的Markdown后就会自动生成对应的markdown语法生成的徽章图片链接.如果我们在写github的README,就可以直接复制Markdown后面的文字,粘贴到README里面,是不是很方便.

最下方的

1
2
3
4
Documentation
If your GitHub badge errors, it might be because you hit GitHub's rate limits.
You can increase Shields.io's rate limit by going to this page to add Shields as a GitHub application on your GitHub account.

的意思是如果小程序无法自动获得版本号,可能是由于github对小程序有限制,想要减少这种限制可以点击going to this page 去授权Shields访问github.

生成自定义徽章标签

那么,如果我们想要生成的徽章字样和颜色shields.io上面没有怎么办?
例如我们想生成一个

的徽章我们应该怎么做呢?

把shields的网站拉到最后,可以看见

对,就是这里!像我这样填,再点击Make Badge按钮就可以生成我们想要的任何徽章了!
color的颜色如果不知道怎么填,可以点击输入框会有下拉项提供选择哦

生成进度条标签

最后,我们想生成进度条怎么办?

使用progressed.io很简单就能生成!

如图

只要把URL中的数字换成自己想要的,就可以生成各种样式和颜色的进度条了.

其他

  • 如果我们在写markdown的时候想为我们的徽章或者进度条添加点击跳转的超链接,可以使用超链接和图片的语法嵌套来写,具体可以参照markdown标准语法.
1
[![](徽章/进度条URL)](点击超链接)
  • 自定义徽章和进度条由于参数是写死的,不会根据网络的数据自动变化上面的文字,所以,这些标签是静态的,修改的时候需要我们手动更改URL.

一个好用的Android比例自动适配的库

2017-02-28 Android知识

今天刷github的时候发现一个鸿神写的很牛逼的适配库——AndroidAutoLayout.
刚好公司需要适配不同大小的屏幕,就简单试用了一下,感觉不错.集成简单,支持的控件广泛,使用灵活,虽然已经是15年写的了,但是现在用起来也没有发现什么冲突和崩溃.所以写到博客上推荐给大家.

优势

这个库实现的最方便的功能是:我们拿到UI部门给出的以px为单位标注的设计图后,直接照抄上面的px尺寸就能写出一套适配于所有分辨率的xml layout.不仅免去了对着设计图把px转成dp的麻烦,而且也不用为不同的屏幕编写多套layout.很有一套UI打遍天下的感觉.
而且使用这个库理论上完全可以使用一个FrameLayout,里面的view使用margin定位,不用嵌套就能完成UI,对UI效率也有很大提升.

原理

简单学习了一下源码,这个库的核心思想是,事先按照设计图设定好设计图的宽高(design_width/design_height),然后把设计图上所有控件的px尺寸按原单位px填入xml文件中,最终这个库会根据设计图总体尺寸和控件尺寸,算出控件在设计图上占的宽高比,再根据实际屏幕大小动态放大或缩小控件以保证控件在实际屏幕上占的比例和在设计图上占的比例一致.

这种按比例缩放的方法不仅可以用在控件本身的大小上,也可以同理应用到控件的margin/padding/textSize等跟大小相关的属性上,统一缩放以后,在不同的屏幕上显示的效果就都跟设计图上一致了.

使用

1.首先添加库引用.

1
2
3
dependencies {
    compile 'com.zhy:autolayout:1.4.5'
}

2.在项目的AndroidManifest中注明设计稿的尺寸。

1
2
3
4
<meta-data android:name="design_width" android:value="768">
</meta-data>
<meta-data android:name="design_height" android:value="1280">
</meta-data>

3.界面的改动.

  • Activity界面的用法

让Activity继承AutoLayoutActivity

1
2
3
4
5
public class MainActivity extends AutoLayoutActivity {
.......
}
  • Fragment界面的用法

在onCreateView生成返回生成的view之前使用AutoUtils重新计算view的大小(一定要在对view的全部处理完成后再调整大小).

1
2
3
4
5
6
7
8
9
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
	View view = inflater.inflate(.......);
	.........
	.........
	AutoUtils.autoSize(view);
	return view;
}
  • 动态生成的view的用法

以上两种都是对xml中写好的静态的layout进行大小适配的用法.如果需要动态生成view,比如生成页码按钮,添加到页码容器中,需要在生成结束后,添加到容器之前调用AutoUtils进行大小调整.

1
2
3
4
5
6
7
8
9
10
11
//动态生成pageBtn,并且动态设置宽高间隔等
TextView pageBtn = new TextView(getApplicationContext());
pageBtn.setPadding(10 , 20 , 30 , 40);
pageBtn.setTextSize(25);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40 , 40);
layoutParams.setMargins(10 , 20 , 30 , 40);
//在全部生成完毕后,添加至容器之前调整大小.
AutoUtils.autoSize(pageBtn);
pageBtnContainer.addView(pageBtn , layoutParams);

做完之后,记得把dp换成px,大小换成跟设计图上标注的一样的px值.
集成完毕,适配完成,就这么简单~

其他

感谢张鸿阳大神提供这么好用的库.

AndroidAutoLayout的github
鸿神写的AutoLayout的介绍文章
AndroidAutoLayout的项目介绍

以上介绍中还附上了许多进阶用法,学习中…

如何使用github和Hexo搭建个人博客

2017-02-23 Web前端知识

为什么要写个人博客?

这一阵子是项目间隙,略闲,之前的项目中学到了很多东西,一直没有时间整理沉淀,现在终于有时间了,列了个计划打算把各种遇到问题和解决经验沉淀到文字里,方便自己今后查看,同时也可以分享给别人,利人利己.

之前工作之余有些零碎经验都是写到网易云笔记之类的笔记应用里,这样虽然比较方便,但是不分享的话别人就不能看,不如博客这种形式,谁都可以搜到,更加便于传播.而且作为一个码农,拥有一个高大上的技术博客,也是一件高逼格的事不是吗 ^_^

为什么要自己搭建博客系统?

想要写一个技术博客,有很多种途径,比较快速简单的方法是找一个像CSDN blog这样的博客平台,申请一个账号直接就可以写,但是总觉得作为程序员,这样还不够酷.那么为什么尝试不自己搭建一个博客试试呢?既可以满足写博客的需求,也可以在搭建的过程中学习web相关的知识,一举两得.而且自己搭建博客可以不用被博客平台的框架束缚,博客的可定制性更强,我们想加什么就可以加什么,那不是更爽?

所以,我果断放弃了博客平台,自己搭架子!开干!

大体上需要做什么工作?

博主毕业以后一直是从事Android App的开发,对web前端的工作接触的比较少,除了计算机和网络的基础知识,几乎是0基础.在查了很多资料以后,大致了解到搭建博客系统主要需要解决两个问题.

  1. 怎样便捷的把我们文章中的文字编码成网页文件,并且组织分类建立一个博客网站?
  2. 我们的博客网页文件放在什么地方?

博客框架介绍

以博主的web开发能力,每篇文章都自己写网页是不现实的,而即使是web开发大神,也不会所有网页都自己写,因为太麻烦太繁琐了.
那么有没有什么自动化的整理排版网页生成工具可以用呢?当然有!我们需要利用博客框架来自动生成网页文件.

博客框架是指一个自动化的程序,我们只需要以框架要求的语法(如markdown)提供我们博客文章的材料,它就会自动帮我们排版文字,转换成网页文件,生成网页层级组织,生成网站首页,一切都是全自动的,我们只需要关心我们文章的内容就够了.自动化万岁!

而博客框架一般分为动态页面框架和静态页面框架两种.

动态框架

动态页面框架是指用户在访问我们的网站的时候,所有的网页都是在访问的时候动态生成的,平时没有,访问的时候现场生成,这种框架的好处是搭建简单,现用现做,支持评论互动,功能比较强大.但是需要服务器支持php和数据库.这一类的框架比较著名的是WordPress.
由于这类框架要求服务器有数据库和php支持,本篇文章暂时不讨论,我会在今后的文章中写一写如何使用vps+wordpress搭建个人博客.

静态框架

这一类的框架是指我们每次在写完文章后启动框架为我们生成一套网页文件，这套文件部署在服务器上供别人访问，其中的内容是不会变动的，直到我们下次修改或写新的文章后再生成一套新的文件部署到服务器后，网站的内容才会改变．网站上的内容是静态的，因此成为静态博客框架．这类框架比较有名的就是今天要介绍的Hexo.
这类框架的好处是对服务器要求简单,不需要php和数据库支持.但是比如文章评论等动态改变网页内容的功能,在这种框架中生成的网页中就无法实现了(事实上,如果一定要使用评论功能,可以使用Disque之类的第三方服务集成到Hexo生成的网站中来实现评论,原理还是利用第三方的服务商的数据库和服务器来存放评论数据,本文就不多介绍了).

网页存放空间介绍

我们的网页生成了以后,我们还要找地方去存放它们,这时候我们就有了很多选择.

购买VPS

VPS是虚拟服务器的简写,相当于一台完整的计算机,可以安装软件,存放数据,下载上传,但是它不在我们面前,而是在VPS服务商的机房里,我们只能通过远程去操作这台计算机.
由于VPS就相当于一台完整的计算机,所以我们在上面的可操作性比较大,我们可以安装服务器程序用来提供网页下载服务,安装php提供后端处理能力,安装mysql提供数据库服务.非常灵活.因此VPS可以同时支持动态博客框架和静态博客框架.

使用Github pages

GitHub Pages是GitHub提供的一项免费服务.每个GitHub账号可以申请一个pages仓库用来存放网页文件.而GitHub在已经安装好了服务器程序以便于浏览器访问这些网页.由于GitHub Pages不支持php和数据库,因此只能在上面部署静态博客框架.

为什么选择GitHub pages + Hexo?

看起来GitHub pages比起VPS限制很多,但是Github pages有一个巨大的优势——免费!没错,它是免费的!
一般国外的VPS像Vurtl、Linode这样的便宜的也要35-40/月,稍微靠谱点的就100+/月了,国内的就更贵,带宽流量限制不说,最便宜的也得60+大洋,这个成本对于个人博客来说太高了.而使用GitHub page,可以免费获得每个账号300M的网页存放空间.对于个人来说足够了,而且GitHub也是程序员牛人聚集的地方,很多大牛也是用GitHub pages搭建自己的博客,因此这也是一件很有逼格的事!
对于博客框架,动态框架由于需要数据库和php支持,因此就不能使用了,但是静态框架还是可以用的.而Hexo也是现在使用比较广的,也比较简单部署的静态框架.所以我们选择GitHub pages + Hexo来部署我们的博客.

那么,既然方案确定了,那就剩实施了,我们一步一步来完成:

如何获得github page网页空间?

使用github我们当然需要先安装git,如果你没有用过git,请先学习一下Git使用教程.
获得github page空间非常简单.首先,你得有一个女朋…啊不对,是github账号,如果你已经有了,那非常好!如果没有,快去注册一个,这个网站对程序员非常有用,真的!

有了github账号之后我们需要按照特定的规则申请github page的数据仓库(repository).

第一步我们点击sign in登录github.

第二步我们点击New repository建立一个新的仓库

第三步在仓库名称里面输入我们的用户名.github.io.
注意!必须是这个名字,其他的名字不行!
比如我们的用户名是aaa,我们的仓库名就必须是aaa.github.io

第四步选择public,并且点击create repository建立仓库

建立好之后我们就已经有了自己的网页存放空间啦!对!就这么简单!今后通过

1
http://我们的用户名.github.io

就能访问我们的博客啦.

今后我们部署网页的时候只要先clone我们的仓库,然后修改其中的内容(例如添加网页删除网页等),最后commit + push到github上就可以了.当然,这也很麻烦,所以Hexo为我们提供了一键生成+发布的功能,今后连commit+push也可以省去啦,这个我们后面会说.

如何部署Hexo框架?

Hexo需要部署在我们自己的计算机上,由于Hexo是基于Nodejs编写的,所以我们首先需要安装Nodejs

在Nodejs官网上下载并安装Nodejs.

安装完毕后在我们的电脑里建立一个新的文件夹来存放我们的博客工程文件,例如D:/blog

在文件夹里右键选择git bash 打开命令行

使用npm安装Hexo

1
npm install -g hexo-cli

-g参数是要求全局安装,这样我们以后就可以直接在命令行里使用hexo命令了.
由于npm安装在国内速度简直是龟速,在使用npm install安装的时候建议使用vpn代理加快安装.

由于我们要提交到github上,我们还需要安装hexo git提交插件.

1
npm install hexo-deployer-git --save

下面初始化博客工程

1
2
3
hexo init <folder>
cd <folder>
npm install

上面的folder为博客的工程名,我们可以自己起,例如testBlog

完毕以后我们可以进入我们之前初始化好的文件夹,例如D:/blog/testBlog中,修改_config.yml文件来调整hexo的设置.

title: 这里填写博客的标题
subtitle: 这里填写博客的副标题
description: 这里填写博客的描述
author: 这里填写博客的作者
language: 这里填写博客的语言,如果是中文填写”zh”
url: 这里填写我们之前申请的博客网页存放空间的网址,例如我们的github用户名为”aaa”,这里就填写”http://aaa.github.io“
deploy:
type: 这里填写”git”
repo: 这里填写我们之前申请的git仓库的地址,例如我们的用户名为”aaa”,则此处填写”git@github.com:aaa/aaa.github.io.git”

暂时就填写这么多就够了,其他的部分暂时先不做修改,保存,退出.
如果需要了解更多hexo的配置或者想要做更高级的定制,可以查看官方配置说明

此时我们的Hexo基本已经假设好了,现在生成一下我们的博客看看效果.

1
hexo g -d

这个命令的意思是使用hexo生成整个博客的网页文件,并且上传到我们刚才repo里面填写的git仓库里.hexo会自动检索我们博客文章的改动,删除,增加,并生成一套新的网页.
等待命令执行完毕.

好了,现在我们访问我们的博客试一下,打开浏览器输入

1
http://你的github用户名.github.io

然后回车.

哈哈!博客架好了!这就是我们博客的主页,并且Hexo还为我们自动生成了一篇示例文章Hello World.

如何写文章?

博客架好了,可是我们怎么写文章呢?
也很简单,回到我们刚才的git bash命令行模式,进入我们的博客文件夹.使用new命令建立一篇新的文章,.以D:\blog\testBlog\为例

1
2
cd /d/blog/testBlog
hexo new goodDay

这样我们就建立了一篇名叫goodDay的新文章.

此时,我们打开资源管理器,进入 D:\blog\testBlog\source\_posts.
我们会发现自动生成了一个goodDay.md文件.我们就需要在这里进行文章的写作.
从文件的后缀名.md可以看出,这是一个markdown文件,我们需要使用markdown的语法编写,这非常容易,通过不多的文字即可实现文章\标题\正文\代码\图片的排版,而且非常美观,如果你不了解markdown的语法,可以查看markdown入门
虽然使用系统的记事本就能编辑.mk文件,但是还是强烈建议使用专业的markdown编辑软件,例如MarkdownPad,来编辑,可以方便的实现边编辑边预览,非常方便.
文件夹中还有一个hello-world.md,这就是我们刚才在网站上看到的示例文章.我们也可以参考其中的语法进行我们自己文章的写作.如果我们要这边示例文章了,可以直接删除hello-world.md文件即可,在下次使用hexo生成博客网页后,这边示例文章就会从我们的博客中被删除.

打开goodDay.md,我们可以看到如下的内容

1
2
3
4
---
title: xxx
date: xxx
---

这些以—开始和结尾的内容叫做Front-Matter,负责设置本篇文章的一些属性,此部分的内容不会显示在文章正文中,我们简单的修改一下,文章的标题我们设为”好天气”,文章写作时间我们设为2017-02-24 15:00,我们再给文章加两个tag:t1和t2,再加一个分类:”前端知识”,方便以后管理.
goodDay.md修改如下

1
2
3
4
5
6
---
title: 好天气
date: 2017-02-24 15:00
tags: [t1,t2]
categories: 前端知识
---

在—下方我们可以编辑我们文章的正文了,我们简单写两句

1
2
3
4
5
6
7
8
9
10
---
title: 好天气
date: 2017-02-24 15:00
tags: [t1,t2]
categories: 前端知识
---
## 好天气啊
### What a Good Day!
真是适合春游的好天气

保存,退出.好了我们的文章写完了,可以生成网页并且发布了,还记得命令吗?

1
hexo g -d

这样我们的一遍文章就已经写好并发布了,去我们的博客上查看一下吧~(^o^)/~

好了.到这里,我们已经成功的搭建起了一个自己的技术博客,今后我们需要写文章的时候只需要按照之前写的方式新建.md文件,修改,使用hexo生成网页并发布即可.

由于博主也是才开始玩这一套框架,自己也有很多还没有摸透的地方,今后在使用中如果还有什么进阶的玩法,我会再开一篇文章写出来.

感谢各位能看到这里.希望大家都能玩的开心.