猫窝私语 — Makumo's Blog

玛酷猫的温馨小窝,记录生活点点滴滴。

@玛酷猫3 年前

12/21
14:37
其他

skrollr中的anchor-position

前段时间有个项目需要在页面上使用视差效果,第一时间就想到了老牌的skrollr.js,虽然作者在2014年就已经不在更新的,不过放到现在依旧是比较好用的一款,然而在应用中着实被anchors的relative mode坑了一小下,记录下。

absolute mode的代码格式为data-[offset]-[anchor]
relative mode的代码格式为data-[offset]-(viewport-anchor)-[element-anchor]
在项目中吧viewport和element搞反了,盯了半天才找到原因。顺便放下官方的anchor-position示意图

skrollr中的anchor-position

@玛酷猫5 年前

06/10
11:46
其他

阿里云设置泛域名SSL证书

泛域名SSL证书首选还是Let’s Encrypt,之前小窝加装泛域名证书用的也是它,具体可以查看之前的文章小窝加装泛域名SSL证书,今天帮朋友的站点设置SSL证书,步骤不太一样,顺便记录一下。

首先还是要下载acme.sh,安装成功后断开重新连接下终端,要不会后续的命令提示找不到

curl https://get.acme.sh | sh

由于朋友的域名是在阿里云上面,操作和DNSPOD上有些区别,先登录阿里云,在产品与服务里面,找到监控与管理分类,再在里面点选访问控制,或者在产品与服务下面直接搜索RAM访问控制,进入后先在左边菜单人员管理——用户里面新建一个用户,新建用户成功后会显示该用户的AccessKey ID和AccessKey Secret,这时候一定要记录下这两个值,因为这个只显示一次,如果丢失的话只能重新新建用户。随后在用户列表新建的用户后面操作里面点选添加权限,在弹出的权限列表里面搜索解析
,然后选择AliyunDNSFullAccess,后面备注是管理云解析(DNS)的权限。添加后点最下面的确定就好。

随后回到服务器命令行,依次键入下面命令(修改成对应的参数)

export Ali_Key='之前记录下的AccessKey ID'
export Ali_Secret='之前记录下的AccessKey Secret'
acme.sh --issue -d xxxx.com -d *.xxxxx.com --dns dns_ali

等待执行完毕就好。后续的服务器端的配置就和之前文章所写类似。

顺便一提的是Let’s Encrypt有申请错误的限制,同一域名同一账号连续失败5次后会被暂停申请1个小时,之前忘了给RAM用户附加权限,提示添加txt校验域名失败,添加权限后,然后就出现如下提示

 Create new order error. Le_OrderFinalize not found. {
  "type": "urn:ietf:params:acme:error:rateLimited",
  "detail": "Error creating new order :: too many failed authorizations recently: see https://letsencrypt.org/docs/rate-limits/",
  "status": 429
}

这个就是频繁提交失败后被服务器暂停申请了,等1个小时再试就好了。

阿里云设置泛域名SSL证书

@玛酷猫6 年前

02/16
16:33
其他

Ionic 3 升级 Ionic 4 迁移踩坑系列(四)

路由
Ionic4整体舍弃了Ionic3中的使用IonicPage设置路由地址的方法,而完全使用Angular的路由器(虽然在ionic3中也可以使用Angular路由,不过之前项目都是使用Ionic3的路由方法)
在初始化的项目结构目录里src/app/app-routing.module.ts文件,一个简单的结构类似下方:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PermissionGuard, WelcomeGuard } from './guard/';

const routes: Routes = [
  { path: '', redirectTo: '/welcome', pathMatch: 'full' },
  { path: '', canActivate: [PermissionGuard], children: [
    { path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
  ]},
  { path: 'welcome', canActivate: [WelcomeGuard], loadChildren: './pages/welcome/welcome.module#WelcomePageModule' },
  { path: 'sign-in', loadChildren: './pages/sign-in/sign-in.module#SignInPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

在这个简单结构中包含一个tabs主模块,一个欢迎页,一个登录认证页面。用户第一次访问时,由第一条路由配置导向欢迎页,在欢迎页的配置上有路由守卫(Route guards)的设置,用来判断是否第一次访问,如果不是则引导到主模块,在主模块上同样配置一个路由守卫,用来检验用户权限,如权限不正确则引导到登录页面。此外路由不仅可以配置在总的路由配置文件中,也可以配置在各级子模块中,一方面清晰模块关系,同时也方便模块的添加和移动。路由相关配置也有很多,详情可以参考官方文档,这里是传送门

路由守卫
在Ionic3中,使用ionViewCanEnter和ionViewCanLeave实现Route guards的功能,而在Ionic4中,由于使用Angular的路由,同样也使用其对应的路由接口,在官方文档中,有5种接口,分别是

CanActivate to mediate navigation to a route.
CanActivateChild to mediate navigation to a child route.
CanDeactivate to mediate navigation away from the current route.
Resolve to perform route data retrieval before route activation.
CanLoad to mediate navigation to a feature module loaded asynchronously.

在上面的例子中,使用了两个路由守卫用来判断是否第一次访问和是否具有用户权限,其中判断初次访问的例子如下

import { Injectable } from '@angular/core';
import { Router, CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class WelcomeGuard implements CanActivate {

  constructor(public router: Router, private storage: Storage) {}

  async canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const first = await this.storage.get('firstIn');
    if (first) {
      this.router.navigateByUrl('app/tabs/(home:home)');
    }
    return !first;
  }
}

在路由守卫中判断本地存储中是否存在首次访问的标识,有的话就直接进入tabs模块的home子模块。更多详细用法,同样参见官网文档,传送门

Ionic 3 升级 Ionic 4 迁移踩坑系列(四)