小编Zan*_*non的帖子

Angular UI Bootstrap monthpicker

我正在尝试将日期选择器设置为月份选择器.只要你点击一个月和/或去上一年/明年,一切都按预期工作.但是,如果要通过单击顶部的当前年份来扩大年份选择,则会出现JavaScript错误.

HTML:

<div ng-app="app">
    <div ng-controller="TestController">
        <input type="date" class="form-control" ng-model="date" datepicker-popup="MM/yyyy" is_open="date_opened" ng-focus="date_opened = true" ng-click="date_opened = true" datepicker-options="datepickerOptions">
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

JS:

(function() {
    'use strict';

    var app  = angular.module('app', [
        'ui.bootstrap'
    ]);

    app.controller('TestController', ['$scope', function($scope) {
        $scope.datepickerOptions = {
            datepickerMode: "'month'",
            minMode: 'month'
        };
    }]);
})();
Run Code Online (Sandbox Code Playgroud)

这是JSFiddle演示它(angularjs 1.2.26,ui-bootstrap 0.11.2).

datepicker twitter-bootstrap angularjs angular-ui-bootstrap

6
推荐指数
1
解决办法
3569
查看次数

切换按钮折叠在Bootstrap导航栏中不起作用

当导航栏折叠时,我的切换按钮不起作用.我已经多次检查了数据目标并且看起来没问题.

这是我的代码:

<div class="navbar navbar-fixed-top navbar-inverse">
 <div class="container">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>


    <div class="collapse navbar-collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>
Run Code Online (Sandbox Code Playgroud)

有谁知道问题是什么以及我如何解决它?

toggle collapse navbar twitter-bootstrap

6
推荐指数
1
解决办法
6万
查看次数

如何使用Bootstrap在选项卡组件的末尾显示文本/按钮?

我在<ul>标签中添加了一个文本和一个按钮,如下所示:

<body>
   <div class="container">
    <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="active"><a href="#">Database</a></li>
       <li role="presentation"><a href="#">Tasks</a></li>
       <li role="presentation"><a href="#">Options</a></li>
       <li role="presentation">Welcome, ${sessionScope.currentUser} <button type="submit" >Log out</button></li>
   </ul>
  </div>
 </body>
Run Code Online (Sandbox Code Playgroud)

结果是:

如果我将文本和按钮包裹在<a>标签内,则底线被推得太远.您可以看到"数据库"选项卡底部有一行.

我希望文本和按钮移动到选项卡组件的末尾,就像这个论坛的选项卡一样.文本"2 Answers"与选项卡"votes"具有相同的高度,位于选项卡窗格的边缘:

我知道我必须用JavaScript修改它,但我不知道该怎么做.

html javascript css twitter-bootstrap

6
推荐指数
2
解决办法
6364
查看次数

Bootstrap 行元素是否必须是列的直接子元素?

我可以在 Bootstrap 中有一个包含一些任意<div>元素的列,其中包含另一个<div>包含行的任意元素 - 或行必须是列的直接子项?

twitter-bootstrap

6
推荐指数
1
解决办法
2153
查看次数

使用Amazon S3时如何将抓取工具请求重定向到预渲染页面?

问题

我有一个使用Angular构建并在Amazon S3上托管的静态SPA站点.我正在尝试使爬网程序可以访问预呈现的页面,但由于Amazon S3不提供URL重写选项且重定向规则有限,因此我无法重定向爬网程序请求.

是)我有的

我已经添加下面的元标记对<head>我的的index.html页:

<meta name="fragment" content="!">
Run Code Online (Sandbox Code Playgroud)

