Skip to main content

Duyệt exampleSite

Trang tùy chỉnh mô tả các tham số cấu hình Browse phổ biến có thể được chỉ định thông qua tệp cấu hình hoặc qua phần Front Matter. Bao gồm điều chỉnh phần logo, thêm thanh bên có tiện ích, điều chỉnh màu nổi bật và nhiều hơn nữa.

Phần này chủ yếu sẽ đề cập đến các thiết lập tùy chỉnh dành riêng cho chủ đề này. Nếu có điều gì không được đề cập ở đây, rất có thể nó đã được đề cập ở đâu đó trong tài liệu Hugo .

Biểu trưng​

Browse cho phép bạn đặt logo tùy chỉnh trong tiêu đề trang web. Bạn có thể sử dụng văn bản, hình ảnh hoặc cả hai. Sử dụng các tùy chọn sau trong cấu hình trang web của bạn:

[Params.logo]
  image = "img/placeholder.png"
  title = "Browse"
  subtitle = "Just another site"

Lưu ý: hình ảnh logo sẽ hiển thị ở chiều rộng tối đa là 128 pixel và chiều cao tối đa là 128 pixel khi bạn sử dụng văn bản và hình ảnh cùng lúc. Khi hình ảnh logo duy nhất đang hoạt động, nó sẽ hiển thị ở chiều cao tối đa là 256 pixel. Lý tưởng nhất là hình ảnh logo của bạn nên là SVG.

Nếu bạn không đặt bất kỳ biến nào trong số này, chủ đề sẽ sử dụng tiêu đề trang web làm tiêu đề logo. Không cần phần logo? Hãy tắt theo cách này:

[Params.logo]
  image = false
  title = false
  subtitle = false

Màu nổi bật​

Browse được sử dụng #e22d30làm màu nổi bật mặc định, nhưng bạn có thể chọn và đặt bất kỳ màu nào khác.

[Params.style.vars]
  highlightColor = "#e22d30"

Hiển thị hình thu nhỏ​

Theo mặc định, hình ảnh thu nhỏ được hiển thị cho danh sách và các trang đơn lẻ cùng lúc. Trong một số trường hợp, bạn có thể muốn hiển thị hình ảnh thu nhỏ chỉ cho các trang giống danh sách và ẩn nó trên các trang đơn lẻ (hoặc ngược lại). Kiểm soát khả năng hiển thị hình ảnh thu nhỏ toàn cục thông qua cấu hình, sử dụng khóa visibilityvới sự kết hợp của các giá trị hợp lệ "list"và "post".

[Params.thumbnail]
  # Show thumbnail only for list items
  visibility = ["list"]

Bên cạnh cấu hình toàn cục, bạn có thể thay đổi khả năng hiển thị hình thu nhỏ riêng lẻ bằng ký hiệu hình thu nhỏ mở rộng thông qua khối nội dung phía trước.

thumbnail:
  src: "img/placeholder.png"
  visibility:
    - list
    - post

Trang này là ví dụ về chế độ hiển thị hình thu nhỏ chỉ có danh sách.

Thanh bên​

Browse đi kèm với thanh bên có thể cấu hình được có thể ở bên trái, bên phải hoặc bị vô hiệu hóa. Bố cục mặc định có thể được chỉ định trong [Params.sidebar]phần cấu hình. Vị trí có thể được chỉ định cho trang chủ, danh sách và các trang đơn lẻ riêng lẻ. Sử dụng các phím home, listvà singlevới các giá trị "left", "right"hoặc false.

[Params.sidebar]
  home = "right"
  list = "right"
  single = "right"

Bố cục có thể được cấu hình cho từng trang bằng cách đặt sidebartham số có một trong các giá trị giống nhau ( "left", "right"hoặc false) ở phần nội dung trang.

sidebar: "left" # Enable sidebar (on the left side) per page

