it-swarm-vi.com

tạo mẫu mới trong 3.3

Tôi đang tạo mẫu mới đầu tiên của mình - rất mới bắt đầu.

Tôi có một trang web HTML5 và CSS3 tĩnh do tôi tự tạo từ đầu và chuyển đổi trang này thành mẫu Joomla 3.3.

Tôi đã đọc một số hướng dẫn về cách tạo một mẫu cơ bản, v.v. nhưng tôi thực sự không có thời gian để đặt tay lên mọi thứ, vì vậy tôi cần một giải pháp nhanh chóng là tôi có thể sử dụng tất cả kiểu dáng CSS của mình và bỏ qua mọi thứ xuất hiện từ Joomla.

Tôi đã cố gắng đưa một số thẻ <div> Được tạo kiểu vào chỉ mục của mình hoặc dưới dạng mô-đun bên dưới (html tùy chỉnh) nhưng có một số kiểu css ghi đè quy tắc css của tôi vì vậy tôi chỉ muốn loại bỏ mọi thứ khỏi j Joomla và giữ mẫu mới của tôi sạch sẽ.

Tôi đã có cái này trong index.php của tôi

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

nhưng tôi nghĩ phong cách chính ghi đè lên tôi đến từ dòng này

<jdoc:include type="head" />

mà tôi không biết những gì nó mang lại.

4
Elhamy

Nguyên tắc chung khi thực hiện một mẫu là tải các tệp CSS của riêng bạn sau <jdoc:include type="head" />. Điều đó quan trọng bởi vì cách này bạn có tiếng nói cuối cùng về các quy tắc CSS. Tuy nhiên, điều đó cũng có nghĩa là bạn không sử dụng $doc->addStyleSheet() trong mẫu của mình. Thay vào đó, bạn chỉ cần viết nó dưới dạng HTML đơn giản vào đầu sau câu lệnh jdoc.

Có một lý do để vẫn sử dụng API để thêm tệp JavaScript hoặc CSS trong mẫu của bạn. Đó là nếu bạn tải các tài sản cũng có thể được tải bởi các tiện ích mở rộng. Sau đó, Joomla sẽ quan tâm rằng nó chỉ được tải một lần, trong khi nếu không thì bạn có thể đã tải nó hai lần.

Vì vậy, có thể có ý nghĩa khi tải tệp bootstrap bằng API, nhưng kiểu mẫu của riêng bạn (style.css) và JavaScript (main.js) nên được tải mã hóa cứng sau thẻ jdoc.

