Thay đổi HTML được tạo bởi các bảng: Có thể không?


15

Tôi thích sử dụng bảng điều khiển, tuy nhiên bảng điều khiển là một nỗi đau để tạo kiểu vì số lượng lớn div mà nó tạo ra. Ngoài ra các lớp nó áp dụng cho các div không có ý nghĩa và cũng quá cồng kềnh. Gây ra sự nhầm lẫn giữa các đồng nghiệp của tôi.

Để cho bạn thấy đầu ra mà họ tạo ra:

Đầu ra của bảng

Vấn đề là tôi đang sử dụng 960.gs và bảng điều khiển thêm các lớp riêng và cấu trúc div cồng kềnh, khiến tôi phải ghi đè các lớp của chúng. Đây là điều tôi không muốn làm, tôi muốn dọn sạch các div. Có cách nào để làm điều này?

Biên tập:

Những gì tôi đã làm để dọn sạch một số div mà tôi cho là vô dụng:

Bắt đầu từ dòng # 388 trong flex.inc (bảng / plugin / bố cục / linh hoạt)

$output = '';     
//$output = "<div class=\"panel-flexible " . $renderer->base['canvas'] . " clearfix\" $renderer->id_str>\n";
    //  $output .= "<div class=\"panel-flexible-inside " . $renderer->base['canvas'] . "-inside\">\n";

      $output .= panels_flexible_render_items($renderer, $settings['items']['canvas']['children'], $renderer->base['canvas']);

      // Wrap the whole thing up nice and snug
      //$output .= "</div>\n</div>\n";

Tôi thực sự đã tạo một bản sao của bố cục linh hoạt và chỉnh sửa nó, nhưng nếu tôi có nhiều thời gian hơn cho dự án này, tôi sẽ tạo một plugin sạch hơn cho việc này.

Lưu ý: Đây không phải là giải pháp tốt nhất, đây là con đường nhanh nhất có thể để thực hiện mục tiêu của tôi. Tạo plugin nhỏ của riêng bạn là cách tốt nhất để đi, bạn luôn có thể sử dụng một trong các plugin hiện có làm cơ sở.

Câu trả lời:


19

Tôi đã xem xét vấn đề này trước đây. Đây là vấn đề bạn muốn đọc . Nó có vẻ như hạt dẻ lúc đầu, nhưng thực sự có những lý do tốt cho việc nó như thế này.

Điểm mấu chốt: nghĩ về Tấm linh hoạt Bố cục như một công cụ tạo mẫu . Sử dụng nó để thử và phác thảo các ý tưởng trong phát triển, dàn dựng, thử nghiệm người dùng, v.v., sau đó khi bạn đã có bố cục hoàn hảo, hãy triển khai nó để sản xuất với HTML sạch, sắc nét, được tối ưu hóa bằng tay như một bố cục Bảng tùy chỉnh (thêm trên những cái bên dưới).

Đây là một bản tóm tắt nhanh chóng về lý do tại sao nó là như vậy, dựa trên vấn đề mà tôi liên kết đến:

  • Đầu ra HTML của các bảng điều khiển cần tất cả các đánh dấu điên rồ đó để có thể chứa các bố cục linh hoạt điên rồ nhất mà bất kỳ ai cũng có thể muốn tạo - nghĩ rằng có vô số chất lỏng lồng nhau và các vùng cố định cạnh nhau.
  • Không có gì tự động được tạo sẽ đủ tốt cho những người theo chủ nghĩa thuần túy HTML, vì vậy những người trong Hội đồng đã cố gắng giữ họ hạnh phúc trong tính năng bố trí linh hoạt . Vì vậy, không có thuật toán tối ưu hóa HTML nào cố gắng giảm bớt HTML được tạo bởi bố cục của bạn đến mức tối thiểu, bởi vì dù nó tốt đến đâu, nó vẫn không phải là HTML tiêu chuẩn tốt nhất.
  • Một cái gì đó họ không đề cập: nếu có một trình tối ưu hóa như vậy, một số thay đổi nhất định về bố cục sẽ khiến các div và lớp dự phòng bây giờ biến mất. Nếu bạn treo CSS khỏi những thứ này, bạn sẽ cần phải viết lại CSS của mình nhiều lần bạn thực hiện một thay đổi nhỏ thành bố cục linh hoạt của Bảng. Điều này có nghĩa là nếu họ đã cố gắng (và thất bại) để biến Bảng điều khiển linh hoạt thành một công cụ sản xuất tiêu chuẩn tốt nhất, thì họ cũng sẽ làm suy yếu nó như một công cụ tạo mẫu.
  • Bạn có thể nhận được đầu ra HTML gọn gàng, gọn gàng . Quy trình làm việc dự kiến, đọc giữa các dòng, tôi tin rằng một cái gì đó như thế này:
    • Bạn sử dụng Bảng linh hoạt Bố cục trong quá trình phát triển ban đầu, trong khi thử các ý tưởng.
    • Khi bạn đã giải quyết một bố cục cụ thể, nếu bạn muốn HTML sạch, bạn triển khai nó bằng cách sử dụng bố cục tùy chỉnh, chỉ sử dụng số lượng đánh dấu HTML chính xác mà bố cục cần với chỉ các lớp, ngữ nghĩa, v.v. cho trang web của bạn (cách thực hiện bên dưới ).

