Question

我有2个问题。

在我正在练习的Rails应用程序中，我的文件树如下所示：

enter image description here

从Michael Hartl的教程中学习我学会了添加“custom.css.scss”文件来处理CSS。我的问题是为什么CSS内容不进入“kalendar.css.scss”，它从我的“Kalendar”控制器中选择它的名字，或者为什么CSS不进入“application.css”？

使用javascript，我是否需要创建“custom.js.coffee”文件？如果没有，我将如何在将在视图中显示的文本添加文本效果。意思是如何添加我下载的额外javascript插件？

但我知道在视图中我可以做类似的事情：

<%= javascript_tag "alert('hey you!')" %>

编辑：

现在在我的“vendor / assets / javascripts / textEffect.js”中我有这个代码，这是我在线下载的插件。

(function($) {

    function shuffle(a) {
        var i = a.length, j;
        while (i) {
            var j = Math.floor((i--) * Math.random());
            var t = a[i];
            a[i] = a[j];
            a[j] = t;
        }
    }

    function randomAlphaNum() {
        var rnd = Math.floor(Math.random() * 62);
        if (rnd >= 52) return String.fromCharCode(rnd - 4);
        else if (rnd >= 26) return String.fromCharCode(rnd + 71);
        else return String.fromCharCode(rnd + 65);
    }

    $.fn.rot13 = function() {
        this.each(function() {
            $(this).text($(this).text().replace(/[a-z0-9]/ig, function(chr) {
                var cc = chr.charCodeAt(0);
                if (cc >= 65 && cc <= 90) cc = 65 + ((cc - 52) % 26);
                else if (cc >= 97 && cc <= 122) cc = 97 + ((cc - 84) % 26);
                else if (cc >= 48 && cc <= 57) cc = 48 + ((cc - 43) % 10);
                return String.fromCharCode(cc);
            }));
        });
        return this;
    };

    $.fn.scrambledWriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0, replace = /[^\s]/g,
                random = randomAlphaNum, inc = 3;
            $ele.text('');
            var timer = setInterval(function() {
                $ele.text(str.substring(0, progress) + str.substring(progress, str.length).replace(replace, random));
                progress += inc
                if (progress >= str.length + inc) clearInterval(timer);
            }, 100);
        });
        return this;
    };

    $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            var timer = setInterval(function() {
                $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                if (progress >= str.length) clearInterval(timer);
            }, 100);
        });
        return this;
    };

    $.fn.unscramble = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), replace = /[^\s]/,
                state = [], choose = [], reveal = 25, random = randomAlphaNum;

            for (var i = 0; i < str.length; i++) {
                if (str[i].match(replace)) {
                    state.push(random());
                    choose.push(i);
                } else {
                    state.push(str[i]);
                }
            }

            shuffle(choose);
            $ele.text(state.join(''));

            var timer = setInterval(function() {
                var i, r = reveal;
                while (r-- && choose.length) {
                    i = choose.pop();
                    state[i] = str[i];
                }
                for (i = 0; i < choose.length; i++) state[choose[i]] = random();
                $ele.text(state.join(''));
                if (choose.length == 0) clearInterval(timer);
            }, 100);
        });
        return this;
    };

})(jQuery);

在我的“视图”中，我有一个包含内容的文件：

<p class="my-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

在我的“application.js”中我有：

//= require textEffect

在“app / assets / javascripts / custom.js.coffee”中我有

$(document).ready() -> 
$("#my-container").unscramble();

除非我当然错了，我假设在页面加载时，我应该看到文本效果启动了。但没有任何事情发生。有什么我错过或做错了吗？

Answer 1

显然，迈克尔只是以这个custom.css.scss文件为例。 您可以使用最适合组织项目的文件名。

例如，我希望将与布局相关的项目放在layout.css.scss中，并将Kalendar相关的css放在kalendar.css.scss中。我不会使用application.css作为自定义样式的唯一原因是因为application.css是清单文件。

清单文件是一个文件，它使用逗号语法告诉rails要包含哪些资产。例如，在css清单

中

/* Manifest File
 *= require_tree .
*/

这告诉rails包含样式表的整个目录。您可以手动包含

文件

*= require layout
*= require my_file_name

这个系统的目的是将所有资产渲染到一个文件中，这会使页面加载更快，而在生产中你只需要一个css / js文件。要包含清单文件，只需编写

即可

= stylesheet_link_tag 'manifest_file_name'

文件名纯粹是为了组织。

Rails资产管道

1 个答案: