Tag: css

什么逻辑去哪里：express + jade / ejs + html5 + css + websockets

好。 我正在学习node.js / express，并且想澄清如何将jade / ejs，html和css合在一起。 如我错了请纠正我： 应用程序逻辑在node.js / express中完成 其中一些逻辑/variables被传递到jade / ejs html引擎来dynamic地提供html CSS仍然根据请求设备格式化提供的html。 原谅我，似乎线条开始模糊所有这些JS; 很难说在node.js / express中应该做什么逻辑，在jade / ejs中应该做什么逻辑。 当使用websocket时，这变得更加模糊，因为在客户端有逻辑。 所以显示控制逻辑在5个不同的地方进行。

用gulp / nodejs从LESS / CSS文件中抓取hex颜色？

我试图从一个较less的文件中抓取所有的颜色，并将其input到nodejs / gulp中的另一个stream中，输出到一个模板。 基本上采取LESS文件，并生成一个快速的HTML页面的颜色。 用于显示节点stream/吞吐方式的奖励点[tm]。 🙂 用于向我展示如何一次拉入多个文件进行处理的奖励点数 这是我的代码： //Grab the shared colors gulp.task('getsharedcolors', function () { gutil.log('Getting shared styles from: ' + path.join(paths.source.assets_root + paths.source.assets_shared_styles + paths.source.assets_shared_colors)); fs.readFile(path.join(paths.source.assets_root + paths.source.assets_shared_styles + paths.source.assets_shared_colors), function(err, data) { if(err) { return gutil.log(err); } reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/; reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/; reHex = /^#?([0-9a-f]{6}|[0-9a-f]{3})$/i; lines = data.toString().split('\n'); for (var line […]

使用Node下载.ttf文件

我试图用Node来下载一个.ttf文件。 我正在使用mikeal /请求来处理HTTP请求。 实际的function看起来像这样： request.get(url, function(err, res, body) { if(err) throw err; fs.writeFileSync(path, body); }); 匆匆一瞥后，它的行为完全如预期; 一切都结束在正确的地方，它看起来或多或less是正确的。 但是，当我尝试使用以下@font-face片段将字体加载到浏览器中时，该规则已应用，但字体不是。 没有错误，没有加载失败或被覆盖。 @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } 对于初步检查，我试图用KFontView打开它，但遇到了“无法读取字体”错误。 我通过wgeting一个新的文件的副本来validation这个错误，并做同样的事情。 它加载到预览罚款。 这慢跑了我的记忆关于一个可以传递给writeFile的可选参数，所以我检查了wget版本和节点版本的编码。 $ enca wget.ttf -L none > Unrecognized Encoding $ enca node.ttf -L none > Universal transformation […]

Bootstrap没有按预期工作

我使用twitter引导node.js用户界面，下面的HTML是我得到后，我使用Jade我想要的是使用jumbotroon http://getbootstrap.com/examples/jumbotron/，并把标签1和2在在导航栏上的项目名称相同的行，并使用链接中的黑色，我已经尝试了很多东西，我在这里做错了什么？ <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button> </div> <a class="navbar-brand" href="/#"> Node Rec </a> <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="/recipes/b1"> Tab1 </a> </li> <li> <a href="/recipes/b1"></a> </li> </ul> <div class="container"></div> <div class="jumbotron"></div> <h1> List Arrivals […]

Vis.js节点上的animation牛眼

我使用Vis.js绘制networking图。 我希望能够有一个通知function，当一个特定的节点收到一个AJAX更新canvas移动该节点到中心（Vis.js已经可以），然后有一些types的bullseyeanimation通过节点来吸引用户的注意，直到他们点击节点。 我正在寻找的animation效果最接近的例子是http://codepen.io/MateiGCopot/pen/ogEKRK var w = c.width = 400, h = c.height = 400, ctx = c.getContext('2d'), frame = 0; function anim(){ window.requestAnimationFrame(anim); ++frame; for(var i = 0; i < w; ++i){ ctx.strokeStyle = i%20 === 0 ? 'hsl(hue, 80%, 50%)'.replace('hue', (360 / (w/3) * i – frame) % 360 ) : 'rgba(0, 0, 0, […]

