rpgmakermv存档修改网站_NexT 网站配置——雏形初成
由 IIssNan 開發的 NexT 已經停止維護,我們采用的是社區維護版的 NexT v6 and v7,但原版的中文說明文檔是編得極好的,是重要的參考來源^1。
不過由于社區版的和原版已經產生了較大區別,還是更推薦看社區版的說明文檔^2。
本文一般是通過修改 主題配置文件 _config.yml來實現各種配置,這種情況下不需要重新渲染發布等操作,修改完后直接保存再刷新網頁即可看到效果。主題設置
Scheme 是 NexT提供的一種特性,借助于 Scheme,NexT為你提供多種不同的外觀。同時,幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT支持三種 Scheme,他們是:
- Muse→ 默認 Scheme,這是 NexT最初的版本,黑白主調,大量留白
- Mist→ Muse 的緊湊版本,整潔有序的單欄外觀
- Pisces→ 雙欄 Scheme,小家碧玉似的清新
- Gemini→ 看起來像Pisces,但是不同文章直接用塊隔開,看起來更舒服
個人比較推薦 Gemini ,其次Mist。
Scheme 的切換通過更改 主題配置文件,搜索 scheme 關鍵字。 你會看到有四行 scheme 的配置,將你需用啟用的 scheme 前面注釋 # 去除即可。
# Schemes #scheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini菜單設置
可以看到目前為止我們的主題菜單中只有兩個默認的選項Home和Archive,我們還可以添加tag、about、category等選項^3。
我們先在HexoBlogthemesnext下找到 主題配置文件 _config.yml中找到Menu Settings。
# --------------------------------------------------------------- # Menu Settings # ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives). # Usage: `Key: /link/ || icon` # Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive. # Value before `||` delimeter is the target link. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded. # External url should start with http:// or https:// menu:home: / || home#about: /about/ || user#tags: /tags/ || tags#categories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat# Enable / Disable menu icons / item badges. menu_settings:icons: truebadges: false閱讀注釋,我們可以知道Menu Settings中的Usage采用Key: /link/ || icon的格式。
Key是菜單項 (home, archives, etc.),我們可以通過HexoBlogthemesnextlanguages中的zh-CN.yml文件查看menu中是否有對應項的翻譯。
例如若該文件中有tags項,那么博客中對應處就會顯示對應翻譯標簽,若沒有則會采用原單詞tags,當然你也可以自行修改。
/link/在 || 之前,指網站中該菜單項的鏈接。icon 在 || 之后,指該菜單項的圖標,對應 Font Awesome 中圖標的名字。
而 icons: true可用于控制是否顯示圖標,你可以設置成 false 來去掉圖標。
而 badges就是顯示該菜單項內子類的數目。
添加標簽項
我們先把 tags 前的注釋符 # 刪了。
menu:home: / || home#about: /about/ || usertags: /tags/ || tags#categories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat然后創建一個tags頁面:在HexoBlog目錄下右鍵打開Git Bush,輸入hexo new page tags:
theigrams@Theigrams MINGW64 /c/D/Hexo/Blog $ hexo new page tags INFO Created: C:DHexoBlogsourcetagsindex.md這時候你的source/下會生成 tags/index.md 文件,我們將其打開,然后在最后面加上兩行:
type: "tags" comments: false這時候你要為你的文章打上標簽就可以在文章的頭部寫上:
tags:- Tag1- Tag2- Tag3添加分類和自我介紹
同上,先把 categories about 前的注釋符 # 刪了,然后創建頁面
hexo new page categories hexo new page about打開categories/index.md 和 about/index.md 文件,在最下面加上分別兩行:
type: "categories" comments: false type: "about" comments: false這時候你就可以給你的文章歸類存檔了,使用方式就是在你的文章的頭部加上:
categories:- 分類1設置預覽摘要
這個博客目前已經像模像樣了,但仍有一點不足,那就是首頁將文章所有的內容都顯示出來了。
這時候可以啟用預覽摘要模式,在主題配置文件 中找到auto_excerpt屬性,將false設置為true ,將length設置為想要預覽到的字數,如下圖所示:
# Automatically Excerpt (Not recommend). # Use <!-- more --> in the post to control excerpt accurately. auto_excerpt:enable: truelength: 300正如注釋所說,這樣的預覽效果不是很好,推薦的方法是自己選擇在要折疊處輸入^4
<!-- more -->這樣子就好看多了
設置側邊欄
設置側邊欄位置
可以通過修改 主題配置文件 中的 sidebar 字段來控制側欄的行為。
側欄的設置包括兩個部分,其一是側欄的位置 position, 其二是側欄顯示的時機 Display(但該選項對Gemini 樣式無效)^5
sidebar:# Sidebar Position, available values: left | right (only for Pisces | Gemini).position: left#position: right# Manual define the sidebar width. If commented, will be default for:# Muse | Mist: 320# Pisces | Gemini: 240#width: 300# Sidebar Display, available values (only for Muse | Mist):# - post expand on posts automatically. Default.# - always expand for all pages automatically.# - hide expand only when click on the sidebar toggle icon.# - remove totally remove sidebar including sidebar toggle.display: post# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false# Click any blank part of the page to close sidebar (only for Muse | Mist).dimmer: false設置側邊欄社交鏈接
搜索關鍵字 social,然后添加社交站點名稱與地址即可。
social:GitHub: https://github.com/Theigrams || githubE-Mail: mailto:15091060@buaa.edu.cn || envelope知乎: https://www.zhihu.com/people/zj_theigrams || quoraCSDN: https://blog.csdn.net/qq_36790747 || codiepie明明在Font Awesome上找到了知乎圖標,但不知道為啥就是在博客中加載不出來,
沒辦法就只好用 quora 的圖標來代替了。
同樣的,也沒找到 CSDN 的圖標,只好找了個相似的代替。
設置頭像
默認設置側邊欄是不顯示頭像的,不過我們可以編輯 主題配置文件 來添加頭像, 查找字段 avatar
# Sidebar Avatar avatar:# In theme directory (source/images): /images/avatar.gif# In site directory (source/uploads): /uploads/avatar.gif# You can also use other linking images.url: /images/head_img.gif# If true, the avatar would be dispalyed in circle.rounded: false# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.opacity: 1# If true, the avatar would be rotated with the cursor.rotated: false將照片存在目錄 HexoBlogthemesnextsourceimages下,然后取消 url的注釋,并在后面填入照片的路徑。
rounded選項決定照片框是圓還是方的。
opacity 調節頭像的不透明度。
rotated 設置鼠標移動到頭像上時是否旋轉。
顯示當前瀏覽進度
搜索關鍵字 scrollpercent ,把 false 改為 true,即可在右下角顯示瀏覽進度,并單擊可返回頂部。
back2top:enable: true# Back to top in sidebar.sidebar: false# Scroll percent label in b2t button.scrollpercent: true把 sidebar 改成 true 可以把該部分移到左邊目錄下。
設置代碼高亮主題
NexT使用 Tomorrow Theme 作為代碼高亮,共有5款主題供你選擇。
NexT默認使用的是 白色的 normal 主題,可選的值有 normal,night, night blue, night bright, night eighties:
# Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: night bright更改 highlight_theme 字段,將其值設定成你所喜愛的高亮主題。
添加背景動畫
搜索Canvas-nest 定位到這個位置,我們先把 enable: false 改成 enable: true
# Canvas-nest # Dependencies: https://github.com/theme-next/theme-next-canvas-nest canvas_nest:enable: trueonmobile: true # display on mobile or notcolor: "148,0,211" # RGB values, use ',' to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 150 # the number of lines然后點進第二行的Github鏈接,根據說明文檔安裝 canvas-nest.js。
- color: 線條顏色, 默認: '0,0,0' ;三個數字分別為(R,G,B),注意用,分割
- opacity: 線條透明度(0~1), 默認: 0.5
- count: 線條的總數量, 默認: 99
- zIndex: 背景的z-index屬性,css屬性用于控制所在層的位置, 默認: -1
之后刷新網頁應該就能看到效果。
我選擇的顏色是深紫羅蘭色,透明度還是調成 0.5 防止干擾正常閱讀博客。
參考網頁
[1] https://theme-next.iissnan.com/getting-started.html
[2] https://theme-next.org/docs/getting-started/
[3] 關于HEXO搭建個人博客的點點滴滴
[4] Hexo的Next主題詳細配置
[5] Hexo搭建的GitHub博客之優化
總結
以上是生活随笔為你收集整理的rpgmakermv存档修改网站_NexT 网站配置——雏形初成的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jquery.cookie中的操作之与换
- 下一篇: Bootstrap FileInput(