社区中心
注册
Advertisement
Emblem-notice
正在翻譯的頁面
本頁面尚未翻譯完成,歡迎使用者協助翻譯。更多正在翻譯的頁面

主題設計器是一個簡單易用的管理員工具,能讓您快速地自訂自己wiki的主題、頁首和標誌。您可以在建立wiki時從預設的主題中任選其一,或者設計適合自己社區內容的獨特主題(包括深淺色主題)。

步驟[]

  • 身為社區的管理員,您可以透過點擊右上角的「⋮」下拉式選單、右下角的「我的工具」選單或管理員面板中的「主題設計器」按鈕前往主題設計器。您還可以透過造訪自己wiki上的頁面Special:ThemeDesigner(特殊:主题设计器)前往主題設計器。
  • 其中,有三個用於自訂wiki的部分:
    • 社區形象:設定wiki名稱和社區圖片。
    • 頁首和背景:設定wiki的背景和本地導覽列的顏色。
    • 頁面樣式:設定頁面的背景、連結的顏色和標題的字型。
Mobile theme preview

您可以使用預覽窗口左上角的圖示在桌面端和行動端的預覽直接切換。

  • 所做的每個變更都會在預覽窗口中即刻顯示,所以您可以在儲存主題前查看其在桌面端和行動端上的外觀。您可以使用預覽窗口左上角相應的圖示在桌面端與行動端的預覽之間切換。
  • 管理員可以在自己的wiki上自訂深淺色主題,在主題設計器中透過相應的索引標籤存取其主題,還可以選擇任選其一作為社區的預設主題。「頁首和背景」和「頁面樣式」下的所有選項皆可按照相應的主題設定。切換索引標籤後,預覽也會變為顯示正在自訂的主題。

為了確保主題滿足可存取性要求,管理員將無法儲存有對比度低警告的主題選擇。更多有關資訊,請見下文

當您完成並滿足對比度要求時,點擊「儲存」,您的新主題將會立即呈現在使用者們的面前!

行動版主題[]

Mobile theme - theming switch

使用者可以輕易地在深淺色主題之間切換

現在,任何社區皆可啟用行動版主題。打開主題設計器後,管理員將在頂部看到一則「這個wiki尚未開通行動版主題。如要啟用行動版主題,請先解決所有顏色對比度的問題並儲存變更。」的橫幅通知。主題儲存後,會出現一個彈窗和橫幅通知,提示您將wiki主題套用至移動版網頁。一旦啟用行動版主題,將無法撤銷。

為實現桌面和移動端體驗一致的美感,在主題設計器中設置的背景、sticky nav、header,以及主題色、鏈接、文章背景色均會在桌面和移動端相同。選擇的背景圖像和標題字體也都會在桌面和移動端一致。

注意:並非所有主題設計器提供的選項都適用於行動版主題,並且使用CSS對桌面版主題所做的任何變更都不適用於行動版主題。

選擇的默認亮/暗主題也會成為移動端的對應默認主題。但是,像在桌面端一樣,每位用戶都想能夠基於個人經驗選擇他們自己喜歡的主題。一個人在移動端選擇的主題會適用到桌面端,反之亦然。有關亮/暗主題體驗的更多信息可以在這裡找到。

社區形象[]

這個部分能夠自定義社區名稱、標誌、圖示和站點圖片。這些設定皆適用於深淺色主題。

Theme designer
  • 社區名稱:您可以在標誌旁邊的標題看到社區名稱。注意:這並不會變更wiki的站點名稱
  • 社區標誌:社区标志是社区名称利用图像表现的另一种形式。用户可以通过单击任何页面上的社区标志进入其选择的wiki页面。
    • 標誌只能是后缀为.png的图片,最大尺大小為1MB,最大尺寸為500px×500px。
    • 標誌存储於File:Site-logo.png
    • 在置頂導覽列中使用:置顶导览列最左边的就是就是社区标志,向下滚动就可以看到
  • Favicon:Favicons是出现在浏览器顶部的小图标,常用于选项卡和书签中。
    • 圖示可以是后缀为.ico或.png的图片,尺寸必須在16×16px至256×256px之間。您可以參見此頁瞭解更多有關圖示的資訊。
    • 圖示存储於File:Site-favicon.ico
  • 社區站點圖片 这张图片将代表Fandom的社区,并出现在包括搜索和个人资料的各个地方。因此,我们建议使用高质量的图像,因为它将在不同的浏览器和设备上以不同大小显示。
    • 站點圖片可以是后缀为.png或.jpg的图片,推薦尺寸為650×450px,最小尺寸為200×200px,最大上傳大小為1MB。
    • 圖片存储於File:Site-community-image

頁首和背景[]

背景是内容区域之外的区域,出现在维基的所有页面上。它可以是纯色、图像或两者兼而有之。

