我是如何分析强制屏幕旋转的

一直喜欢看动漫,而每一季度的番剧版权都不归某一家所有,于是手机上装了ACFUN、 BiliBili、爱奇艺PPS、优酷、搜狐视频等爱啪啪。

这几个App在视频播放时,初始情况都为竖屏,点击旋转按钮切换为横屏。

用的时间久了就发现大家在播放视频时做屏幕强制旋转的方式都有点不一样。但可以划分为两派:ACFUN 、 BiliBili、爱奇艺PPS 和 搜狐视频 转动的是播放视频的 view.transform ;优酷 转动的是 UIDevice 的Orientation。

假如竖屏下以小视频播放,同时视频下有其他视图。那么这两种转动方式在 UI 上的差异为:

  • 转动 view.transform 仅是视频图层转动,其他图层不转动。
  • 转动 UIDevice 其他图层也会转动,。

如何让项目支持屏幕旋转?支持旋转的方向?如何仅让某一个控制器支持屏幕旋转?转动时执行的方法?这里就不再赘述了。请多查询资料或者参考以下几篇文章:

里脊串:如何强制旋转屏幕
王中周:iOS屏幕旋转学习笔记

这里仅强调一下,注意:决定屏幕旋转的控制权。iOS6.0+ 之后,决定屏幕旋转的控制权的优先级为 application > window.rootViewController > currentViewController。
如果 viewController 是模态出来的,那么屏幕旋转的控制权还与模态方式有关。

方式1: UIDevice 的 orientation

改变 UIDevice 的 orientation,实际上强制改变了设备朝向,从而使 window,rootVC,currentVC 视图朝向全部发生了改变。

性能分析:

  • 改变了 UIDevice 的 orientation
  • 触发屏幕旋转方法 viewWillTransitionToSize(iOS8.0+)
  • 触发 sizeClass 改变方法 willTransitionToTraitCollection

优点: 1. 视图的旋转由系统自动实现 2. 可以触发 横竖屏 sizeClass,所以适用 IB 中不同 sizeClass 下做的约束。

缺点: 改变的是 UIDevice 的方向,所以所有视图都发生了旋转。(UI不美观)

实现方式

[[UIDevice currentDevice] setOrientation:UIInterfaceOrientationPortrait];
iOS6.0之后, 改为了私有方法,不能直接调用。

虽然不可以直接调用,但是我们可以用 KVC 或者 NSInvocation 方式调用。

1
+ (void)forceOrientation:(UIInterfaceOrientation)orientation {
    // setOrientation: 私有方法强制横屏
    if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
        SEL selector = NSSelectorFromString(@"setOrientation:");
        NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:[UIDevice instanceMethodSignatureForSelector:selector]];
        
        [invocation setSelector:selector];
        [invocation setTarget:[UIDevice currentDevice]];
        int val = orientation;
        [invocation setArgument:&val atIndex:2];
        [invocation invoke];
    }
}

ps: 里脊串大神的文章中,提到使用这种方式上架无碍。

方式2: controller.view.transform

如果想要在多视图的情况下,仅使某一视图旋转,只有旋转view.transform 了。

性能分析:

  • 改变了 view.transfrom
  • 不会触发屏幕旋转方法
  • 不会触发 sizeClass 改变方法

优点: UI 优美,仅一个视图发生旋转

缺点: 1. 实现较为繁琐,需要自己实现视图旋转 2. 不会触发 sizeClass 改变,所以需要用代码写两套约束。

实现方式

如果我们选择使用改变 view.transform 来模拟横竖屏旋转。那么我们要实现的功能如下:

  1. 点击旋转按钮后,根据当前设备朝向,view 转动 90° 或者 -90°,frame 大小为全屏。
  2. 在横屏状态 left 和 right 切换时,view 转动 180°
  3. 再次点击旋转按钮,根据当前设备朝向,view 转动 -90° 或者 90°,frame 大小为窗口。状态

下面我放了一张手绘图,可以看的很明白。(图1: 视频旋转视图)
视频视图旋转

下面我们要解决的问题有以下几个:

  1. 小屏切换到竖屏时如何获得当前当前设备方向。 我们要根据当前设备方向来决定转 90° 还是 -90°。
  2. 横屏两种状态下,如何自动旋转180°。
  3. 如何转动状态条。

下面逐个分析解决。

问题1: 竖屏切换横屏时如何判断当前设备方向

