摘要:在根目錄配置文件中有一個設(shè)置希望設(shè)置為就是這個原因是設(shè)置后當(dāng)你新建一個頁面后自動生成一個同名文件夾方便管理。
前言
前面的文章已經(jīng)能讓大家搭建起自己的博客,并通過網(wǎng)絡(luò)訪問了,通過基礎(chǔ)的發(fā)布文章和編輯既可以實(shí)現(xiàn)博客的運(yùn)作了,其他的一些包括分頁和標(biāo)簽、分類等都不用自己來操作實(shí)現(xiàn),只要通過命令hexo g就可以了,如果大家看過了next主題的官網(wǎng)中介紹的配置,我會幫助大家對其中描述不清的地方進(jìn)行講解。
當(dāng)你前面的做好了后,現(xiàn)在還需要建立三個頁面:分類頁categories、標(biāo)簽頁tags、關(guān)于頁about,以及一個html頁面放到根目錄source下,才能完善博客基本的內(nèi)容。
在根目錄配置文件中有一個設(shè)置希望設(shè)置為true
# Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: true ##就是這個
原因是設(shè)置后當(dāng)你新建一個頁面后自動生成一個同名文件夾方便管理。
hexo new page categories hexo new page tags hexo new page about
tags里index.md設(shè)置
--- title: 標(biāo)簽 date: 2017-03-01 19:31:10 type: "tags" ---
categories里index.md設(shè)置
--- title: categories date: 2017-03-01 19:42:08 type: "categories" ---
主題目錄下的配置文件設(shè)置如下
menu: home: / categories: /categories about: /about archives: /archives tags: /tags commonweal: /404.html
一個文章應(yīng)該包含以下屬性在頂部
--- date: 2017-03-07 title: xxxxxxxxx tags: xxxx #如果不想加入標(biāo)簽可以為空 categories: xxxxx #如果不想加入分類可以為空 ---添加Fork me on GitHub
去網(wǎng)址https://github.com/blog/273-g... 挑選自己喜歡的樣式,并復(fù)制代碼,添加到themesnextlayout_layout.swig的body標(biāo)簽之內(nèi)即可
記得把里面的url換成自己的!
修改themesnextsourcecss_commoncomponentssidebarsidebar-author.styl:
.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: site-author-image-border-color; /* start*/ border-radius: 50% webkit-transition: 1.4s all; moz-transition: 1.4s all; ms-transition: 1.4s all; transition: 1.4s all; /* end */ } /* start */ .site-author-image:hover { background-color: #55DAE1; webkit-transform: rotate(360deg) scale(1.1); moz-transform: rotate(360deg) scale(1.1); ms-transform: rotate(360deg) scale(1.1); transform: rotate(360deg) scale(1.1); } /* end */添加音樂
去往網(wǎng)易云音樂搜索喜歡的音樂,點(diǎn)擊生成外鏈播放器,復(fù)制代碼直接放到博文末尾即可,height設(shè)為0可隱藏播放器,但仍然可以播放音樂,auto設(shè)成0可手動播放,默認(rèn)是1自動播放,可把代碼放到themes/next/layout/_custom/sidebar.swig文件里,播放器會顯示在站點(diǎn)預(yù)覽中
實(shí)現(xiàn)文章標(biāo)題欄顯示更多的文章信息 hexo-wordcount實(shí)現(xiàn)這個是官方文檔上沒有提及的所以我來說下,可以讓你的文章標(biāo)題位置更加富含信息,本插件可以為文章標(biāo)題位置添加,文章字?jǐn)?shù),文章預(yù)計閱讀時間。
安裝WORDCOUNT執(zhí)行命令
npm install hexo-wordcount --save主要功能
字?jǐn)?shù)統(tǒng)計:WordCount
閱讀時長預(yù)計:Min2Read
總字?jǐn)?shù)統(tǒng)計: TotalCount
模板位置:themesnextlayout_macropost.swig
{% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}{% if theme.post_wordcount.wordcount %} {{ wordcount(post.content) }} 字 ##我在這里加了一個單位上去 {% endif %} {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %} {% endif %} {% if theme.post_wordcount.min2read %} {% if theme.post_wordcount.item_text %} {% endif %} {{ min2read(post.content) }} 分鐘 ##我在這里加了一個單位上去 {% endif %}{% endif %} {% if theme.post_wordcount.item_text %} {% endif %}
因?yàn)橐呀?jīng)寫好了代碼,所以大家不用更改什么,只需要按自己需求來修改一些地方,我還對圖標(biāo)進(jìn)行了修改在FontAwesome官網(wǎng)上找到一些圖標(biāo)替換了標(biāo)簽里對應(yīng)的class值來實(shí)現(xiàn)目的。因?yàn)閔exo默認(rèn)引入了這個字體圖標(biāo)庫,涉及到圖標(biāo)的地方都可以自行來更改。
其他主題配置另外評論系統(tǒng)推薦用多說,數(shù)據(jù)統(tǒng)計用不蒜子統(tǒng)計,搜索系統(tǒng)用local search,內(nèi)容分享用多說分享,配置起來最簡單好用。
next主題的官網(wǎng)文檔上寫了相關(guān)配置的設(shè)置方法都是在配置文件里進(jìn)行值的設(shè)定,操作起來很簡單,我就不重復(fù)講了,如有其他問題歡迎提問,后面我會講如何來自定義CSS樣式和更改里面的一些設(shè)置。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/111775.html
摘要:在根目錄配置文件中有一個設(shè)置希望設(shè)置為就是這個原因是設(shè)置后當(dāng)你新建一個頁面后自動生成一個同名文件夾方便管理。 showImg(https://segmentfault.com/img/remote/1460000008738195?w=1436&h=527); 前言 前面的文章已經(jīng)能讓大家搭建起自己的博客,并通過網(wǎng)絡(luò)訪問了,通過基礎(chǔ)的發(fā)布文章和編輯既可以實(shí)現(xiàn)博客的運(yùn)作了,其他的一些包括...
摘要:前言搭建此博客是因?yàn)橥ㄟ^上了解到進(jìn)而知道了可以把靜態(tài)網(wǎng)頁博客托管給倉庫或許您已經(jīng)通搭建個人博客網(wǎng)站了解到如何通過實(shí)現(xiàn)個人博客網(wǎng)站的建立。但是盡管您已經(jīng)成功建立博客網(wǎng)站,但是你需要對網(wǎng)站做合適的配置和調(diào)整才能迎合你的網(wǎng)站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...
摘要:前言搭建此博客是因?yàn)橥ㄟ^上了解到進(jìn)而知道了可以把靜態(tài)網(wǎng)頁博客托管給倉庫或許您已經(jīng)通搭建個人博客網(wǎng)站了解到如何通過實(shí)現(xiàn)個人博客網(wǎng)站的建立。但是盡管您已經(jīng)成功建立博客網(wǎng)站,但是你需要對網(wǎng)站做合適的配置和調(diào)整才能迎合你的網(wǎng)站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...
摘要:前言搭建此博客是因?yàn)橥ㄟ^上了解到進(jìn)而知道了可以把靜態(tài)網(wǎng)頁博客托管給倉庫或許您已經(jīng)通搭建個人博客網(wǎng)站了解到如何通過實(shí)現(xiàn)個人博客網(wǎng)站的建立。但是盡管您已經(jīng)成功建立博客網(wǎng)站,但是你需要對網(wǎng)站做合適的配置和調(diào)整才能迎合你的網(wǎng)站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...
摘要:添加你修改的代碼找到你主題文件夾里的對應(yīng)位置以我的路徑為例子里面有個文件夾和一個文件,主要用于打包代碼輸出成樣式的文件分析下其源代碼。注意本人不提倡去修改除了下的其他個文件里的源代碼,可能后面出問題不好還原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言 之前答應(yīng)一個評論朋...
閱讀 430·2024-11-07 18:25
閱讀 130684·2024-02-01 10:43
閱讀 923·2024-01-31 14:58
閱讀 893·2024-01-31 14:54
閱讀 82949·2024-01-29 17:11
閱讀 3225·2024-01-25 14:55
閱讀 2036·2023-06-02 13:36
閱讀 3133·2023-05-23 10:26