Theme designer - header and background
  • 背景圖片: 如果您想要自己的wiki有個背景圖片,那就點擊這個區域上傳一個。支持的图片格式為.jpg、.png、.gif。最大上傳大小為1MB。
    • 帮助:背景 提供了更多有关为社区创建自定义背景图片的信息和建议。
    • 在上传区域下方有一个选项,可将所选背景图片作为页首图片显示在移动设备上。如果不勾选,则不会显示。当启用移动主题时,默认情况下不显示背景。
    • 圖片顯示: 控制图片是覆盖整个屏幕还是只覆盖文章上方的页首区域。背景可自定义为页首(建议为 2880 x 656px)或全屏(建议为 2880 x 2880px )。
    • 背景圖片樣式包含有關如何顯示圖片的各種顯示。
      • Cover: stretches the smaller dimension of the image as much as needed to fill the full screen (equivalent to CSS background-size:cover).
      • Tile: this repeats the background image across the page, with the options to do so horizontally, vertically, or both.
      • Fit: the image will be aligned to the selected area (top left, center, or top right), and the larger dimension of the image will be stretched to fit (equivalent to CSS background-size:contain).
    • Image opacity sets how see-through the background image is against the background color. The lower the percentage, the more transparent the image becomes, which is useful to allow for better contrast of elements. Alternatively, you can adjust the community header text color to achieve this.

以下的顏色選項將同時套用於桌面版主題和行動版主題:

  • 社區背景顏色:為wiki設定純背景色。
  • 置頂導覽列背景顏色:设置的置顶导航列的背景颜色,向下滚动后在屏幕顶部可见。文本颜色会自动确定为能形成对比的颜色。
  • 社區頁首顏色:設定社區頁首導覽列的文字顏色。 选择与背景图片和颜色有足够对比度的颜色,否则将无法保存您选择的主题。

頁面樣式[]

Theme designer - article styles

以下選項將同時套用於桌面版主題和行動版主題:

  • 標題字型:allows for changing the font family of headings within articles. The default is "Rubik", though other other options are "Work Sans", "Lora", "Roboto Slab", "BioRhyme", and "Inknut Antiqua".
  • 主題色:On desktop, the accent color is used on primary (filled) and secondary (outlined) buttons, the QuickBar, the comment counter on article/blog pages, 資訊框: the header, section header and border, and the vertical bar on site notices. On mobile, it's used on buttons, infobox borders, midlight (the color behind a text header/title), and on the toggle switcher.
  • 連結顏色:is the color of most links. Try to pick something that has good contrast with the article background, is distinct from normal text, and avoid red colors as red links denote missing pages.
  • 頁面背景顏色:is the background color of the main content area. The text color will be automatically determined for best contrast.
    • Changing this will also change the background color of menu dropdowns (such as the navigation and "Edit" button dropdowns).

主題歷史[]

Theme designer - history
  • 每次使用「儲存」按鈕儲存一個主題後,都會在這個清單中新增一個條目。深淺色主題各有一個這個清單。
  • 如果你 您可以查看或恢复到过去的版本。点击过去的版本,它就会出现在预览区。
  • 僅儲存最近的10個版本。 通过一次性完成所有更改来尽量减少保存次数,这样可以保持历史记录的信息量和可用性。

對比度警告[]

The intent is to provide enough contrast between text and its background so that it can be read by people with moderately low vision. To ensure compliance, the Theme Designer's "SAVE" button will be grayed out as long as contrast errors exist for one or more of the colors chosen on either of the themes, and an error highlighting the problem will be present. It is only after all contrast issues for light and dark theme are resolved that the error message near the SAVE button will disappear and allow you to save your changes.

Theme Designer - contrast errors

紅色突顯顯示了主題設計器中各個主題和各個顏色的對比度錯誤。

While errors are active, each affected color is highlighted by a red font and a red box around the chosen color. If the error is caused by color choices on the other theme, i.e. the light theme when you're looking at the dark theme or vice versa, a red box will be present around the theme tab to draw attention to it. The error message for each color is unique and explains why this is an issue. For each contrast error, three colors on the spectrum adjacent to the one chosen that do meet the minimum contrast ratio will be presented to give admins an easy way to resolve the issue. This popup will remain open while looking for a new color, and the error message will reappear if you switch the color to something that does not meet the contrast requirements. Once a good color solution is found, click outside the popup to make it disappear.

以下為所需的最低對比率(依據WCAG 2.x AA):

  • 連結顏色與頁面背景:4.5

If the problem lies with the link color on the chosen background color, you will read, "Links displayed in this color may be difficult to read. We recommend you pick another color that has better contrast with the background color."

  • 主題色與頁面背景顏色:3.0

Because the accent color defines the colors of various wiki elements, such as buttons, and is thus sometimes displayed over the article background color, a poor contrast choice can make this blend in with the background. Should this occur, the following error message will be displayed: "This color will display on the article background color and might be difficult to see. Please pick another color or select one of the recommended colors below."

  • 社區背景顏色與社區頁首顏色:4.5

When the community background color and community header color do not have sufficient color contrast, they can make the local nav unreadable. If there are issues with the contrast here, the error message will read, "Links and text on this (background) color will be difficult for some users to read. Please pick another color that has better contrast with the community header color/community background color or select one of the recommended colors below."

Note that when a background image is present, this error may seem insignificant, as the contrast errors do not take the colors of the background image into account for the suggested color fixes and any contrast issues are thus covered up by the image. However, there is the option to not have the background image on mobile, so if the image isn't used their, the contrast issues will be noticeable on the mobile view. In that case, please solve the contrast error while previewing mobile rather than desktop.

當無法以令人滿意的方式解決對比度問題時,請使用Zendesk表單聯絡Fandom職員或聯絡指派到您的社區的Fandom代表

進一步的閱讀[]

更多帮助和反馈[]

Advertisement