一提到获取设备当前方向,普遍会想到这有什么难的。直接使用 [UIDevice currentDevice].orientation 来获取当前设备朝向不就行了么?

如果仅是简单的获取具体的设备朝向,当前可以,我们会获取到以下某一个枚举值。 但是如果用户斜着拿手机呢?

1
typedef NS_ENUM(NSInteger, UIDeviceOrientation) {
    UIDeviceOrientationUnknown,
    UIDeviceOrientationPortrait,            // Device oriented vertically, home button on the bottom
    UIDeviceOrientationPortraitUpsideDown,  // Device oriented vertically, home button on the top
    UIDeviceOrientationLandscapeLeft,       // Device oriented horizontally, home button on the right
    UIDeviceOrientationLandscapeRight,      // Device oriented horizontally, home button on the left
    UIDeviceOrientationFaceUp,              // Device oriented flat, face up
    UIDeviceOrientationFaceDown             // Device oriented flat, face down
} __TVOS_PROHIBITED;

UIDeviceOrientationUnknown 凡是不属于其他6种朝向的通划分为 unknown。 比如:斜着玩手机。

所以如果用户斜着拿手机,我们获取不到具体是 UIDeviceOrientationLandscapeLeft 还是 UIDeviceOrientationLandscapeRight。

如果想要获取到矢量方向,那么就必须要借住于 加速计。

使用加速计分析力的方向,划分横屏两个状态

加速剂中的坐标系

x轴,从左到右为正; y轴从下到上为正,z轴,从后到前为正。

所以,如果斜着拿手机,我们可以分析,力在 x,y,z 上面的受力。 下面,我画了一张手绘图:(手绘渣请见谅)

判断力的方向

ps: 注意图中人的视角。

我们来看受力图中的第一张图,此时手机 y 轴旋转,home 在右边。那么重力G,沿着 x轴 和 z 轴被分解为 x力 和 z力。x力朝向为负, z力朝向为负。 此时设备方向应该划分为: UIDeviceOrientationLandscapeLeft。

第二张图,home 键在左边。重力G 被分解为 x力, z力。 x力为正,z力 为负。此时设备方向应该划分为:UIDeviceOrientationLandscapeRight。

按照力在 x 轴的受力方向,我们可以清楚的辩知,如果 x-,那么方向应为UIDeviceLeft ; 如果 x+ 方向应为UIDeviceRight。

清楚了受力,下面上 加速计 code。

1
#pragma mark- 加速计获取x轴受力
- (void)addMotionManager {
    // 1. 创建
    self.motionManager = [[CMMotionManager alloc] init];
    // 2. 判断是否可用
    if (!self.motionManager.isAccelerometerAvailable) {
        return;
    }
    
    // pull 方式, 由我们决定
    [self.motionManager startAccelerometerUpdates];
    
    // push 方式, 一直有
    // 3. 设置间隔
//    self.motionManager.gyroUpdateInterval = 1;
//    self.motionManager.accelerometerUpdateInterval = 1;
    // 4. 开始采样
//    [self.motionManager startAccelerometerUpdatesToQueue:[[NSOperationQueue alloc] init] withHandler:^(CMAccelerometerData * _Nullable accelerometerData, NSError * _Nullable error) {
//        CMAcceleration acceleration = accelerometerData.acceleration;
//        NSLog(@"%.2f %.2f %.2f", acceleration.x, acceleration.y, acceleration.z);
//    }];
}

因为我们仅在点击旋转按钮的时候才需要判断力的朝向,所以选择了 pull 方式,节省点资源。

点击旋转按钮时判断力的方向:

1
- (void)liveViewRatation {
    CMAcceleration acceleration = self.motionManager.accelerometerData.acceleration;
    CGFloat xACC = acceleration.x; // x受力方向。
    
    if ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortrait) {
        
        if (xACC <= 0) {
            [self viewTransformRotate:M_PI_2 frame:FULLScreenFrame statusBarOrientation:(UIInterfaceOrientationLandscapeRight) isHiddrenDarkView:NO];
        } else if (xACC > 0) {
            [self viewTransformRotate:-M_PI_2 frame:FULLScreenFrame statusBarOrientation:(UIInterfaceOrientationLandscapeLeft) isHiddrenDarkView:NO];
        }
        
    } else if([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationLandscapeRight) {
        [self viewTransformRotate:-M_PI_2 frame:WindowFrame statusBarOrientation:(UIInterfaceOrientationPortrait) isHiddrenDarkView:YES];
        
    } else if ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationLandscapeLeft) {
        [self viewTransformRotate:M_PI_2 frame:WindowFrame statusBarOrientation:(UIInterfaceOrientationPortrait) isHiddrenDarkView:YES];
    }
}