Trên một sidenote: Bạn có thể tải CSS Bootstrap CSS bằng cách sử dụng JHtmlBootstrap::loadCSS() ( http://api.j Joomla.org/cms-3/groupes/JHtmlBootstrap .html # method_loadCss ). Điều này hoàn toàn tốt khi được thực hiện trong một mẫu. Nhưng không bao giờ sử dụng cuộc gọi này trong một tiện ích mở rộng.

Tuy nhiên, có thể có ý nghĩa hơn khi làm việc từ các tệp Bootstrap LESS và biên dịch tệp CSS của riêng bạn từ đó. Sau đó, bạn thậm chí có thể trộn và khớp những thứ bạn cần và tận dụng các mixin và biến đã được cung cấp bởi Bootstrap.

6
Bakual

Thật không may, Joomla không hoạt động như thế này. Để tạo một mẫu Joomla, bạn phải có một số yếu tố động như thẻ jdoc nhập thành phần và vv.

<jdoc:include type="head" /> cũng là một yêu cầu và rất tiện dụng ở đó. Về cơ bản, nó nhận được tất cả các tập lệnh, liên kết và bất cứ thứ gì khác được cho là được đưa vào <head> từ một phần mở rộng và đưa nó vào đó cho bạn. Ví dụ: giả sử bạn có một mô-đun yêu cầu graph.js. Để nhập cái này, bạn sẽ sử dụng cái gì đó như thế này:

JHtml::_('script', JUri::root() . 'modules/my_module/js/graph.js');

Hiện nay <jdoc:include type="head" /> lấy mã ở trên và đưa nó vào <head> cho bạn để bạn không phải làm thủ công. Vì vậy, giữ nó ở đó quảng cáo không loại bỏ nó. Tôi cũng sẽ được yêu cầu cho một số tập lệnh cốt lõi được phát hành với Joomla.

Nếu bạn muốn sử dụng các mô-đun trong trang web của mình, bạn không thể thêm mã HTML vào tệp index.php của mình và hy vọng nó hoạt động chính xác và năng động. Đây là lý do tại sao chúng tôi sử dụng:

<jdoc:include type="modules" name="position-7" />

nhập khẩu mô-đun và cấu trúc HTML được mã hóa là. Bạn có thể tuy nhiên thêm HTML tùy chỉnh để bao quanh mô-đun như vậy:

<div class="sidebar">
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-7" />
    </div>
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-8" />
    </div>
</div>

Nó không phức tạp lắm và nó cũng làm cho cuộc sống đơn giản hơn rất nhiều. Joomla không dựa trên cách tiếp cận tĩnh do đó bạn nên tuân theo cách thức hoạt động của nó.

4
Lodder

Khi tôi mới bắt đầu, các mẫu Joomla ngoài luồng không sạch sẽ và điều đó tốt cho người mới bắt đầu.

Tôi đã có một phần đầu trông như thế này ...

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/menus.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/modules.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/styles.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/peter.css?v=20140508-6" type="text/css" />

Cụ thể, các bảng định kiểu không được bao gồm theo cách "Đẹp" với addStyleSheet và kết quả là chúng sẽ ở nơi chúng được đặt, cuối cùng! Bất kỳ bảng định kiểu được thêm động nào được chèn tại <jdoc:include type="head" /> điểm.

Điều có thể xảy ra trong mẫu của bạn là các bảng định kiểu của bạn đang được tải trước, sau đó bất kỳ kiểu Joomla nào được thêm động sẽ được thêm sau cùng. Tất cả phụ thuộc vào nơi các hàm addStyleSheet được gọi.

Nếu bạn tự tin rằng bạn có tất cả những gì bạn cần trong mẫu và không cần thêm các bit động bổ sung (ví dụ: cho trình chỉnh sửa lối vào) hoặc cho bất kỳ tiện ích mở rộng nào bạn thêm, thì bạn có thể thoát khỏi việc xóa <jdoc:include type="head" />, ít nhất là cho một mẫu mới bắt đầu.

Hoặc ... chỉ cần thêm biểu định kiểu của bạn tại một điểm cố định, bên ngoài phần đầu đi kèm.

Khi bạn bước ra ngoài người mới bắt đầu, có lẽ bạn sẽ muốn bao gồm phần đầu. Có nhiều cách để thao tác nội dung động, mặc dù không nhất thiết phải dành cho người mới bắt đầu. Ví dụ: để gỡ lỗi, tôi có một biểu định kiểu mà tôi tự động thêm bằng cách sử dụng tiện ích mở rộng tùy chỉnh, nếu tôi là người dùng đã đăng nhập.

1
Peter Wiseman

Nếu phong cách của bạn đang bị ghi đè, chắc chắn là do css của Bootstrap, vì nó sử dụng một số bộ chọn có độ đặc hiệu cao.

Trang web tĩnh của bạn có sử dụng Bootstrap không? Nếu không, thì bạn gần như chắc chắn sẽ tốt hơn nếu không có nó trong mẫu Joomla của bạn. Bạn sẽ chỉ kết thúc chiến đấu với nó. Tôi nghĩ rằng đây là những gì bạn đã thấy.

Nếu trang web tĩnh của bạn không sử dụng Bootstrap thì bạn có thể quên đi tất cả các cuộc nói chuyện ở đây của LESS và chỉ cần bao gồm CSS và JS của riêng bạn, như bạn đã làm. phải sử dụng Bootstrap trong mẫu Joomla của bạn.

1
Seth Warburton