Mặc dù lúc đầu tôi không thích nó, nhưng tôi nghĩ nó có ý nghĩa. Thay vì cố gắng làm điều không thể và tạo ra một công cụ hoàn hảo cho cả tạo mẫu và tiêu chuẩn tốt nhất trong bối cảnh sản xuất - cả hai đều có những nhu cầu rất khác nhau và chỉ có thể dẫn đến một sự tương xứng không phù hợp với cả hai - chúng Đã đi với một công cụ lý tưởng cho việc tạo mẫu và một công cụ riêng biệt khác (bố trí tùy chỉnh) lý tưởng cho sản xuất tinh gọn.

Điều này có nghĩa là bạn có thể có được thứ tốt nhất của cả hai, với chi phí cao hơn một chút cho việc bố trí cuối cùng của bạn dưới dạng mẫu dựa trên HTML tiêu chuẩn tốt nhất - nhưng dù sao thì một người thuần túy HTML sẽ muốn làm thêm một chút công việc đó để có được đầu ra của họ hoàn hảo.


Làm thế nào để tạo bố cục bảng tùy chỉnh? một hướng dẫn chi tiết trong tài liệu về cách làm như vậy . Đây là một bản tóm tắt cơ bản nhanh chóng:

  1. Sao chép một bố cục hiện có từ /sites/all/modules/panels/plugins/layoutsđể trở thành/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. Đổi tên các tệp trong bản sao mới để khớp với tên thư mục mới của chúng. Lưu ý rằng .tpl.phptập tin nên có dấu gạch ngang thay vì dấu gạch dưới.
  3. Thêm một dòng vào tệp thông tin chủ đề: plugins[panels][layouts] = layoutsĐiều này cho các Bảng biết rằng bạn có bố cục tùy chỉnh trong chủ đề này và vị trí của chúng (thay thế chuỗi layoutsnếu đó không phải là đường dẫn từ chủ đề của bạn đến thư mục bố cục tùy chỉnh của bạn)
  4. Chỉnh sửa các tệp với HTML và CSS hoàn hảo, kiểu dáng đẹp, tối thiểu, ngữ nghĩa tốt nhất của bạn.

    • Đừng quên cập nhật .inctệp với thông tin về bố cục của bạn như tên, danh mục, tên tệp, v.v.
    • themetrong tệp .inc phải khớp với tên .tpl.phptệp của tệp mà không có phần mở rộng. Bất kỳ dấu gạch dưới nào bạn nhập vào đây trong themegiá trị sẽ được chuyển đổi thành dấu gạch nối.
    • Cũng xem xét chỉnh sửa .pngbiểu tượng để phản ánh tốt hơn bố cục thực tế của bạn.
  5. Xóa bộ nhớ cache. Bố cục mới của bạn xuất hiện dưới dạng tùy chọn trong Bảng với tên, danh mục, v.v. bạn đã chỉ định trong .inctệp. Sử dụng nó.

1
Thnx man!, Điều này sẽ chiếm phần còn lại của buổi chiều cho tôi ... Nhưng nó có thể được thực hiện mà không cần "hack" để làm dịu tâm trí tôi một chút. Btw: tôi hy vọng bài đăng này xuất hiện trên google bằng cách nào đó bởi vì tôi không thể tìm thấy bất kỳ bài viết nào liên quan đến vấn đề: S.
thecod assassin

@Stephen Tôi ngạc nhiên về tần suất tôi tìm kiếm thứ gì đó 6 tháng + sau khi tôi đặt câu hỏi và kết thúc câu hỏi của chính mình. Hoặc cùng một câu hỏi SE ...
WernerCD

Tôi nghĩ rằng câu hỏi và câu trả lời này là siêu hữu ích, do đó tôi đã đề xuất một chỉnh sửa cho tiêu đề của nó đã được chấp nhận. Tôi đã tự hỏi một câu hỏi tương tự ở đó: drupal.stackexchange.com/questions/69807/theming-panels-html là một bản sao
George Katsanos

5

Bạn cũng có thể xem xét mô-đun Clean Markup Drupal 7 để kiểm soát đầu ra đánh dấu cho các Bảng.

Tôi đã tìm kiếm trang này trong trình duyệt và không tìm thấy đề cập nào về nó, kể cả trong câu trả lời toàn diện thực sự tốt được đưa ra bởi user568458.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.