问题1解决。

问题2:横屏两种状态下,如何自动旋转180°

横屏下,随着设备转动 在UIDeviceOrientationLandscapeLeftUIDeviceOrientationLandscapeRight 方向下。我们需要转动 view,让 view.transfrom 转动 180°,视图朝向与设备朝向一致。

这里我选择使用通知 UIDeviceOrientationDidChangeNotification 来观察设备方向。 具体代码如下。

1

// 注册通知
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientChange:)name:UIDeviceOrientationDidChangeNotification object:nil];

// 方向改变时,转动 view。
- (void)orientChange:(NSNotification *)notification
{
    UIDeviceOrientation  orientenation = [UIDevice currentDevice].orientation;
    switch (orientenation)
    {
        case UIDeviceOrientationLandscapeLeft:
        {
            if ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationLandscapeLeft) {
                [self viewTransformRotate:M_PI statusBarOrientation:(UIInterfaceOrientationLandscapeRight) isHiddrenDarkView:NO];
            }
        }
            break;
            
        case UIDeviceOrientationLandscapeRight:
        {
            if ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationLandscapeRight) {
                [self viewTransformRotate:M_PI statusBarOrientation:(UIInterfaceOrientationLandscapeLeft) isHiddrenDarkView:NO];
            }
        }
            break;
            
            default:
            break;
    }
}

问题3:如何转动状态条

[[UIApplication sharedApplication] setStatusBarOrientation:orientation animated:NO]

该方法iOS6.0+ 之后也被弃用了,可以用 KVC 或者 objc_msgSend() 等。

注意: 如果发现状态条并没有旋转,把自动旋转设置为 NO

1
- (BOOL)shouldAutorotate {
    return NO;
}

旋转过程中我发现,如果旋转开始时不隐藏状态条,会有视觉滞留。那么如何隐藏状态条呢?

[UIApplication sharedApplication].statusBarHidden = NO;

在 info.plist文件中,添加 View controller-based status bar appearance 项并设为 NO。

注意:如果使用 viewController 来隐藏或者显示状态条,则 View controller-based status bar appearance 设置为 YES。然后实现 prefersStatusBarHidden 方法。

1
- (BOOL)prefersStatusBarHidden  
{  
   return _isHiddenStatusBar;  
}

总结:

方式一:改变UIDevice orientation 的好处都有啥? IB 玩家的最爱,可以触发 sizeClass。

方式二:改变 View transform 的好处?UI更好看, 使用加速剂判断方向,使用更人性化,躺在床上打滚再也不用拍手机旋转屏幕了。(拍手机转动屏幕的相信不是我一个人)

两种屏幕旋转方式各有优劣,使用哪种还请看官自行斟酌。

最后放上两个 Demo:

方式1:改变 UIDevice orientation
方式2:改变 View.transfrom


参考资料:
里脊串:如何强制旋转屏幕
王中周:iOS屏幕旋转学习笔记
iOS7下隐藏statusbar
iOS中传感器的基本使用

基于 AVPlayer 自定义播放器

如果我只是简单的播放一个视频,而不需要考虑播放器的界面。iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewController. iOS9.0 之后,可以使用 AVPictureInPictureController, AVPlayerViewController, 或者 WKWebView

以上系统提供的播放器由于高度的封装性, 使得自定义播放器变的很难。 所以,如果我需要自定义播放器样式的时候,可以使用 AVPlayer。 AVPlayer 存在于 AVFoundtion 中,更接近于底层,也更加灵活。

Representing and Using Media with AVFoundation

AVFoundtion 框架中主要使用 AVAsset 类来展示媒体信息,比如: title, duration, size 等等。

  • AVAsset : 存储媒体信息的一个抽象类,不能直接使用。
  • AVURLAsset : AVAsset 的一个子类,使用 URL 进行实例化,实例化对象包换 URL 对应视频资源的所有信息。
  • AVPlayerItem : 有一个属性为 asset。起到观察和管理视频信息的作用。 比如,asset, tracks , status, duration ,loadedTimeRange 等。

我的理解是, AVPlayItem 相当于 Model 层,包含 Media 的信息和播放状态,并提供这些数据给视频观察者 比如:属性 asset ,URL视频的信息. loadedTimeRanges ,已缓冲进度。

