Bình thêm css và js

Bạn có thể không phải là nhà phát triển giao diện người dùng và tôi đoán bạn không muốn trở thành một nhà phát triển. Tôi khá tự tin về điều này bởi vì bạn hiện đang tham gia vào một hướng dẫn về Flask, thay vì phàn nàn về số lượng khuôn khổ giao diện người dùng mà bạn đã buộc phải học trong thập kỷ qua (xin lỗi người nổi tiếng về giao diện người dùng, bạn biết tôi yêu bạn 😄

Mỗi nhà phát triển phụ trợ cần phải đối mặt với một thực tế khắc nghiệt. không thể xây dựng các ứng dụng có ý nghĩa nếu không đào sâu vào việc viết một số kiểu hoặc JavaScript giao diện người dùng. Kể từ những ngày đầu của Django, các nhà phát triển Python đã chọn sử dụng mã giao diện người dùng làm tài sản tĩnh. một thuật ngữ trái tay dường như hạ thấp tầm quan trọng của JavaScript, CSS hoặc bất kỳ nội dung lớp trình bày nào tạo nên một ứng dụng web. Người ta đã ra lệnh rằng chỉ có hai loại mật mã tồn tại trong vũ trụ. Python và không phải Python. Bất cứ điều gì không phải là một. py được coi là tài sản "tĩnh", được nhét vào một thư mục sau khi có lẽ nhận được bàn giao từ nhà phát triển giao diện người dùng. Suy nghĩ ngụ ý này vừa hơi vô lý nhưng cũng không có gì đáng ngạc nhiên

Đã đến lúc đối mặt với nỗi sợ hãi của chúng ta về việc xử lý mã giao diện người dùng trong Flask đúng cách. bằng cách viết các kiểu trong bộ tiền xử lý CSS, thu nhỏ tệp và phân phát chúng theo “gói” tương tự như gói webpack. Nếu bạn là kiểu người thích liên kết với phiên bản jQuery được lưu trữ trên CDN 1. 11 hoặc bao gồm một thư viện Bootstrap chung chung để tạo kiểu cho ứng dụng của bạn, vui lòng ngừng đọc và biến đi. Đối với những người trong chúng ta có nguyện vọng cao hơn là một công việc toàn thời gian duy trì mã kế thừa 30 năm tuổi cho Citibank, chúng ta sẽ tìm hiểu về Flask-Assets

Làm thế nào nó hoạt động

Các ứng dụng Flask sử dụng thư viện Flask-Assets thường sẽ có hai thư mục liên quan đến các tài sản “tĩnh”. Một thư mục được dành riêng cho mã chưa nén thô, trong khi thư mục còn lại dành cho nội dung nén, sẵn sàng sản xuất được tạo từ các tệp được lưu trữ trong thư mục trước (thư mục sẵn sàng sản xuất này thường được gọi là thư mục /dist hoặc /build). Tùy thuộc vào cách chúng tôi định cấu hình ứng dụng của mình, Flask-Assets sẽ biên dịch nội dung tĩnh thành các gói khi khởi động. Điều này được thực hiện với sự trợ giúp của một vài thư viện Python phụ trợ dành riêng cho việc xây dựng và nén tệp. lesscpy và pyscss lần lượt biên dịch LESS/SCSS thành CSS, trong khi cssmin và jsmin nén CSS/JavaScript

Tùy thuộc vào lựa chọn ngăn xếp của chúng tôi, chúng tôi sẽ cần cài đặt các gói Python thích hợp. Tôi dự định viết các kiểu với LESS và thêm một số JavaScript giao diện người dùng vào ứng dụng của mình

$ pip install flask-assets lesscpy cssmin jsmin

Cài đặt phụ thuộc

Cấu hình Flask-Assets

Như với hầu hết các plugin Flask, chúng tôi có thể định cấu hình tài sản Flask bằng cách đặt các biến trong cấu hình Flask cấp cao nhất của chúng tôi. Bất cứ ai tạo ra thư viện này đã có một lựa chọn thú vị là không ghi lại bất kỳ tài liệu nào trong số này, vì vậy tôi sẽ giúp bạn tiết kiệm thời gian

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

cấu hình. py

• LESS_BIN. LESS yêu cầu thư viện NPM có tên là LESS (được hệ thống gọi là lessc) được cài đặt trên hệ thống của chúng tôi để biên dịch LESS thành CSS. Chạy

  """Flask configuration."""
  
  LESS_BIN = '/usr/local/bin/lessc'
  ASSETS_DEBUG = False
  ASSETS_AUTO_BUILD = True
  

  2 trong thiết bị đầu cuối của bạn để tìm đường dẫn này. SASS tương đương với điều này là SASS_BIN
• ASSETS_DEBUG. Thỉnh thoảng, chúng tôi buộc phải làm hỏng một phong cách hoặc chức năng JS, điều này đôi khi không trở nên rõ ràng cho đến khi chúng tôi xây dựng các gói của mình và thử sử dụng ứng dụng của mình. Nếu chúng tôi đặt biến này thành

  """Flask configuration."""
  
  LESS_BIN = '/usr/local/bin/lessc'
  ASSETS_DEBUG = False
  ASSETS_AUTO_BUILD = True
  

  3, Flask-Assets sẽ không đóng gói các tệp tĩnh của chúng tôi trong khi chúng tôi đang chạy Flask ở chế độ gỡ lỗi. Điều này hữu ích cho các kiểu khắc phục sự cố hoặc JavaScript bị lỗi
• ASSETS_AUTO_BUILD. Một lá cờ để yêu cầu Flask xây dựng các gói nội dung của chúng tôi khi Flask tự động khởi động. Chúng tôi thường muốn đặt điều này thành True, trừ khi bạn chỉ muốn xây dựng nội dung bằng một số lực lượng bên ngoài (AKA. bạn đang làm phiền)

Tạo gói tài sản

Trước khi đi sâu vào mã, hãy thiết lập cấu trúc ứng dụng của chúng tôi. Không có gì khác thường ở đây

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

Cấu trúc dự án

Điểm mấu chốt là chúng ta sẽ thiết lập Flask-Assets để tìm kiếm các tệp thô để biên dịch ở dạng tĩnh/src/less và tĩnh/src/js. Khi nội dung của các thư mục này được biên dịch, chúng tôi sẽ xuất kết quả thành tĩnh/dist/less và tĩnh/dist/js nơi chúng sẽ sẵn sàng phân phát

Hãy kích hoạt em bé này trong ứng dụng. py

from flask import Flask
from flask_assets import Environment


app = Flask(__name__, instance_relative_config=False)

assets = Environment(app)

ứng dụng. py

Chúng tôi khởi tạo Flask-Assets bằng cách tạo một thể hiện Môi trường và khởi tạo nó dựa trên đối tượng ứng dụng của Flask. Có một cách khác để khởi tạo thư viện thông qua nhà máy ứng dụng Flask, nhưng chúng ta sẽ đến đó ngay

"Gói" nội dung đầu tiên của chúng tôi sẽ đến từ các tệp LESS được tìm thấy trong thư mục static/src/less của chúng tôi. Chúng tôi sẽ biên dịch các tệp này thành CSS, thu nhỏ CSS kết quả và xuất nó để sản xuất

from flask import Flask
from flask_assets import Environment, Bundle


app = Flask(__name__, instance_relative_config=False)
assets = Environment(app)

style_bundle = Bundle(
    'src/less/*.less',
    filters='less,cssmin',
    output='dist/css/style.min.css',
    extra={'rel': 'stylesheet/css'}
)

# Register style bundle
assets.register('main_styles', style_bundle) 

# Build LESS styles
style_bundle.build()  

ứng dụng. py

Đối tượng Bundle là nơi hầu hết phép thuật của chúng ta xảy ra. Gói có thể chấp nhận bất kỳ số lượng đối số vị trí nào, trong đó mỗi đối số là đường dẫn của tệp để đưa vào gói của chúng tôi. Ví dụ của chúng tôi tạo một gói từ

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

4, có nghĩa là "tất cả. ít tệp hơn trong src/less. " Thay vào đó, chúng tôi có thể chuyển các tệp riêng lẻ (như

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

5, v.v.) nếu chúng tôi muốn chọn các biểu định kiểu cụ thể. Trong trường hợp này, điều quan trọng cần lưu ý là mọi hoạt động nhập trong các tệp LESS này (chẳng hạn như

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

6) cũng sẽ tự động được đưa vào gói của chúng tôi

Bước tiếp theo trong việc tạo Gói của chúng tôi là chuyển một số đối số từ khóa cần thiết

• bộ lọc. Đây là nơi chúng tôi cho Flask-Assets biết thư viện Python nào sẽ sử dụng để xử lý việc biên dịch nội dung của chúng tôi. Việc vượt qua

  """Flask configuration."""
  
  LESS_BIN = '/usr/local/bin/lessc'
  ASSETS_DEBUG = False
  ASSETS_AUTO_BUILD = True
  

  7 cho Gói của chúng tôi biết rằng chúng tôi sẽ xây dựng một gói từ các tệp LESS bằng cách sử dụng lesscpy, sau đó chúng tôi sẽ nén gói này bằng cách sử dụng cssmin
• đầu ra. Thư mục nơi gói sẵn sàng sản xuất của chúng tôi sẽ được lưu và phân phối từ
• Thêm. Nối các thuộc tính HTML bổ sung vào đầu ra gói trong mẫu Jinja của chúng tôi (điều này thường không cần thiết)

Sau khi tạo một gói các kiểu được gọi là style_bundle, chúng tôi "đăng ký" gói đó với môi trường của mình bằng

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

8 (

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

9 là tên tùy ý chúng tôi gán cho gói của mình và chính biến đó là

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

0)

Cuối cùng chúng tôi đã xây dựng gói của mình với

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

1. Điều này xuất ra một tệp CSS duy nhất thành dist/css/style. css

Tạo một gói JavaScript

Quy trình tạo gói cho JavaScript giao diện người dùng gần giống với quy trình tạo gói mà chúng tôi đã tạo cho kiểu. Sự khác biệt chính là việc chúng tôi sử dụng bộ lọc jsmin để giảm thiểu các tệp JS

Đây là một ví dụ về việc tạo các gói cho cả hai cùng một lúc

Gói

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

5CSS & JS

Cung cấp các gói thông qua các mẫu trang

Chúng tôi có thể phân phát nội dung mới tạo trong các mẫu trang của mình giống như bất kỳ nội dung tĩnh nào khác

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

6chỉ mục. jinja2

Khởi chạy ứng dụng Flask của bạn bây giờ sẽ dẫn đến các kiểu và JavaScript được tạo thành src/dist. Nếu mọi việc suôn sẻ, các mẫu trang của bạn sẽ chọn những thứ này và ứng dụng của bạn sẽ trông bắt mắt với một số nội dung giao diện người dùng hấp dẫn, được tối ưu hóa hiệu suất

Rõ ràng có một cách khác để tạo các gói hoàn toàn trong các mẫu không có mã Python. Cá nhân tôi chưa thử điều này, nhưng sự đơn giản của cú pháp khá tuyệt.

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

7

Gói dành riêng cho Blueprint

Một trong những tính năng mạnh mẽ nhất của Flask-assets là chúng ta có thể dễ dàng tạo các gói tài sản dành riêng cho Kế hoạch chi tiết. Điều này cho phép chúng tôi "tách mã" nội dung giao diện người dùng có liên quan để dành riêng cho Bản thiết kế, chủ yếu cho mục đích hiệu suất. Chúng ta sẽ xây dựng dựa trên dự án ví dụ mà chúng ta đã tạo lần trước trong hướng dẫn Flask Blueprints để tạo các gói dành riêng cho bản thiết kế

Dưới đây là tổng quan nhanh về một dự án có hai bản thiết kế đã đăng ký (/main và /admin) mà chúng tôi sẽ tạo các gói nội dung cho

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

8Dự án Flask sử dụng Bản thiết kế

Mỗi bản thiết kế của chúng tôi đều có thư mục tĩnh riêng, nhằm mục đích chứa các nội dung dành riêng cho bản thiết kế. Ứng dụng của chúng tôi vẫn có một thư mục tĩnh riêng, chứa nội dung được chia sẻ trên tất cả các bản thiết kế. Trước khi tìm hiểu chi tiết về cách thức hoạt động của nó, hãy xem cách chúng tôi khởi tạo nội dung Flask trong nhà máy ứng dụng Flask

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

9__init__. py

Hãy kiểm tra những gì đang xảy ra trong tài sản. py

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

0nội dung. py

Điều kỳ diệu xuất hiện trong các lập luận về vị trí của

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

2. Trong trường hợp của main_style_bundle, chúng tôi chuyển các kiểu chung với

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

3 và các kiểu cụ thể của bản thiết kế với

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

4. Nhưng chờ đã, main_bp không phải là một thư mục. Trên thực tế, đó là tên đã đăng ký của bản thiết kế chính mà chúng tôi tạo trong main_routes. py

"""Flask configuration."""

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True

1chính/tuyến đường. py

Khi đặt

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

5 trên bản thiết kế của chúng tôi, chúng tôi yêu cầu Flask kiểm tra nội dung ở hai nơi. đầu tiên trong jar_assets_tutorial/static, sau đó là jar_assets_tutorial/main/static thứ hai.

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

2 nhận ra rằng

/app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

7 là một tên bản thiết kế trái ngược với một thư mục và do đó giải quyết nội dung một cách chính xác

Lần đầu tiên thiết lập nội dung dành riêng cho kế hoạch chi tiết không phải là một cuộc dạo chơi trong công viên. Tài liệu chính thức về tài sản Flask đơn giản là khủng khiếp. Kết quả là, có rất nhiều cạm bẫy và những điều kỳ quặc có thể làm hỏng một ngày của ai đó. đặc biệt là của tôi. Nếu bạn thấy mình đang gặp khó khăn, tôi đã thiết lập một dự án đang hoạt động trên Github tại đây

hackerandslackers/flask-assets-tutorial

Ví dụ hoạt động của ứng dụng Flask sử dụng nội dung dành riêng cho bản thiết kế. - hackerandslackers/flask-assets-tutorial

Làm cách nào để đưa CSS và JS vào Flask?

Bạn có thể kết hợp CSS và JavaScript không?

Tôi có thể thêm CSS bằng Python không?