Home › Drupal › Sưu tập các bài viết hay

Tùy biến hộp đăng nhập

Fri, 08/17/2007 - 14:20 — thehong

Dịch từ: http://drupal.org/node/92657

Bài viết này trình cách tạo một thanh người dùng:
- Khi người dùng chưa đăng nhập, thanh này gồm các trường nội dung để người dùng đăng nhập. (ảnh 1)
- Khi người dùng đã đăng nhập, trình bày một câu chào mừng. (ảnh 2)

Bài viết này thực hiện trên theme Garland, theme mặc định của Drupal 5. Tuy nhiên, cũng có thể áp dụng bài viết này cho các theme khác.

Drupal rất mạnh mẽ, do đó, chúng ta có thể thực hiện ý tưởng của mình theo nhiều cách khác nhau. Cách mà bài viết này thực hiện:
- Viết một hàm riêng biệt có tên là garland_user_bar(). Tùy trường hợp nó sẽ trả về nội dung HTML của biểu mẫu đăng nhập hoặc một câu chào mừng.
- Hàm này sẽ được khai báo phía trên ở trong tập tin page.tpl.php.
- Trở lại hàm của chúng ta, trường hợp form trả về biểu mẫu, chúng ta chỉ cần mượn biểu mẫu đăng nhập mặc định của hệ thống cung cấp mà không cần phải đi xây dựng lại. Khi đó, chúng ta cần sử dụng CSS để định nghĩa lại cách trình bày của biểu mẫu, sao cho nó nằm gọn trên một dòng. Xem nguồn HTML, chúng ta biết được đối tượng HTML nào cần được định nghĩa.
- Khi người dùng đã đăng nhập, hàm sẽ trả về một lời chào mừng và một vài liên kết hữu ích nào đó.

Chúng ta đã có logic xử lý, bây giờ chúng ta sẽ viết một vài dòng CSS trong tập tin page.tpl.php:

1. HTML

Mở tập tin themes/garland/page.tpl.php, trước dòng 16, thêm vào đoạn:
<div id="navigation"><?php print garland_user_bar() ?></div>

2. PHP

Định nghĩa hàm garland_user_bar()

<?php
function garland_user_bar() {
  global $user; // biến toàn cục
  $output = ''; // biến này lưu chuỗi HTML trả về
  if (!$user->uid) { // nếu người dùng chưa đăng nhập
    $output .= drupal_get_form('user_login_block');
  }
  else {
    $output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username', $user)));
    $output .= theme(
      'item_list', array(
        l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
        l(t('Sign out'), 'logout')
      )
    );
 }
}
?>

3. CSS (đang cập nhật, sorry)

1. Tạo tập tin themes/garland/user_bar.css với nội dung tương tự

  1. /*
  2. mở rộng thanh garland mặc định, làm cho nó to hơn để vừa vặn cho biểu mẫu và thông điệp
  3. */
  4. #navigation {
  5.   height: 3em;
  6. }
  7.  
  8. /*
  9. mặc định, biểu mẫu sẽ thêm vào một số khoảng trống bao quanh nó, những dòng này, bỏ các khoảng trống đó đi
  10. */
  11. #navigation div.form-item,
  12. #navigation div.content {
  13.   margin: 0; padding: 0;
  14. }
  15.  
  16. /*
  17. this adds some space in top and bottom, so anything inside can look vertically
  18. centered
  19. */
  20. #user-bar {
  21.   padding: .65em 0;
  22. }
  23.  
  24. /*
  25. by default, fields labels tries to reserve a whole line for itself, this
  26. cancels that and and sends it to the left.
  27. it also adds some space on the right and left of the label to look easy on
  28. the eye.
  29. */
  30. #user-bar label {
  31.   float: left;
  32.   margin-left: 10px;
  33.   margin-right: 2px;
  34. }
  35.  
  36. /*
  37. inputs too, they try to reserve a whole line for itself, this
  38. cancels that and sends it to the left
  39. */
  40. #user-bar input {
  41.   float: left;
  42. }
  43.  
  44. /*
  45. I don't like the required * (asterisks), so I hide them.
  46. */
  47. #user-bar span.form-required {
  48.   display: none;
  49. }
  50.  
  51. /*
  52. the form submit button, it's so tight so we expand it a bit, and give it some
  53. free space around.
  54. */
  55. #user-bar input.form-submit {
  56.   margin-top: -1px;
  57.   margin-left: 10px;
  58.   padding: 0 .5em;
  59. }
  60.  
  61. /*
  62. now this is for the links list, lists by default tries to reserve a whole line
  63. also they add space surrounding them. we cancel all that and send the list
  64. to the right
  65. */
  66. #user-bar div.item-list ul {
  67.   float: right;
  68.   margin: 0; padding: 0;
  69.   margin-right: 10px;
  70. }
  71.  
  72. /*
  73. remember, stylign above was for the whole list, now for each item,
  74. we all know each item in the list by default exists on a separate line, also
  75. has that bullet on the left. we cancel all that. and makes all items sit beside
  76. each other
  77. */
  78. #user-bar div.item-list ul li {
  79.   float: left;
  80.   background: none;
  81.   margin: 0 5px;
  82.   padding: 0 10px;
  83.   border: 1px solid #b8d3e5;
  84. }
  85.  
  86. /*
  87. this is the "Hi user, welcome back message".
  88. by default <p> tries to exist on a separate line, we cancel that.
  89. also by default <p> has some surrounding space, we cancel that too, and give it
  90. only space on the left.
  91. */
  92. #user-bar p.user-info {
  93.   float: left;
  94.   padding: 0;
  95.   margin: 0 0 0 10px;
  96. }

2. Thêm dòng sau vào giữa cặp thẻ <header></header> để áp dụng định nghĩa trên vào giao diện:
  1. <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/user_bar.css";</style>

4. Ảnh minh họa

Ảnh 1

Ảnh 2