iOS 布局中的那些坑

automaticallyAdjustsScrollViewInsets 属性

导航条影响 scrollView 及其子类的偏移量

在 iOS 开发中,我们有时候会遇到系统默认生成的一些布局,一些默认的顶部偏移量等。 比如:如果 navigationBar下面直接是一个scrollView或者其子类。那么scrollView 及其子类 内部布局会从(0,64)开始,自动向下偏移64个点。这当然是极好的,不需要我们手动调整。 64pt = 状态栏高度20pt + 导航栏高度44pt。

如图所示:一个tableViewController被设置为 navigatiViewController 的根视图。



隐藏导航条,状态栏仍然会影响 scrollView 的偏移量

有些时候把 NavigationBar 给隐藏掉,然后在 controller.view 上 添加一个自定义的 scrollView ,发现scrollView 这次向下偏移了 20pt,这20pt 是状态栏的高度。

如左边图所示: 隐藏了导航栏,添加了一个scrollView,scrollView 中的内容向下偏移了 20pt。



解决方法:自动调整滚动视图内边距设置为 No

iOS7.0 之后,在 UIViewController 中有一个属性。

1
@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets NS_AVAILABLE_IOS(7_0); // Defaults to YES

该属性默认为 YES,只需要设置为 NO,scrollView的偏移量为(0,0)。

1
self.automaticallyAdjustsScrollViewInsets = NO;

如图所示:



edgesForExtendedLayout 属性

1
@property(nonatomic, assign) UIRectEdge edgesForExtendedLayout

在 iOS 7 中,苹果在视图控制器中引入了一个新的属性,edgesForExtendedLayout。

该属性只影响容器视图控制器中的子视图控制器,比如,在父控制器为UINavigationViewController的控制器。 而对于window 的根视图控制器,并没有作用。

该属性决定了 controller.view 的布局方式,比如当容器控制器为 UINavigationViewController 时,子控制器view的布局 默认从navigationbar 的顶部开始。这会造成导航栏遮盖住下面的 view。如下图所示:



edgesForExtendedLayout 默认的返回值为 UIRectEdgeAll, 我们可以 设置为 UIRectEdgeNone 或者 UIRectEdgeBottom,解决问题。

1
#ifdef __IPHONE_7_0
- (UIRectEdge)edgesForExtendedLayout
{
    return UIRectEdgeNone; //  bottom 或者 None
}
#endif


记心里的一些想法

以前的我总是在踌躇,不知道自己该怎么走今后的方向。 是出去干开发, 还是留在这里继续教学。

我发现自己已经不知道该怎么面对学生了,如何面对一些,连键盘都不熟悉的学生。这两天,班里有一个完全没有任何基础的A同学,和一个B同学,当一天有同学问我,"" 引号应该怎么用键盘打出来的时候。 我就不知道到底应该怎么把后面的一些基本的编程思想和算法告诉给他们。

关于编程思想 和 算法这些东西,其实我自己也不知道多少,知道的仅是可以勉强教给一些小朋友而已。可是,我所说的这些小朋友,不包含连键盘也不知道怎么使用的这部分小朋友。

之前任何基础都没有的同学,就像A同学 和 B同学,同时还有其他同学。在入学面谈,我问他们,你是为什么选择编程这条路的时候,A 同学 和 B 同学的答案是:”我之前有朋友告诉我,学这个现在工资挺高的”。 同样有个没有基础的学生说:”我觉得学会这个可以掌握一门技能,通过这门技能我或许可以走的更远”。

这个给我希望可以走的更远答案的这个学生,坐在第一排。他令我回忆起了自己还是一个刚入学的只会打游戏的小愤青,在大学教室里回答政治老师的“你觉得什么是大学,你在大学的目标是什么?” 问题时,睥睨着小眼,说出——“我觉得大学是自由和坚持,当然还有性”,我觉得自己永远也忘不了,自己后面的答案:”我想在大学四年间努力学习,并且成为一个合格的计算机人才“。

当前,大学里什么也没有教会我,没有教会我性,我也没有成为一个合格的计算机人才。虽然,在大学四年四处发力,完全没有停下渴求技术的脚步。可是最终还是没有任何结果,在别人看来或许我就像一条将要溺死的狗,虽然已经爬上了岸,但还在恐慌得朝着空气滑动四肢一样。