NodeJS和Express：CSS不加载

我已经创build了自己的服务器和路由器文件来提供我的html页面。 页面呈现，但我的问题是，它呈现没有CSS样式。 我使用express.static服务我的/公共文件，理论上应该服务的CSS文件 – 或者我想。 我已经做了一个谷歌search我的问题，并查看了前几页的链接，但我仍然无法解决我的问题。 任何人都可以运动我的错误 我的目录是： 的NodeJS node_modules 上市 CSS style.css文件 JS 路由器 main.js 意见 我的HTML文件 我的服务器代码是： var express = require('express'); var app = express(); var fs = require('fs'); var url = require('url'); var path = require('path'); var http = require('http'); var router = express.Router(); var bodyParser = require('body-parser'); app.use(bodyParser()); app.use(express.static(__dirname + "/public", […]

Webshot自定义CSS

我正在尝试使用带有nodeJs的WebShot将我的网站保存为图像。 在文档中说，WebShot有customCSS选项，它允许在截图之前将自定义css样式应用到网页。 我想使用该选项，但是当我尝试运行我的文件与节点它给了我一个错误： customCSS:'body { ^^^^^^^ SyntaxError: Unexpected token ILLEGAL 我的代码如下： var options = { siteType: "html", //defaultWhiteBackground: true, customCSS:"body { background-color: #b0c4de; }" }; webshot(svgsrc,'graphy2.png',options,function(err) { if(err) { console.log('error saving document', err) } else { console.log('The file was saved!'); } }); 我可以保存图像没有问题，只是我不能find一种方式来应用自定义CSS保存图像之前，所以任何帮助，将不胜感激。 谢谢

如何自动更新相关的CSSpath缩小？

我想更新所有相对path的缩小，因为我为每个JS / CSS组件使用单独的文件夹，并且每个组件的文件夹深度也可能不同，例如： css/ style.min.css // final minified and processed file common.scss components/ gallery/ gallery.scss // url(../../../img/mypic.png) img/ mypic.png 在缩小之后，我在style.min.css样式仍然会有../../../img/mypic.png 。 但是，它必须更新到../img/mypic.png ，否则webbrowsers不会find图片。 我怎样才能自动使用PostCSS或其他包？ 我发现postcss-url项目，它提供了一个自定义URL转换的function，但我没有find任何示例如何做到这一点。 现在我使用nodejs ， nodejs ， autoprefixer和postcss来postcss我的postcss 。

状态码304（Jade，Node，Express）

我在我的翡翠文件中链接bootstrap和jquery， link(rel='stylesheet', href='/stylesheets/bootstrap.css') 和 script(src='/javascripts/jquery-3.1.1.js') script(src='/javascripts/bootstrap.js') 这个Jade文件在我的视图文件夹中。 boostrap css是在我的公共/ stylesheets文件夹和JavaScript是在公共/ javascripts文件夹。 当我使用nodemon运行我的应用程序时，它说 GET / 200 80ms – 1.65kb GET /stylesheets/bootstrap.css 304 1ms GET /javascripts/jquery-3.1.1.js 304 3 GET /javascripts/bootstrap.js 304 2ms javascript和css文件不会加载。 build议？

如何在angularjs中使用ng-class应用css

我有一个标签，当我在我的领域没有数据时，我想要应用课程。 <label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.settingsObj.customfields_student,val.key)" ng-class="{'active': vm.settings.customfields_student.indexOf(????) == -1 }"> 我的设置对象是这样的： "details": { "__v": 0, "_id": "58413d990533de0d1a3a4986", "customfields_student": [ "" ], } } 任何人可以build议帮助我如何才能申请类，当它是空的？