1. Trang chủ
  2. Câu hỏi và trả lời
  3. Làm cách nào để lưu trữ thanh điều hướng trong một tệp?

Làm cách nào để lưu trữ thanh điều hướng trong một tệp?

2011-08-14 29 views
20

Tôi có một thanh điều hướng cho trang web của tôi:Làm cách nào để lưu trữ thanh điều hướng trong một tệp?

<div id='menu'><ul> 
    <li><a href='index.html'>Home</a></li> 
    <li><a href='about.html'>About Us</a></li> 
    <li><a href='http://www.brownpapertickets.com' target=_blank>Ticket Sales</a></li> 
    <li><a href='merch.html'>Merchandise</a> 
     <ul> 
      <li><a href='merch.html'>Products</a></li> 
      <li><a href='cart.html'>Shopping Cart</a></li> 
     </ul> 
    </li> 
    <li><a href='past.html'>Past Shows</a> 
     <ul> 
      <li><a href='photos.html'>Photo Gallery</a></li> 
      <li><a href='vids.html'>Video Clips</a></li> 
     </ul> 
    </li> 
</ul></div>

Tôi muốn để lưu trữ này trong một vị trí trung tâm để mỗi khi tôi có thêm một siêu liên kết hoặc một cái gì đó tôi không cần phải chỉnh sửa tất cả các tập tin duy nhất. Cách tốt nhất để làm điều này là gì?

Nguồn

2011-08-14 Jason

+3

Bạn có thể chạy bất kỳ ngôn ngữ phía máy chủ nào như PHP không? – Wylie

+0

Để thay thế cho việc sử dụng ngôn ngữ phía máy chủ, bạn có thể sử dụng trình tạo trang web tĩnh có mẫu xác định phần commons của các trang của bạn. Dưới đây là danh sách lớn các trình tạo trang web tĩnh: http://iwantmyname.com/blog/2011/02/list-static-website-generators.html –

+0

sử dụng ID: http://www.webdeveloper.com/forum/showthread. php? 156367-Làm-my-menu-load-from-external-file – Ampere

Trả lời

21

Giả sử bạn đang sử dụng một ngôn ngữ kịch bản như PHP, bạn chỉ cần lưu HTML trên trong một file php gọi header.php (hoặc một cái gì đó theo ý thích của bạn)

Sau đó, trong file php khác của bạn, bạn viết:

include_once('header.php'); và nó sẽ cắt xén HTML ngay trong đó.

Một số nguồn lực dành cho bạn:

http://php.net/manual/en/function.include.php

http://www.php.net/manual/en/function.include-once.php

http://php.about.com/od/tutorials/ht/template_site.htm

Thưởng thức!

Nguồn

2011-08-14 04:37:40 AlienWebguy

+0

Đẹp, cảm ơn bạn rất nhiều! – Jason

+0

Bạn được chào đón! Vui vì tôi có thể giúp :) – AlienWebguy

+0

Điều này có thể được thực hiện mà không cần PHP không? Chỉ cần html, css (có thể là python ..) –

15

Cập nhật @AlienWebguy đã chỉ ra rằng các giải pháp này sẽ làm hỏng thứ hạng của bạn trong kết quả công cụ tìm kiếm. Nếu bạn quan tâm về điều đó, không sử dụng chúng. Nhưng theo ý kiến ​​của tôi, là những lựa chọn hợp lệ, họ đáng được biết đến.

Nếu một server-side bao gồm (sử dụng PHP hoặc một số ngôn ngữ khác) không phải là một lựa chọn bạn có thể làm điều đó bằng:

  1. Frames
    Trong tất cả các trang của bạn, bao gồm iframe (được tạo kiểu không có viền hoặc thanh cuộn) và đặt src thành tệp HTML chứa đánh dấu điều hướng của bạn. Tất nhiên, bạn sẽ gặp rắc rối với các liên kết sau và có thể bạn sẽ phải sử dụng JavaScript để có được hành vi 'đúng'. Điều này có lẽ không đáng để nỗ lực. Để thực hiện theo các liên kết chính xác, bạn sẽ cần phải sử dụng target attribute trong các liên kết điều hướng của mình đến _top (hoặc có thể là _parent). Đây có lẽ là giải pháp đơn giản nhất nên hoạt động ngay cả trong các tác nhân người dùng mà không cần hỗ trợ tập lệnh.

    Ví dụ, trang của bạn sẽ trông như thế này:

    <html> 
<body> 
    <iframe src="navbar.html" class="navbar" /> 
    <!-- other content here --> 
</body> 
</html

    với navbar.html tìm kiếm như thế này:

    <html> 
<body> 
    <div id='menu'><ul> 
     <li><a href='index.html' target="_top">Home</a></li> 
     <li><a href='about.html' target="_top">About Us</a></li> 
     <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li> 
     <li><a href='merch.html' target="_top">Merchandise</a> 
      <ul> 
       <li><a href='merch.html' target="_top">Products</a></li> 
       <li><a href='cart.html' target="_top">Shopping Cart</a></li> 
      </ul> 
     </li> 
     <li><a href='past.html' target="_top">Past Shows</a> 
      <ul> 
       <li><a href='photos.html' target="_top">Photo Gallery</a></li> 
       <li><a href='vids.html' target="_top">Video Clips</a></li> 
      </ul> 
     </li> 
    </ul></div> 