经历过无助的我,更是知道走编程这条路的可怕。借用,一下,一位前辈文中最后的一段话:“互联网就是变化的如此快,有多么高的巅峰就有多么深的低谷。拥抱变化,这个披着正向价值观的口号,它有个不愿意被人提起的本质:‘若肉强食’,只有足够强大、足够勤奋或足够聪明才能在这里快的的工作下去吧。”

互联网就是这样,变化太快。前面的人还没有刚冲进去,后一波浪潮就过来了。可总是有那么一波人,在这个快要被淹死的时代能抱着石头潜下去,这是不会游泳的人用的一招,潜下去很深,静静得望着上面,默默成长,默默等待。等上面不那么喧嚣了,再抱着石头走上来。 这些人,总是可以在技术道路上走得很远很远,对于他们来说,没有不努力,没有不奋斗,因为他们知道羞耻,当然也或许是自卑。

对于这部分认真、努力到让我落泪的人,我唯有充满敬仰。我唯恐喝彩了一声,就是对他们的亵渎。唯有努力眨干眼睛里的泪水,再带着笑容看着。

所以,对于一些连键盘都不熟悉,就觉得编程这条路好走的同学。我此时站在他们的面前,他问着我 "" 引号怎么打,问我“老师我这个鼠标怎么动不了了”。 我突然想失声痛哭,我觉得自己对不起昨天那个说出想要成为“合格的专业人才”的影子;也对不起那个给我“想掌握一门技术,希望自己可以走得更远……”的学生。 我觉得自己好像亵渎了那些努力奋斗的人,侮辱了那些即便很苦还是在加班到很晚敲代码的人,玷污了那些做了很多前期准备,摩拳擦掌跃跃欲试进入这个区域的清湛面孔。

ps:写完这个篇文章的一个月后,从公司辞职。 以后的路,还是要好走下去的。 我埋怨以前,那是忧郁者做的事情。后面的路很宽广,人人都是动物,不是植物。 今天的风儿很喧嚣呢。

3DTouch(一)静态按钮快速掌握

在iOS 9中,新iPhone将第三维度添加到了用户界面。

用户现在可以用力摁下主屏按钮来快速调出应用提供的功能菜单。
在应用中,用户现在可以用力摁下视图以查看更多内容的预览并且快速访问一些功能。

需要明确的几个词汇

  • Home screen icon 主界面图标
  • static and dynamic quick actions 静态快捷操作 和 动态快捷操作
  • peek (preview) 预览
  • pop (commit) 打开
  • force properties 压力属性

Hexo教程(一)——搭建各人博客

MAC 上 github + hexo 搭建博客教程

一直想做个自己博客,于是近几日买了域名,在阿里云上面申请了服务器。
下面采用 gitHub + hexo 搭建各人博客。

前期准备

硬件
mac 电脑

软件

  1. github账号
  2. homebrew
  3. node.js
  4. npm
  5. hexo

注意:(node.js 集成带有npm,因此只要下载 node.js 就可以了)

  

github上创建GitHubPages仓库

git 官方参考地址: https://pages.github.com

注意:

  1. 创建仓库的时候仓库名一定严格按照 git用户名.github.io 来命名
  2. 创建仓库完成之后,把仓库 clone 到本地, 起个名字叫 public

  

下载node.js

node.js 官网地址 https://nodejs.org/en/

下载node.js 有多种方法:使用 brew 下载 或者 直接下载 安装包。 我建议 node.js 直接下载 安装包,因为使用 brew 有可能失败,会被墙掉。

注意: 不推荐使用 brew 安装node, 直接从官网下载运行即可。

node.js 下载完成后 安装到电脑上就可以了。安装成功后显示出来安装路径,可以看到 安装node.js 的时候 npm 也安装了。
如图所示:

检测安装是否成功 终端输入 -v , 成功则显示版本号

wushumin:~ wushumin$ node -v
v4.1.1

wushumin:~ wushumin$ npm -v
2.14.4

        

下载 homebrew

homebrew 是MAC OSX 上面用来安装 或者 卸载软件用的非常方面的一个软件,我经常用 homebrew 卸载 和 安装 软件。

官方网址: http://brew.sh/index_zh-cn.html

homebrew 的安装方法可以参照官网,或者 网上的一些教程。 需要注意的是 homebrew 安装的时候一定要在 sudo 管理员权限下安装,否则 可能遇到写入失败的问题。

   

下载 hexo

