Bất kỳ cách nào để thêm CSS cho một trang / nút?

Tôi đang dọn dẹp các trang mẫu điên lớn của mình (có thể phù hợp với câu hỏi trong tương lai) và tôi đang tự hỏi cách tốt nhất để thêm CSS tùy chỉnh vào một nút hoặc trang cụ thể.

Đặc biệt, trang chủ của trang web công việc của tôi là Trang bảng điều khiển và nó có một loạt các kiểu dáng khác nhau. Ngay bây giờ CSS chỉ được bao gồm trong bảng kiểu chủ đề chính.

Có cách nào để nói, "nếu đây là nút Foo, thì hãy thêm foo.css"? Là CSS In phun những gì tôi đang tìm kiếm?

Tôi có thể quan tâm đến việc khái quát hóa điều này cho các nút / phần / vv khác, nhưng hiện tại tôi chỉ muốn xử lý một mục này.

Cuối cùng tôi đã làm gì.

Tôi đang sử dụng một tiểu trình Zen và được phát hiện trong khi thực sự đọc qua template.php rằng có một số mã được nhận xét để bao gồm các biểu định kiểu có điều kiện. Mã dưới đây đã làm chính xác những gì tôi cần:

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

(Dòng 80 trong tệp Zen template.php, FWIW.)

Đây là loại việc tôi làm bằng mã, nhưng đó là vì đó chỉ là cách tôi lăn.

Trong template.php, bạn sẽ muốn một cái gì đó như:

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

Thay thế foo bằng các giá trị liên quan đến mã của riêng bạn.

Bạn có thể xem mô-đun Code per Node . Nó cũng được đặc trưng trong bài viết trên blog này .

Tạo một bối cảnh cho trang / phần của bạn và sau đó sử dụng mô-đun Tài sản bối cảnh để tải CSS và / hoặc javascript cho bối cảnh cụ thể đó.

Bối cảnh:

Bối cảnh cho phép bạn quản lý các điều kiện và phản ứng theo ngữ cảnh cho các phần khác nhau của trang web của bạn. Bạn có thể nghĩ mỗi bối cảnh đại diện cho một "phần" của trang web của bạn. Đối với mỗi bối cảnh, bạn có thể chọn các điều kiện kích hoạt bối cảnh này để hoạt động và chọn các khía cạnh khác nhau của Drupal sẽ phản ứng với bối cảnh hoạt động này.

Hãy nghĩ về các điều kiện như một tập hợp các quy tắc được kiểm tra trong khi tải trang để xem bối cảnh nào đang hoạt động. Bất kỳ phản ứng có liên quan đến bối cảnh hoạt động sau đó sẽ bị sa thải.

Bối cảnh Thêm tài sản:

Bối cảnh thêm tài sản cho phép bạn làm điều này. Nó có một giao diện người dùng dễ sử dụng để cho phép bạn thực hiện tất cả điều này mà không cần viết bất kỳ mã nào. Bởi vì nó sử dụng ctools, tất cả điều này cũng có thể xuất khẩu.

Nếu đó là một lượng nhỏ CSS, có thể xem xét việc tạo các bộ chọn CSS của bạn dựa trên nút và bao gồm css trong CSS của chủ đề của bạn? Drupal 7 cung cấp bộ chọn body.page-node-NODEID và Zen cho Drupal 6 cung cấp các lớp CSS cơ thể tương tự.

Bạn có thể tạo một mô-đun tùy chỉnh và sử dụng hook_pre process_node () để tải biểu định kiểu một cách chọn lọc dựa trên id nút.

Đây là một ví dụ:

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Thay thế MYMODULE bằng tên của mô-đun của bạn và thay thế MYTHEME bằng tên của chủ đề có chứa tệp css.

