ruby rails 特点_如何在Rails上使用CSS和ruby添加砌体画廊的基本方法

ruby rails 特点

背景故事 (Backstory)

Our startup has been undergoing a lot of change over the past few months (as I mention briefly in my Everything I wish I Knew post). Part of that change has been switching from Python + Django to Ruby + Ruby on Rails to build out our vision for a re-imagined social media experience, as well as a new version of Sara’s website to support her design + architecture work.

在过去的几个月中，我们的初创公司经历了很多变化(正如我在《我希望我知道的一切》一文中简要提到的那样)。 这种变化的一部分是从Python + Django切换到Ruby + Ruby on Rails，以建立我们对重新构想的社交媒体体验的愿景，以及新版本的Sara网站来支持她的设计和体系结构工作。

It’s felt a bit like Prin up there catching hold of a meteoroid and trying to hang on for dear life.

感觉有点像Prin在那儿抓住流星体并试图坚持住以维持生命。

Like a ride through the galaxy, our pivots have been full of discovery, inspiration, and learning.

就像穿越银河系一样，我们的枢纽充满了发现，灵感和学习。

For Sara’s new website, featuring a shuffling masonry grid visual layout for some of her work, we wanted to find a simple and robust solution — here it is.

对于Sara的新网站而言 ，她的某些作品采用了砌体网格的视觉布局，我们希望找到一个简单而强大的解决方案-就是这里。

先决条件 (Prerequisites)

To shorten this read and get right to the “good stuff”, I’m going to assume that you have a working Ruby on Rails application (Rails app), are familiar with your CSS framework of choice (e.g. Bootstrap or Tailwind CSS), and have a working Model-View-Controller (MVC) setup to power your imagery.

为了缩短阅读时间并着眼于“好东西”，我假设您有一个运行良好的Ruby on Rails应用程序(Rails应用程序)，并且熟悉您选择CSS框架(例如Bootstrap或Tailwind CSS)，并具有有效的Model-View-Controller(MVC)设置来为您的图像供电。

In short, you’re here because either (a) you just want to figure out the CSS bits and/or (b) you enjoy reading what I’ve got to say (you sweetheart you).

简而言之，您之所以在这里是因为(a)您只想弄清楚CSS位和/或(b)您喜欢阅读我要说的话(您的心上人)。

前言 (Preface)

When I was trying to figure this out, I found a lot of complicated solutions with JavaScript and lots of different CSS “hacks” that never held up if you were displaying images dynamically (“don’t set your container height less than your tallest column or you’ll be sorry”).

当我试图弄清楚这一点时，我发现了很多使用JavaScript的复杂解决方案以及许多不同CSS“ hacks”，如果您动态显示图像，这些“ hacks”就不会阻止您(“容器的高度不要设置得比最高的列小)否则您会后悔的”)。

To be clear, I’m sure the JavaScript solutions hold up, and are probably the most super-dope-super-fast options out there, but I didn’t try them because I’m not that fluent in JavaScript at the moment (I stick to a little Stimulus right now).

需要明确的是，我确定JavaScript解决方案能够维持下去，并且可能是目前最超浓密，超快的选择，但是我没有尝试过，因为目前我对JavaScript的理解还不那么熟练(我现在坚持一点刺激。

I needed a CSS solution, one that was fairly robust, and one that wasn’t a nightmare to implement.

我需要一个CSS解决方案，一个相当健壮的解决方案，而不是一个梦night以求的解决方案。

Thankfully, I discovered this post which noted that the CSS Working Group published a W3C draft (World Wide Web Consortium), back in October of 2019, that enables exactly the kind of functionality I was looking for.

值得庆幸的是，我发现了这篇帖子 ，指出CSS工作组于2019年10月发布了W3C草案 (万维网联盟)，该草案完全启用了我正在寻找的功能。

让我们开始吧 (Let’s get to it)

Below is a bit of our setup for Sara’s new site (assuming you have something similar working):

以下是我们为Sara的新站点进行的一些设置(假设您有类似的工作方式)：

1. Ruby on Rails app
   Ruby on Rails应用
2. Tailwind CSS
   尾风CSS
3. Gallery MVC setup
   图库MVC设置
4. JavaScript pack tag setup
   JavaScript包标签设置

If you’ve successfully setup a similar system (using Sassy CSS too), then you should have something like this in your application.html.erb file (it could also be rendered from a partial):

如果您已经成功设置了一个类似的系统(也使用Sassy CSS)，那么您的application.html.erb文件中应该有类似的东西(也可以从局部渲染)：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

With this setup in hand, we’ve got a components directory inside of a stylesheets directory inside of our javascript directory inside of our app directory, or rather:

完成此设置后，我们在app目录中的javascript目录中的stylesheets目录中获得了一个components目录，或者更确切地说：

app/javascript/stylesheets/components

Inside of the components directory we will create a new Sassy CSS (SCSS) file:

在components目录内，我们将创建一个新的Sassy CSS(SCSS)文件：

# Title this file per your use caseapp/javascript/stylesheets/components/gallery.scss

Inside our new gallery.scss file we will write the CSS code for our masonry grid layout:

在我们新的gallery.scss文件中，我们将为砌体网格布局编写CSS代码：

# Again, use titles appropriate to your use case.gallery-container {
  column-count: #insert column number here;
  column-gap: #insert the space between columns here (i.e. 1em);
}.gallery-item {
  display: inline-block;
  margin: # margin spacing for each item (i.e. 0 0 1em);
  width: 100%;
}

