书格前端

潘绳杰的博客

0%

发表于 更新于 分类于 Valine：

默认的AngularJS项目开发中的URL访问路径中会有”#”作为前缀出现，可以通过配置将”#”去掉。

这里主要记录针对静态站点的设置，使用Nginx作为Web服务器的情况。

修改代码

修改html页面，增加base标签

1
2
3
4
5
6
7
8
<html>
<head>
  <base href="/">
</head>

...

</html

修改js文件中的html5Mode

1
2
3
4
5
angular
    .module('app.routes')
    .config(['$locationProvider', function($locationProvider) {
      $locationProvider.html5Mode(true);
    }]);

修改nginx配置

修改nginx的配置文件，增加try_files配置

1
2
3
4
5
6
7
8
server {
        listen 80;
        server_name example.com;
        location / {
            root $htdocs;
            try_files $uri $uri/ /index.html =404;
        }
}

参考

发表于 更新于 分类于 Valine：

Loaders.css是纯css的loading动画库。
Delightful and performance-focused pure css loading animations.

demo如下：

demo

安装

bower方式

1
bower install loaders.css

npm方式

1
npm i --save-dev loaders.css

使用

标准使用:

  • 引入loaders.min.css
  • 创建一个元素并添加动画的css类
  • 插入适量的
    到上一步创建的元素中

demo如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <title>loaders css</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ConnorAtherton/loaders.css/master/loaders.min.css">

  <style type="text/css">
    .loader-demo {
      background-color: gray;
      color: blue;
      border-color: blue;
      height: 150px;
      padding-top: 50px;
      text-align: center;
      > div {
        display: inline-block;
      }
    }

    .ball-pulse > div {
      background-color: orange;
    }

  </style>
</head>
<body>
  <h3>loaders css</h3>

  <div class="loader-demo">
    <div class="ball-pulse">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>
</html>

另外，这个库也支持jQuery的使用，具体参考这里

定制

可改变动画图标的背景颜色

1
2
3
.ball-grid-pulse > div {
  background: orange;
}

浏览器兼容性

  • IE11
  • Firefox 36
  • Chrome 41
  • Safari 8

【全文完】

发表于 更新于 分类于 Valine：

今天遇到一个很有趣的网站，关于生成任意尺寸的占位图片，并且支持添加文字。

官网地址：http://fpoimg.com/

demo:

demo

简单使用

简单使用可直接修改以下url中的尺寸并放入页面中即可。

1
http://fpoimg.com/300x250

定制图片

定制图片，支持修改图片尺寸、添加文字、修改背景和文字颜色。

通过以下页面进行定制，支持表单控件操作。

1
http://fpoimg.com/generator

其他示例

部分示例

【全文完】

发表于 更新于 分类于 Valine：

开启Sublime Text 3 在Mac下通过命令启动。

Mac下的Sublime Text编辑器是默认不能通过命令行启动的，因此需要手动设置后才行。以下是配置过程：

查看$PATH

查看$PATH

1
echo $PATH

确认/user/local/bin在$PATH中。

安装

1
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime

使用

在命令行下使用

1
2
cd
sublime ~/Documents

参考

发表于 更新于 分类于 Valine：

下一步，继续改进博客的配置，按照官方的指南前进。

开放其他链接

原先只有首页和归档，接下来添加分类、标签和关于页面的链接。

添加每篇文章的阅读次数

给每篇文章添加阅读次数，方便展示文章的阅读热度。
添加方法参考文章

添加内容分享

根据自己的意愿来选择，使用多说的分享。

多说分享的效果如下图：

多说分享的效果

安装站点内搜索

使用Algolia第三方服务来集成搜索功能。
搜索的结果暂时无法正确跳转（调查中）

Algolia

添加多说的热评文章

1
2
# 多说热评文章 true 或者 false
duoshuo_hotartical: true

修改代码高亮的颜色

修改主题配置文件中的以下内容：
支持的颜色类别有

normal | night | night eighties | night blue | night bright

配置项：

1
highlight_theme: night blue

【全文完】

发表于 更新于 分类于 Valine：

近期使用百度地图开发一个应用，调用百度地图的JavaScript api接口，记录下遇到的错误。

常见问题

错误1：fc未定义

问题描述：

控制台一直报fc undefined?

解决方法：

map必须要dom加载完成后实例化。

错误2：地图显示位置错误

问题描述：

  • 百度地图隐藏后，再次打开，地图一直显示错误？

解决方法：

问题在于地图在DOM加载完成之前加载了，导致无法正确显示。
通过启一个定时器，200毫秒延时进行加载即可。

【以上全部内容】

发表于 更新于 Valine：

MAC下通过ssh使用PEM文件认证登录AWS的虚拟机。

直接连接

输入以下命令即可访问:

1
ssh -i key.pem xxx@server

常见错误：
截图

问题在于服务器提示文件的权限过大，需要调整，再次连接即可。

1
2
sudo chmod 600 key.pem
ssh -i key.pem xxx@server

保存key

另外一种方式，可通过ssh-add添加配置文件，方便后续访问。
添加完成后，直接访问即可。

1
2
ssh-add -k key.pem
ssh xxx@server

发表于 更新于 Valine：

安装及开始使用

  • 使用Git拉取主题代码
  • 修改站点配置文件，修改主题
  • 选择主题外观
  • 设置主题语言
  • 设置菜单
  • 设置头像
  • 集成多说评论
  • 集成百度统计

遇到的问题

  • 页面显示大片空白？

    参考Next的issue

如果没有解决，可尝试主题配置文件中的use_motion配置项改为false。

  • 主页底部显示一串乱码？

    解决方法：修改主题配置文件中的fancybox配置项为false。

参考

参考官网的说明

发表于 更新于 Valine：

原文题目：Modern Angular 1.x essential interview questions
出处：https://toddmotto.com/modern-angular-interview-questions?utm_source=javascriptweekly&utm_medium=email
翻译时长：2 hours 30 mins
审阅时长：10 min

翻译正文内容：
Angular 1.x 在 1.5 引入 .component()后改变了很多，并随之给面试带来了一片新的天地。在许多
之前职位中，我面试了关于Angular、通用JavaScript或者两种兼有的开发者。这是我关于当前Angular
1.x的面试题清单，主要关注组件架构和最佳实践。有些简单，有些困难，由你选择。

有些问题的用意在于让面试者基于他们的经验或者观点来回答。比如，“你什么时候使用X而不是Y”是一个比
“为什么X比Y要好”好的问题。这让你可以挖掘得更深，并可以在面试过程中有更好的对话，也让你能快速判断
哪个开发者更适合你。

答案并没包含，也不会包含。有部分问题是主题性，有部分鼓励你自学。如果你不知道答案，那么你可以去探索并学习。背诵将不会让你通过面试。

阅读全文 »