Thanh bên bao gồm nhiều tiện ích. Có thể bật từng tiện ích riêng lẻ bằng widgetskhóa có danh sách tên tiện ích làm giá trị. Bạn có thể thêm tiện ích của riêng mình bằng cách đặt mẫu bên dưới layouts/partials/widgets/<name>.html.

[Params.sidebar]
  # Enable widgets in given order
  widgets = ["search", "recent", "categories", "taglist", "social", "languages"]

Danh sách các tiện ích có thể được ghi đè từ phần nội dung chính của trang.

# Enable sidebar widgets in given order
widgets:
  - "search"
  - "recent"
  - "taglist"

Danh sách đầy đủ các tiện ích mặc định có sẵn:

  • search, ddg-search, recent, categories, taglist, social,languages

Lưu ý : Tiện ích DuckDuckGo ( ddg-search) đã không còn được sử dụng nữa mà được thay thế bằng searchtiện ích.

Một số tiện ích của chúng tôi tôn trọng cấu hình tùy chọn. Hãy xem các phần [Params.widgets]và [Params.widgets.social] trong ví dụ bên dưới.

[Params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  categories_counter = false # Enable counter for each category in "Categories" widget
  tags_counter = false # Enable counter for each tag in "Tags" widget
[Params.widgets.social]
  # Enable parts of social widget
  facebook = "username"
  twitter = "username"
  instagram = "username"
  linkedin = "username"
  telegram = "username"
  github = "username"
  gitlab = "username"
  bitbucket = "username"
  email = "example@example.com"

Tiện ích xã hội: liên kết tùy chỉnh​

Browse chứa các liên kết xã hội tích hợp trong tiện ích xã hội. Ngoài các liên kết xã hội mặc định, bạn có thể đặt các liên kết tùy chỉnh bằng cách thêm Params.widgets.social.customvào config.toml. Sau đây là một ví dụ:

[[Params.widgets.social.custom]]
  title = "My Home Page"
  url = "https://example.com"

Nếu bạn muốn hiển thị biểu tượng liên kết mạng xã hội của mình, bạn cần đặt tệp biểu tượng SVG vào layouts/partialsthư mục dưới gốc trang web của bạn. Khóa icon, tùy chọn, phải là đường dẫn tương đối đến layouts/partials.

[[Params.widgets.social.custom]]
  title = "Youtube"
  url = "https://youtube.com/user/username"
  icon = "youtube.svg"

Lưu ý: Chỉ các tệp SVG mới được hỗ trợ để sử dụng làm biểu tượng mạng xã hội tùy chỉnh. Nếu bạn sử dụng bất kỳ tệp nào khác, ví dụ như PNG, Hugo sẽ báo lỗi biên dịch. Hơn nữa, không phải mọi biểu tượng SVG đều có thể sử dụng được. Để có kết quả tốt hơn, đó phải là tệp SVG một màu có thuộc tính lớp đặc biệt {{ with .class }}{{ . }} {{ end }}và kích thước 24x24. Tối thiểu, biểu tượng SVG tùy chỉnh cần các thuộc tính sau:

<svg class="{{ with .class }}{{ . }} {{ end }} icon" width="24" height="24">...</svg>

Bạn cũng có thể chỉ định relthuộc tính cho liên kết. Theo mặc định, giá trị thuộc tính là "noopener noreferrer". Bạn có thể xóa hoàn toàn thuộc tính bằng cách đặt giá trị của nó thành false.

[[Params.widgets.social.custom]]
  title = "My Home Page"
  url = "https://example.com"
  rel = "me"

[[Params.widgets.social.custom]]
  title = "Youtube"
  url = "https://youtube.com/user/username"
  rel = false

Tiện ích hộp tìm kiếm​

Tiện ích hộp tìm kiếm có thể tham chiếu đến kết quả tìm kiếm của Google, Bing và DuckDuckGo. Theo mặc định, Browse sử dụng tìm kiếm của Google nếu không có tùy chọn cấu hình bổ sung nào được chỉ định.

Để sử dụng một công cụ tìm kiếm khác, trước tiên hãy kiểm tra xem tiện ích tìm kiếm đã được bật chưa. Sau đó, hãy thiết lập các tham số tìm kiếm ( Site.Params.widgets.searchphần) theo dữ liệu bên dưới.

Google (mặc định) :

[Params.widgets.search]
  url = "https://google.com/search"
  [Params.widgets.search.input]
    name = "sitesearch"
    pre = ""

DuckDuckGo :

[Params.widgets.search]
  url = "https://duckduckgo.com/"
  [Params.widgets.search.input]
    name = "sites"
    pre = ""

Bing :

[Params.widgets.search]
  url = "https://www.bing.com/search"
  [Params.widgets.search.input]
    name = "q1"
    pre = "site:"

Google PSE :

[Params.widgets.search]
  url = "/search/"
  [Params.widgets.search.input]
    name = false
    pre = ""

Lưu ý rằng Google PSE yêu cầu các bước bổ sung để hoạt động chính xác. Xem Tạo công cụ tìm kiếm có thể lập trình và đặc biệt là [Câu hỏi thường gặp]


({{< relref "/docs/faq.md" >}} "Duyệt câu hỏi thường gặp") của chúng tôi để biết thêm hướng dẫn.

Thực đơn​

Browse hỗ trợ nhiều menu. mainMenu phản hồi đầy đủ và hiển thị ngay bên dưới tiêu đề trang web. Các menu phụ sidevà footerđược hiển thị trong tiện ích thanh bên và chân trang tương ứng. Để thêm trang vào menu, hãy thêm menu: <menu>tham số vào phần nội dung trang đầu:

menu: main # Add page to a main menu

Lưu ý: Đừng quên bật sidemenutiện ích trong widgetstham số cấu hình nếu bạn muốn sử dụng sidemenu.

Bạn cũng có thể thêm một trang vào nhiều menu bằng cách cung cấp danh sách:

# Add page to a main, side, and footer menu
menu:
  - main
  - side
  - footer

Lưu ý: Xin lưu ý rằng menu Duyệt không hỗ trợ các mục lồng nhau, tức là menu phụ.

Xem Menu từ tài liệu chính thức của Hugo để biết thêm thông tin.

Hỗ trợ Phông chữ Google tùy chỉnh​

Browse sử dụng Open Sans từ Google Fonts làm phông chữ chính. Nhưng bạn có thể sử dụng bất kỳ phông chữ nào khác từ Google Fonts nếu muốn. Hãy cẩn thận, trong hầu hết các trường hợp, những thay đổi như vậy yêu cầu điều chỉnh CSS thủ công vì mỗi bộ phông chữ đều khác nhau và có thể không đẹp bằng phông chữ mặc định của chúng tôi.

Thực hiện theo quy trình dưới đây.

  1. Mở Google Fonts, chọn phông chữ bạn thích và sao chép liên kết phông chữ href. Đối với ví dụ cụ thể này, chúng tôi chọn Roboto với 3 kiểu khác nhau . Liên kết phông chữ href của chúng tôi:

    https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&amp;display=swap

  2. Đặt googleFontsLinkgiá trị tham số cấu hình của trang web thành liên kết phông chữ href của bạn. Ví dụ:

    [Params]
      googleFontsLink = "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap"

  3. Ghi đè bộ font-family mặc định:

    [Params.style.vars]
      fontFamilyPrimary = "'Roboto', sans-serif"

Bạn có thể tắt Google Fonts và thay vào đó sử dụng ngăn xếp phông chữ hệ thống.

  1. Vô hiệu hóa Google Fonts include. Đặt googleFontsLinkgiá trị tham số cấu hình của trang web thành false:

    [Params]
      googleFontsLink = false

  2. Ghi đè bộ font-family:

    [Params.style.vars]
      # Override font-family sets. Take care of different quotes OR escaping symbols in these params if necessary
      fontFamilyPrimary = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
      # Secondary font-family set responsible for pre, code, kbd, and samp tags font
      fontFamilySecondary = "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"

Chỉnh sửa trang này trên GitHub

5:11:01 AM