A couple things to note about the gallery.scss code:

有关gallery.scss代码的几点注意事项：

• It is written to allow for our dynamic gallery, accounting for unknown numbers of images
  编写该文件是为了允许我们使用动态图片库，并考虑了未知数量的图像

• It is intentionally not responsive in the sense that we wanted that gallery feel across all screen sizes.

  这是故意没有React在这个意义上，我们希望在所有的屏幕尺寸是画廊 的感觉 。

We will now need to make sure that we import that new gallery.scss file into our application.scss file (which is inside of our stylesheets directory but outside of our components):

现在，我们需要确保将新的gallery.scss文件导入到application.scss文件中(该文件在我们的stylesheets目录中，但在我们的组件之外)：

# app/javascript/stylesheets/application.scss
# This is assuming you've setup your application similarly@import "components/gallery"; # add this line with your file name

If you haven’t setup your application in this way, and you would like to, then you should do this as well (skip this step if you’ve done this or similar already):

如果您还没有按照这种方式设置应用程序，那么您也应该这样做(如果已经完成此步骤或类似步骤，请跳过此步骤)：

# app/javascript/packs/application.jsimport "stylesheets/application" # add this line# Change the app/assets/stylesheets/application.css file to .scssapp/assets/stylesheets/application.css => application.scss

With that said, let’s see now how that fits into our view:

话虽如此，现在让我们来看一下如何适应我们的观点：

# This would be your appropriate filename.html.erb
# This code is the "bare bones" as the look will depend on your app's styling<% if @models.exists? %>
  <div class="gallery-container"> # The masonry grid container
    <% @models.shuffle.each do |model| %>
      <div class="gallery-item shadow-lg rounded"> # Masonry item
        <%= link_to image_tag(model.model_image), model %>
      </div>
    <% end %>
  </div>
<% end %>

Note: You could always put the masonry CSS (that we put in gallery.scss) in other folders, or directly in your HTML file, or wherever your CSS setup requires.

注意： 您始终可以将砌体CSS(我们放入gallery.scss中)放置在其他文件夹中，或直接放置在HTML文件中，或放置CSS所需的任何位置。

That’s it!

而已！

Now, in our example there’s a bit of logic to account for the fact that we wanted Sara’s gallery to shuffle each time you look at it and to account for its’ dynamic nature (e.g. adding or removing images at will).

现在，在我们的示例中，有一点逻辑可以说明我们希望Sara的画廊在您每次查看时都进行洗牌并考虑其动态性质(例如随意添加或删除图像)这一事实。

The actual CSS required to achieve the masonry grid layout is incredibly succinct and easy to understand — just like the “Rails way”.

实现砌体网格布局所需的实际CSS非常简洁且易于理解-就像“铁路方式”一样。

附录 (Addendum)

If you would like your masonry to be responsive in the sense that it switches the number of columns per screen size (media query), then definitely check out the post I mentioned near the start of this article.

如果您希望砌体能够响应每个屏幕尺寸的列数(媒体查询)这一点，那么一定要看看我在本文开头提到的帖子 。

Also, you can do far more things stylistically, but I left a lot of that stuff out because that’s where you get to put the you magic into it (or your client or boss or whoever).

同样，您可以在样式上做更多的事情，但是我遗漏了很多东西，因为在这里您可以发挥自己的魔力 (或您的客户，老板或其他人)。

Now you know a very clean and simple way to quickly put together a fairly robust masonry grid layout using nothing but a few simple CSS lines of code.

现在，您知道了一种非常干净，简单的方法，只需使用几行简单CSS代码即可快速组合出相当坚固的砖石网格布局。

Hope it helps!

希望能帮助到你！

翻译自: https://medium.com/swlh/how-to-add-a-masonry-gallery-with-css-and-ruby-on-rails-the-basic-way-a7011e034afa

ruby rails 特点