時間：2024-01-15 16:48:01 | 來源：網(wǎng)站運營
時間：2024-01-15 16:48:01 來源：網(wǎng)站運營
如何制作個人主頁？：
在線咨詢
themes/next/_config.yml打開主題配置文件，找到menu字段，更改為： menu: home: / || fa fa-home tags: /tags/ || fa fa-tags categories: /categories/ || fa fa-th archives: /archives/ || fa fa-archivetags為標(biāo)簽頁界面，以標(biāo)簽為分類基準(zhǔn)展示整個站點的文章；categories為歸類頁界面，以類別為分類基準(zhǔn)展示文章。tags: /tags/ || fa fa-tags中，/tags/為頁面的前端路由。fa為圖標(biāo)的標(biāo)簽屬性，用于統(tǒng)一化樣式。fa-tags為圖標(biāo)的名稱，next主題默認(rèn)使用的圖標(biāo)庫是 Font Awesome，如果想更換圖標(biāo)，只需要到該網(wǎng)站記下對應(yīng)圖標(biāo)的名稱，然后在配置文件中替換即可。OK，設(shè)置好后進入終端，鍵入： hexo new page "categories" hexo new page "tags"此時，我們已經(jīng)新建了兩個頁面，在themes/sources文件夾下可以看到這兩個同名文件夾，每個文件夾下都有一個index.md文件。我們分別打開，進行修改： # tags/index.md --- title: 我是選擇標(biāo)簽的頁面 date: 2022-04-14 10:58:17 type: "tags" # 設(shè)置頁面類型 comments: false --- # categories/index.md --- title: 我是選擇類別的頁面 date: 2022-04-14 12:13:13 type: "categories" comments: false ---yaml語法的框架了，不知道或者想回顧yaml語法的話移步：開發(fā)者必須要掌握的 YAML 知識點。將其修改為： --- title: 張三的自我救贖 date: 2022-04-24 10:25:34 categories: - 隨筆 tags: - 張三 - 筆記 keywords: - 張三 - 救贖 description: "這是張三的自我救贖。" ---title是文章的標(biāo)題；date是文章的創(chuàng)建時間；categories是一個數(shù)組，[隨筆]表示該文章的類別是隨筆，[隨筆, 子隨筆]表示該文章的類別是隨筆下的子類別子隨筆；tags數(shù)組中是要添加的標(biāo)簽；keywords數(shù)組中是文章關(guān)鍵詞；description是文章的描述，在主頁中會顯示成摘要。接著走一波hexo clean; hexo g; hexo s就可以在tags和categories頁面找到這篇文章啦。themes/next/source/css/_common/post/post.styl路徑，找到.use-motion選擇器，在if(hexo-config('motion.transition.post_block'))后面進行修改，添加上.post-block： .use-motion { if (hexo-config('motion.transition.post_block')) { .post-block, .pagination, .comments { opacity: 0; } .post-block { margin-top: 0px; margin-bottom: 20px; padding: 25px; background:rgba(255,255,255,0.9) none repeat scroll !important; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); } }themes/next/_config.yml，修改主題配置文件的tag_icon字段： tag_icon: true這將用圖標(biāo)，替換標(biāo)簽的#。themes/next/source/css/_common/components/post/post.styl，找到.post-body p a選擇器，將其替換為： .post-body p a{ color: #330099; border-bottom: none; border-bottom: 1px solid #330099; &:hover { color: #FF8C00; border-bottom: none; border-bottom: 1px solid #FF8C00; } }themes/next/_config.yml，修改主題配置文件的codeblock字段： codeblock: # Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic # See: https://github.com/chriskempson/tomorrow-theme highlight_theme: night bright # Add copy button on codeblock copy_button: enable: true # Show text copy result. show_result: false # Available values: default | flat | mac style: maccodeblock字段會更改代碼塊的主題樣式，感興趣的同學(xué)不妨都嘗試一下，找到自己喜歡的風(fēng)格。themes/next/_config.yml，修改主題配置文件的custom_file_path字段，將style的注釋取消： # Define custom file paths. # Create your custom files in site directory `source/_data` and uncomment needed files below. custom_file_path: style: source/_data/styles.styl在blog/source下新建一個_data文件夾，文件夾中新建一個styles.styl文件（不用VScode的同學(xué)，可以新建一個styles.txt，再更改它的后綴）。在上面編輯以下代碼： code { color: #ff7600; background: #fbf7f8; margin: 2px; } .highlight, pre { margin: 5px 0; padding: 5px; } .highlight, code, pre { border: 1px solid #d6d6d6; }themes/next/_config.yml，修改主題配置文件的mediumzoom字段： mediumzoom: true注意，fancybox和mediumzoom是沖突的，所以保存fancybox: false就好。themes/next/_config.yml，修改主題配置文件的toc字段： toc: enable: true # Automatically add list number to toc. number: false # If true, all words will placed on next lines if header width longer then sidebar width. wrap: false # If true, all level of TOC in a post will be displayed, rather than the activated part of it. expand_all: true # Maximum heading depth of generated toc. max_depth: 6themes/next/layout/_macro，新建一個名為passage-end-tag.swig的文件，鍵入以下代碼： <div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">~~~~~~~~~~~~~~ 本文結(jié)束 <i class="fa fa-paw"></i> 感謝您的閱讀 ~~~~~~~~~~~~~~</div> {% endif %} </div>然后進入路徑themes/next/layout/_macro/post.swig，找到{### END POST BODY} ###。在它的后面鍵入以下代碼： {% if not is_index and theme.passage_end_tag.enabled %} <div> {% include 'passage-end-tag.swig' %} </div> {% endif %}如下圖所示：themes/next/_config.yml，在主題配置文件的末尾添加passage_end_tag字段： # 文章末尾添加結(jié)束標(biāo)記 passage_end_tag: enabled: truethemes/next/_config.yml，修改主題配置文件的creative_commons字段： creative_commons: license: by-nc-sa sidebar: false post: true language: deed.zhthemes/next/_config.yml，修改主題配置文件的reward_settings、reward字段： reward_settings: # If true, reward will be displayed in every article by default. enable: true animation: false comment: 在線要飯 ~~ ? reward: wechatpay: /images/wechatpay.png alipay: /images/alipay.png然后，進入themes/next/source/images路徑，將你的收款二維碼放在里面。關(guān)鍵詞：
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