hexo 官网地址: https://hexo.io/zh-cn/docs/ ,点击右上角可以切换语言。
点击 开始使用 或者 文档 ,进入 hexo 使用说明。我们需要把 hexo 下载下来。

使用 npm 安装 hexo,官方给出来非常详细的安装方法。
https://hexo.io/zh-cn/docs/

使用命令行装软件的时候 ,当前在哪个路径下,就会装到哪个路径下。 系统的软件除外。npm 安装软件时有默认路径因此我们不用特意去为 hexo 创建安装文件夹。

注意: hexo的时候可能会出现这样的错误

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }    
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

原因是 我国防火墙网络墙的问题,导致安装hexo的时候少装了几个库。 解决方法,换一个源重新装:

$ npm install hexo –no-optional

hexo 下载完成后 运行一下 看是否安装成功

hexo -v

hexo 安装成功后,我们开始使用 hexo 建站。

建立本地站点

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

我们也可以先把本地站点的文件夹建好,然后用命令行进入folder文件夹。
比如: 我们先创建一个 hexo 文件夹 ,然后cd 进入该文件夹 ,执行 init 即可。

cd hexo
hexo init
npm install

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

本地站点建立成功后,可以cd 进入站点文件夹,然后 执行 hexo server 启动站点

$ hexo server

站点默认端口为 http://0.0.0.0:4000

在浏览器中 输入 http://0.0.0.0:4000 就可以看到 站点了。

生成器

本地站点搭建好后,就可以生成静态界面了。

开启本地hexo 服务器:

wushumin:public wushumin$ hexo server
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

创建新文章

wushumin:public wushumin$ hexo new “Hexo教程(一)——搭建各人博客”
INFO Created: ~/Desktop/MyGitHubPage/littledogboy.github.io/hexo/source/_posts/Hexo教程-一-——搭建各人博客.md

生成 html js 站点文件

wushumin:public wushumin$ hexo generate

发布

把public 文件里面的文件,推送到我们 的github仓库里。
注意: 不要包含 public 文件夹,只推送 文件里面的文件即可。

         

绑定域名

githubPages 绑定域名 官方文档:
https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/

一、 创建并提交一个 CNAME 文件

  1. 在本地仓库创建一个名为 CNAME 的文件,注意: 没有任何后缀。

    CANAME 可以是 一个 md 文件 或者 txt 文件。

  1. 文件内容是域名

    比如:我的域名是 littledogboy.com

    littledogboy.com

  1. 然后保存(这个今后要一直用的),把 后缀名去掉。
  1. CNAME 文件 commit 到 github 上对应的仓库里 littledogboy.github.io

这时候如果你输入域名 www.littledogboy.com想要直接访问 github 上的博客会访问不到 ,因为还没有进行地址解析。

  

二、域名解析

1. 购买域名

进行域名解析,首先需要有个域名。 域名的购买有多种方式 可以上 “狗爹” ——外国的一个域名网站,或者上我们国的阿里云购买(万网和阿里云已经合并了),我推荐还是上阿里云买,如果后来你想换回国内空间的话会省好多事情,而且阿里云的dns解析也很方便。

godaddy地址: https://www.godaddy.com

以前我们在万网上购买,现在万网与阿里云合并了。

阿里云地址域名购买地址: http://wanwang.aliyun.com

2. 域名解析

现在我可以通过 githubpages 地址来访问我们的各人博客

比如我的:http://littledogboy.github.io

(1) 什么是域名解析

域名就是我们平常所说的网站名 比如百度 baidu.com 、腾讯QQ qq.com

而我们之可以可以通过网站名访问网站,实际是访问的网站地址对象的 ip 地址对应的主机

通过网站名访问网站是对域名做了一个解析, 比如我要上 老王家,你就把老王的门牌号告诉我,我就可以找到老王家。 老王 就是域名, 门牌号 就是 ip 地址。

因此我们首先需要知道我们 githubpage 的ip地址

(2) ping 到我们的gitHubPages的ip地址

ping http://littledogboy.github.io

64 bytes from 103.245.222.133: icmp_seq=0 ttl=52 time=139.390 ms

64 bytes from 103.245.222.133: icmp_seq=1 ttl=52 time=139.102 ms

103.245.222.133 就是我的ip地址

(3) 域名绑定 ip 地址

在阿里云登录你的账号,找到域名相关选项。

点击解析进行域名解析:

添加等级域名 www ,就可以通过 www.littledogboy.com 来访问网站
添加 @ , 就可以直接通过 littledogboy.com 来访问网站