此外,我的SPA使用漂亮的URL(没有哈希#标志)和HTML5推送状态.

使用此设置,当爬虫找到我的http://mywebsite.com/about链接时,它将发出GET请求http://mywebsite.com/about?_escaped_fragment_=.这是Google定义模式,后跟其他抓取工具.

我需要的是使用about.html文件的预渲染版本来回答此请求.我已经使用Phantom.js完成了这个预渲染,但我无法向抓取工具提供正确的文件,因为Amazon S3没有重写规则.

nginx服务器中,解决方案是添加重写规则,如:

location / {
  if ($args ~ "_escaped_fragment_=") { 
    rewrite ^/(.*)$ /snapshots/$1.html break; 
  } 
} 
Run Code Online (Sandbox Code Playgroud)

但在Amazon S3中,我受到基于KeyPrefixes和HttpErrorCodes 的重定向规则的限制.该?_escaped_fragment_=不是KeyPrefix,因为它出现在URL的末尾,它没有给HTTP错误,因为角会忽略它.

我试过的

我开始尝试使用ngRoute的动态模板,但后来我意识到我无法使用任何Angular解决方案来解决这个问题,因为我的目标是无法执行JavaScript的抓取工具.

使用Amazon S3,我必须坚持使用重定向规则.

我已经成功地使用了一个丑陋的解决方法.如果我为每个页面创建一个新规则,我就完成了:

<RoutingRules>

  <!-- each page needs it own rule -->
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals>about?_escaped_fragment_=</KeyPrefixEquals>
    </Condition>
    <Redirect>
      <HostName>mywebsite.com</HostName>
      <ReplaceKeyPrefixWith>snapshots/about.html</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>

</RoutingRules>
Run Code Online (Sandbox Code Playgroud)

正如您在此解决方案中所看到的,每个页面都需要自己的规则.由于亚马逊仅限于50个重定向规则,因此这不是一个可行的解决方案. …

seo amazon-s3 amazon-web-services angularjs single-page-application

6
推荐指数
1
解决办法
2493
查看次数

如何改善无服务器网站的SEO?

当我的网站托管在AWS S3上时,我想在无服务器架构中改进SEO(即,在搜索引擎上正确索引我的页面).

由于我正在使用JavaScript方法进行路由(类似于角度,但更简单),并获得动态内容来填充元标记,我发现一切对于没有JavaScript支持的抓取工具来说非常麻烦,比如Facebook.

我已经插入了默认元标记,当然,这些元标记加载得很好,但我需要更新的元标记.

我知道大多数人在服务器上或通过Prerender.io之类的东西使用预渲染,但我真的想找到一种在无服务器方法上有意义的替代方案.

我认为我已经弄清楚了,因为Open Graph元标记允许"指针"URL,如果需要,您可以在其中使用"仅元标记"HTML.所以我在考虑使用Lambda函数在GET请求中使用正确的元标记生成HTML响应.问题是因为Facebook刮刀没有JavaScript支持,我如何在GET请求上发送动态内容?

javascript seo facebook amazon-s3 serverless-framework

6
推荐指数
2
解决办法
1642
查看次数

在无服务器项目中如何/在何处运行迁移迁移?

我试图将Sequelize js与Serverless结合使用,它来自传统的服务器背景,我对在何处/如何运行数据库迁移感到困惑。

是否应该为运行迁移创建专用功能,或者是否还有其他运行迁移的方法?

migration sequelize.js serverless-framework sequelize-cli serverless-architecture

6
推荐指数
2
解决办法
1326
查看次数

如何在无服务器 yaml 配置中转义 $ 登录?

我想在为 api 网关使用阶段变量时转义 $ 符号。

当我尝试部署时出现以下错误。

变量 stageVariables.capabilitySecurityUrl 的变量引用语法无效。您只能引用环境变量、选项和文件。您可以查看我们的文档以获取更多信息。

我尝试了以下选项,但不起作用

1) 使用不带引号的 Uri:https://${stageVariables.capabilitySecurityUrl}

2) 使用引号 Uri: "https://${stageVariables.capabilitySecurityUrl}"

3) 从文件访问变量

./stageVariables.json
{
   "capabilitySecurityUrl":"https://${stageVariables.capabilitySecurityUrl}"
}

./serverless.yml
${file(./stageVariables.json):capabilitySecurityUrl}
Run Code Online (Sandbox Code Playgroud)

有什么帮助吗?

yaml amazon-web-services aws-api-gateway serverless-framework

6
推荐指数
1
解决办法
1194
查看次数

将Git Repo直接镜像到AWS CodeCommit

我想在我的Git Repository中创建一个备份并将其保存到AWS CodeCommit.我不想包括使用我的本地机器.任何人都可以告诉我如何直接或通过AWS Lambda进行此操作?

git aws-lambda aws-codecommit serverless-framework

6
推荐指数
2
解决办法
3399
查看次数

将变量传递给没有Express的Jade

关于Jade模板引擎的快速问题:

  • 如何在不使用时将node.js变量传递给.jade模板express.js

我正在尝试创建一个不使用express的小型网站,这样我才能理解一切是如何运作的.

另外,是否有关于使用Jade和node.js没有快递的教程或文章?

node.js express pug

5
推荐指数
1
解决办法
2046
查看次数