</body> 
</html>

  2. Ajax
    Lưu HTML mà bạn cần cho navbar dưới dạng một đoạn HTML (không phải là một tài liệu HTML hoàn chỉnh) và tải nó bằng cách sử dụng ajax khi tải trang. Đây là một ví dụ sử dụng jQuery. Trên trang của bạn:

    <html> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#menu').('navbar.html'); 
    }); 
</script> 

<body> 
    <div id='menu' /> 
</body> 
</html>

    navbar.html

    <ul> 
    <li><a href='index.html' target="_top">Home</a></li> 
    <li><a href='about.html' target="_top">About Us</a></li> 
    <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li> 
    <li><a href='merch.html' target="_top">Merchandise</a> 
     <ul> 
      <li><a href='merch.html' target="_top">Products</a></li> 
      <li><a href='cart.html' target="_top">Shopping Cart</a></li> 
     </ul> 
    </li> 
    <li><a href='past.html' target="_top">Past Shows</a> 
     <ul> 
      <li><a href='photos.html' target="_top">Photo Gallery</a></li> 
      <li><a href='vids.html' target="_top">Video Clips</a></li> 
     </ul> 
    </li> 
</ul>

Nguồn

2011-08-14 04:42:28

+0

-1 Đây là một ý tưởng hoàn toàn khủng khiếp. Điều hướng chính của bạn là trung tâm của nước ép SEO của bạn. Tại sao trên thế giới bạn sẽ ajax nó để Google không thấy bất kỳ liên kết đến các trang chính của bạn? – AlienWebguy

+9

@AlienWebguy Tôi cảm thấy downvote là không cần thiết - chỉ cần chỉ ra OP rằng nếu anh ta quan tâm đến SEO, đây không phải là một ý tưởng hay (nhưng các tùy chọn hợp lệ IMO). Tôi đã trả lời câu hỏi OPs với bằng cấp rằng trong trường hợp không thể có phía máy chủ, đây là những cách tiếp cận thay thế. Có những cân nhắc chắc chắn khác được thực hiện khi tạo một trang web và như bạn đã chỉ ra, có lẽ xếp hạng công cụ tìm kiếm là điều mà OP nên xem xét. Nhưng có vẻ như với tôi rằng đó không phải là một cái gì đó rất phù hợp với câu hỏi từ quan điểm lập trình. –

+1

Chúng tôi không biết liệu OP có đang phát triển một trang web công cộng hay một trang nội bộ - trong trường hợp sau, tôi nghi ngờ con số SEO rất cao trong danh sách các cân nhắc. Dù bằng cách nào, tôi đã đưa ra các tùy chọn OP để xem xét đưa ra thông tin trong câu hỏi. –

1

Bạn có thể sử dụng AJAX và sau đó tạo ra một trang riêng biệt chỉ với mã đơn trên đó.

Thực ra bạn chỉ cần sử dụng jQuery .load() của jQuery rất dễ sử dụng.

Dưới đây là một ví dụ tải nav.html vào một div với #nav-container cho ID:

<script type="text/javascript"> 
$(document).ready(function() { 
$('#nav-container').load('/path/to/nav.html'); 
}); 
</script>

Bạn chỉ sẽ phải thêm mã này vào từng trang và có một div trên đó nhưng một khi bạn làm điều này, bạn' ll chỉ phải cập nhật nav.html

Lưu ý: Đây là cách tốt nhất để làm điều đó nếu bạn không thể sử dụng PHP, vì iframe không còn tốt nữa. Điều này thực sự sẽ tải mã từ nav.html vào trang bên phải khi trang đang tải. (Chấp nhận <html>, <body>, và thẻ trang khác. Nó sẽ chỉ mã trong <body></body> trên trang nav.html.

Đối với người dùng của bạn mà không cần JavaScript, chỉ cần đặt một khung nội tuyến trong <noscript></noscript> thẻ nếu bạn thực sự muốn. Nếu người dùng của bạn phải bật JavaScript bất kể sử dụng trang web của bạn thì bạn không phải bận tâm đến điều đó. (Hãy nhớ với iframe bạn phải đặt mục tiêu và nội dung trên tất cả các liên kết trong điều hướng.)

Hãy nhớ bao gồm liên kết tệp jQuery trong số head của bạn gs trên tất cả các trang của bạn mà bạn đang tải nav.html vào nếu bạn chưa tải.

Hy vọng điều này hữu ích.

Nguồn

2011-08-14 04:47:12 Nathan

2

Tôi đang sử dụng smartmenus for jquery mà đòi hỏi bạn phải thêm

$('#main-menu').smartmenus();

nếu bạn có các menu con

Tôi thấy rằng nếu bạn mở rộng tải để :

$('#menu').load('navbar.html',function(){ 
    $('#main-menu').smartmenus(); 
});

hoạt động tốt. Trường hợp menu chính là lớp ul của khối menu.

Nguồn

2016-09-13 11:03:05 APA

Các vấn đề liên quan

 Các vấn đề liên quan