Nếu tiêu chí thêm kiểu CSS phụ thuộc vào một số thuộc tính của nút, thì tôi sẽ thực hiện MYTHEME_preprocess_node(&$variables); một trong những giá trị được truyền cho hàm là $variables['node'](để ý là không $variables['#node']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Nếu tiêu chí không phụ thuộc vào bất kỳ thuộc tính nút nào, thì tôi sẽ thực hiện MYTHEME_preprocess_page(&$variables); $variables['node']chứa một đối tượng nút, nếu trang được hiển thị là trang nút. Trong Drupal 6, hàm process cũng có được $variables['is_front'], nhưng trong Drupal 7, biến tương tự không được thông qua; nếu bạn cần biết trang này có phải là trang trước hay không, bạn cần sử dụng drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Đối với cách quản trị dựa trên cách làm, tôi sẽ xem xét mô-đun CSS . Nó thêm một trường nơi bạn có thể thêm CSS vào node/addvà node/editcác trang.

CSS:

Mô-đun CSS cho biết thêm, đối với người dùng có đủ quyền và các nút được kích hoạt, trường CSS trên trang tạo nút.

Người dùng có thể chèn các quy tắc CSS vào trường nút CSS và các quy tắc đó sẽ được phân tích cú pháp khi xem nút.

Bằng cách này, người dùng có kinh nghiệm CSS có thể tạo thiết kế dựa trên CSS phức tạp cho nội dung nút.

Quan trọng: lưu ý rằng các quyền chỉnh sửa CSS chỉ nên được trao cho người dùng đáng tin cậy (quản trị viên). Người dùng độc hại có quyền này có thể đã phá vỡ thiết kế trang web của bạn và cũng gây ra sự cố bảo mật (XSS).

CodePerNode là tuyệt vời, nhưng CSS Injection đơn giản hơn để cài đặt (không cần thư viện). Mô-đun cho phép trình quản lý nội dung tự động thêm CSS vào các trang cụ thể mà không cần chạm vào các tệp PHP hoặc INFO. 15777 cài đặt không thể sai - đây là bằng chứng xã hội mô-đun này hoạt động. CSS cũng được lưu trữ với hệ thống bộ đệm thông thường.

Vì bạn đã sử dụng Bảng điều khiển, việc thêm CSS của bạn dưới dạng Bảng điều khiển cho từng khu vực trong bảng điều khiển trang chủ của bạn có thể dễ dàng hơn. Bạn có thể xác định đánh dấu tùy chỉnh ở đó và sử dụng lại trên trang web của bạn.

Bạn cũng có thể chỉ cần đi đến phần Chung của quy tắc biến thể của trình quản lý trang cho trang chủ của mình. Có một phần ở đây để thêm ID CSS và quy tắc cho bảng điều khiển hiện tại.

Lưu ý: đây là tất cả trong D7, vì vậy có thể cách tiếp cận này được các Bảng hỗ trợ tốt hơn so với các phiên bản trước.

/ * Một ví dụ sử dụng chủ đề bartik để thêm css dựa trên loại nội dung * /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}

Hãy thử thêm phần này vào tệp 'template.php' của bạn:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

Thay thế 'huyền thoại' bằng tên của thư mục chủ đề của bạn và '/css/front.css' bằng đường dẫn trong đó tệp CSS của bạn.

Để bỏ đặt tệp 'front.css' khỏi các trang khác, hãy thử thêm vào 'template.php':

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

Một lần nữa, thay thế 'huyền thoại' bằng tên của thư mục chủ đề của bạn.

Nếu bạn cần hủy đặt 'style.css' từ trang trước, chỉ cần kết hợp hai mã này.

Giả sử rằng bạn cần 'front.css' mà không có 'style.css' trên trang trước và 'style.css' mà không có 'front.css' trên tất cả các trang khác. Mã sẽ trông giống như thế này:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

Ngoài ra, thay thế 'huyền thoại'.

Tôi hy vọng điều này sẽ có ích.

Tôi đã bỏ qua việc chạm vào template.php hoàn toàn và chỉ cần thêm một mục khác trong tệp .info của chủ đề của bạn

Nói biểu định kiểu của bạn là trong css/foo.css.

Đây là cách tệp theme_name.info của bạn sẽ trông như thế nào:

name = Theme Name
...
stylesheets[all][] = css/foo.css

Sau đó, bạn được hưởng lợi từ việc lưu trữ nó với các bảng định kiểu chính và vì tôi cho rằng đây là trang chủ của bạn nên nó có ý nghĩa.

Bên cạnh cách tiếp cận Drupal, khi bạn chỉ cần một đoạn css ngắn bên trong cơ thể HTML5 của mình, bạn có Thuộc tính phạm vi css. Xem https://stackoverflow.com/a/4607092/195812

Giải pháp này sẽ giúp bạn tiết kiệm từ chỉnh sửa mã và cài đặt thêm các mô-đun

Bạn có thể in nút trang trong thẻ body

<body page-node-26419 ...>

Sau đó, bạn có thể hạn chế

body.page-node-26419 {
    background: red
}

Điều này hữu ích cho những thay đổi nhanh chóng nhỏ