能在家做的兼职的网站,个人云平台,网站降权查询工具,网站内容的排版布局前言
上次介绍了使用 HexoGitHub Pages#xff0c;零成本搭建一个专属自己的独立博客网站。我觉得那篇文章是没有入门门槛的#xff0c;不管你是什么行业#xff0c;只要想打造个人 IP#xff0c;又不太想受博客平台约束#xff0c;那么读完后动手操作一下也能轻松完成。…前言
上次介绍了使用 HexoGitHub Pages零成本搭建一个专属自己的独立博客网站。我觉得那篇文章是没有入门门槛的不管你是什么行业只要想打造个人 IP又不太想受博客平台约束那么读完后动手操作一下也能轻松完成。而这次呢上篇也说了 Hexo 会出三篇内容这里就要在前者基础上做进一步升级将完成下面七个主要的博客常用功能。
指标
Hexo 如何安装 Butterfly 主题并配置Hexo 如何创建页面和添加文章Hexo 如何添加第三方评论系统Butterfly 主题如何添加站内搜索Butterfly 主题如何添加百度统计Butterfly 主题如何添加文章置顶功能Butterfly 主题如何配置 RSS 和 404 页面如何配合 Typora 完成 md 的同步与本地备份
主题添加与配置
Hexo 官网专门有一个栏目的主题列表这里我选的 “butterfly”首先拉取主题代码到 themes 目录下然后在 Hexo 的配置中启动主题。
拉取主题包
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly启动主题
theme: butterfly基础配置
基础配置主要是设置网站的标题、描述、SEO、菜单等项下面我就列出 hexo 的 config根目录下_config.yml和主题 Butterfly 的 configthemes 的 Butterfly 下_config.yml并注释相关项的简介仅供参考。
hexo_config.yml
title: ZERO开发 #网站标题
subtitle: 一个独立开发者的博客 #网站副标题
description: 公众号ZERO开发 #网站描述
keywords: 技术博客、独立开发者、PHP开发、Pthon开发、人工智能、物联网、游戏开发
author: 北桥苏 #您的名字
language: zh-CN #网站使用的语言
timezone: #网站时区。Hexo 默认使用您电脑的时区# URL 网址
## 如果您的网站存放在子目录中
## 例如 http://yoursite.com/blog则请将您的 url
## 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://z11r00.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:# Directory 目录配置
source_dir: source #源文件夹这个文件夹用来存放内容。
public_dir: public #公共文件夹这个文件夹用于存放生成的站点文件。
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #nclude code 文件夹
i18n_dir: :lang #国际化i18n文件夹
skip_render: #跳过指定文件的渲染您可使用 glob 表达式来匹配路径。# Writing 文章
new_post_name: :title.md # 新建文章默认文件名
default_layout: post # 默认布局
titlecase: false # Transform title into titlecase
external_link: true # 在新标签中打开一个外部链接默认为true
filename_case: 0 #转换文件名1代表小写2代表大写默认为0意思就是创建文章的时候是否自动帮你转换文件名默认就行意义不大。
render_drafts: false #是否渲染_drafts目录下的文章默认为false
post_asset_folder: false #启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址默认false
future: true #显示未来的文章默认false
syntax_highlighter: highlight.js
highlight: #代码块的设置enable: trueline_number: trueauto_detect: falsetab_replace:
prismjs:preprocess: trueline_number: truetab_replace: # Category Tag 分类和标签的设置
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名# 全局日期格式化
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: mtime
pagination_dir: page #分页目录## 插件index用于显示分页和排序配置
index_generator:path: per_page: 5 # 0.关闭分页功能 0.每页条数order_by:top: -1 # 置顶排序 -1.倒序 1.正序date: -1 # 日期排序 -1.倒序 1.正序# 主题启动配置
theme: butterfly# Deployment github部署配置
deploy:type: gitrepository: https://github.com/z11r00/z11r00.github.iobranch: main##hexo-generator-search搜索插件配置
search:path: search.xmlfield: postformat: htmllimit: 10000## rss配置
feed:type: atompath: atom.xmllimit: 20## rss位置
rss: /atom.xmlhexo_butterfly_config.yml
nav:logo: /img/logo.png # 导航栏左侧LOGOdisplay_title: truefixed: true # 是否置顶导航栏## 菜单图标配置
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:Music: /music/ || fas fa-musicMovie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart# Menu 菜单跳转配置
menu:首页: / || fas fa-home时间轴: /archives/ || fas fa-archive标签: /tags/ || fas fa-tags分类: /categories/ || fas fa-folder-open#清单||fa fa-heartbeat:#音乐: /music/ || fas fa-music#照片: /Gallery/ || fas fa-images#电影: /movies/ || fas fa-video友链: /link/ || fas fa-link关于: /about/ || fas fa-heart# Code Blocks (代碼相關)
# --------------------------------------
highlight_theme: light # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false # 代码是否自动换行# Social Settings (社交圖標設置)
social:fab fa-github: https://github.com/z11r00 || Github || #24292efas fa-envelope: 2652364582qq.com || Email || #4a7dbefas fa-rss: /atom.xml || RSS# Image (圖片設置)
# --------------------------------------# Favicon網站圖標
favicon: /img/favicon.png# Avatar (頭像)
avatar:img: /img/avatar.pngeffect: false# 是否禁用所有跳转页的顶部图片
disable_top_img: true# 首页图
index_img: /img/index_img.jpg# 所有页面的默认顶部图
default_top_img: /img/default_top_img.jpeg# 归档时间线页面顶部图
archive_img: /img/archive_img.jpg# 标签页面顶部图
tag_img:# The banner image of tag page
# format:
# - tag name: xxxxx
tag_per_img:# 分类页面顶部图
category_img:# The banner image of category page
# format:
# - category name: xxxxx
category_per_img:## 封面配置
cover:# display the cover or not (是否顯示文章封面)index_enable: trueaside_enable: truearchives_enable: true# the position of cover in home page (封面顯示的位置)# left/right/bothposition: both(當沒有設置cover時默認的封面顯示)default_cover:- https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg# Replace Broken Images (替換無法顯示的圖片)
error_img:flink: /img/friend_404.gifpost_page: /img/404.jpg# 404 页面配置
error_404:enable: truesubtitle: Page Not Foundbackground: /img/404.jpg## 文章配置
post_meta:page: # Home Pagedate_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示date_format: date # date/relative 顯示日期還是相對日期categories: true # true or false 主頁是否顯示分類tags: false # true or false 主頁是否顯示標籤label: true # true or false 顯示描述性文字post:date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示date_format: date # date/relative 顯示日期還是相對日期categories: true # true or false 文章頁是否顯示分類tags: true # true or false 文章頁是否顯示標籤label: true # true or false 顯示描述性文字# 锚点配置
anchor:# when you scroll, the URL will update according to header id.auto_update: false# Click the headline to scroll and update the anchorclick_to_scroll: false# figcaption (圖片描述文字)
photofigcaption: false# 复制功能的配置
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:enable: true # 是否开启网站复制权限copyright:enable: false # 是否开启复制版权信息添加limit_count: 50 # 字数限制当复制文字大于这个字数限制时将在复制的内容后面加上版权信息# Post
# --------------------------------------# toc (文章的目錄配置)
toc:post: truepage: falsenumber: trueexpand: falsestyle_simple: false scroll_percent: true# 文章版权设置
post_copyright:enable: truedecode: falseauthor_href:license: CC BY-NC-SA 4.0license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/# Sponsor/reward 文章打赏
reward:enable: truetext: 打赏一下~QR_code:- img: /img/qrcode/wechat_trade.jpglink:text: 微信- img: /img/qrcode/alipay_trade.jpglink:text: 支付宝# 文章编辑器配置
# Easily browse and edit blog source code online.
post_edit:enable: false# url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/# For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/url:# 文章推荐配置
related_post:enable: truelimit: 6 # Number of posts displayeddate_type: created # or created or updated 文章日期顯示創建日或者更新日# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The next post will link to old post
# 2: The next post will link to new post
# false: disable pagination
post_pagination: 1# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:enable: falsestyle: flat # style: simple/flatlimit_day: 500 # When will it be shownposition: top # position: top/bottommessage_prev: It has beenmessage_next: days since the last update, the content of the article may be outdated.# Footer Settings页尾设置
# --------------------------------------
footer:owner:enable: truesince: 2017custom_text: Copyright© ZERO开发-独立开发者的日常总结br/a hrefhttps://beian.miit.gov.cn/ target_blank赣ICP备16002525号-1/a# copyright: true # Copyright of theme and frameworkcopyright: false# aside (側邊欄)
# --------------------------------------aside:enable: truehide: falsebutton: truemobile: true # display on mobileposition: left # left or rightdisplay:archive: truetag: truecategory: truecard_author:enable: truedescription:button:enable: trueicon: fas fa-videotext: 关注我link: https://space.bilibili.com/286666708/card_announcement:enable: truecontent: 微信公众号ZERO开发致力于为猿友们提供有价值的内容card_recent_post:enable: truelimit: 5 # if set 0 will show allsort: date # date or updatedsort_order: # Dont modify the setting unless you know how it workscard_categories:enable: truelimit: 8 # if set 0 will show allexpand: none # none/true/falsesort_order: # Dont modify the setting unless you know how it workscard_tags:enable: truelimit: 40 # if set 0 will show allcolor: falseorderby: random # Order of tags, random/name/lengthorder: 1 # Sort of order. 1, asc for ascending; -1, desc for descendingsort_order: # Dont modify the setting unless you know how it workscard_archives:enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show allsort_order: # Dont modify the setting unless you know how it workscard_webinfo:enable: truepost_count: truelast_push_date: truesort_order: # Dont modify the setting unless you know how it workscard_post_series:enable: trueseries_title: false # The title shows the series nameorderBy: date # Order by title or dateorder: -1 # Sort of order. 1, asc for ascending; -1, desc for descending# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:site_uv: truesite_pv: truepage_pv: true# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:enable: falsepublish_date:# Aside widget - 最新评论
newest_comments:enable: truesort_order: # Dont modify the setting unless you know how it workslimit: 6storage: 10 # unit: mins, save data to localStorageavatar: true# Bottom right button (右下角按鈕)
# --------------------------------------# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:enable: false# The text of a buttondefault: 繁# the language of website (1 - Traditional Chinese/ 2 - Simplified ChinesedefaultEncoding: 2# Time delaytranslateDelay: 0# The text of the button when the language is Simplified ChinesemsgToTraditionalChinese: 繁# The text of the button when the language is Traditional ChinesemsgToSimplifiedChinese: 簡# Read Mode (閲讀模式)
readmode: true# Local search (hexo-generator-search创建搜索)
local_search:enable: true# Preload the search data when the page loads.preload: false# Show top n results per article, show all results by setting to -1top_n_per_article: 1# Unescape html strings to the readable one.unescape: falseCDN:# Docsearch
docsearch:enable: falseappId:apiKey:indexName:option:# Share System (分享)
# --------------------------------------
# Share.js
# https://github.com/overtrue/share.js
sharejs:enable: truesites: weibo,wechat,qq,facebook,twitter# AddToAny
# https://www.addtoany.com/
addtoany:enable: falseitem: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link# Comments System 评论系统
# --------------------------------------
# 评论配置
comments:# Up to two comments system, the first will be shown as default# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalkuse: gitalk # Valine,Disqustext: true # Display the comment name next to the button# lazyload: The comment system will be load when comment element enters the browsers viewport.# If you set it to true, the comment count will be invalidlazyload: truecount: false # Display comment count in posts top_imgcard_post_count: false # Display comment count in Home Page# disqus
# https://disqus.com/
disqus:shortname:apikey: # For newest comments widget# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統可以實現在網路審查地區載入 Disqus 評論列表兼容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:shortname:apikey:option:# livere (來必力)
# https://www.livere.com/
livere:uid:# gitalk
# https://github.com/gitalk/gitalk
gitalk:client_id: Ov23…………1C6fMclient_secret: 4304…………44433f77352repo: z11r00.github.ioowner: z11r00admin: z11r00option:# Analysis 第三方统计配置
# --------------------------------------# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics: 74270…………………………………………# Advertisement
# --------------------------------------# Google Adsense (谷歌廣告)
google_adsense:enable: falseauto_ads: truejs: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.jsclient:enable_page_level_ads: true# Verification (站長驗證)
# --------------------------------------site_verification:# - name: google-site-verification# content: xxxxxx# - name: baidu-site-verification# content: xxxxxxx创建菜单页面
页面包括标签页tags、分类页categories、友链页link、关于页about当然也可以自行添加比如音乐电影之类。不过添加这种页面方式都大同小异以下以标签页举例。
运行命令
hexo new page tags编辑 MD
运行命令后会在 source 下根据 butterfly 模板生成对应的 md 文件tags 就是 tags不过要将 md 文件的 type 修改为对应的类型类型见上。
title: 标签页
date: 2024-05-02 21:01:24
type: tagsPage页面front-matter
title: 页面名称
date: 创建日期
type: tags,link,categories这三个页面需要配置
comments: (是否需要显示评论默认true)
description: 用于SEO优化
top_img: (设置顶部图)
mathjax: (数学公式显示是否支持)
katex: (Tex公式显示是否支持)创建文章
写文章可以通过命令创建也可以在 source/_posts 目录下自行新建 markedown 文件因为命令也是在_posts 文件夹下新建。
运行命令
hexo new 文章的大标题Post文章front-matter
title: CentOS7下Tomcat启动慢的原因及解决方案
date: 2017-12-02 21:01:24
description文章描述用于做SEO优化的
keywords: 文章SEO关键词
top_img: 文章顶部图
cover: 文章缩略图封面图
toc: true (是否显示文章目录)
toc_number: true (是否显示文章目录的标识数字)
copyright: true (是否显示版权)
mathjax: (数学公式显示是否支持)
katex: (Tex公式显示是否支持)
hide: false (是否隐藏当前文章)
comments: true #是否可评论
toc: true #是否显示文章目录
categories: 云服务器 #分类
tags: #标签- centOS- tomcat站内搜索添加
站内搜索我是采用的 hexo-generator-search 插件解决方案安装完插件然后配置一下最后用 hexo 清理再生成一下全站静态同时在根目录也会生成一个 search.xml用于做字符串模糊匹配的。
插件安装
npm install hexo-generator-search --save添加或配置
-confighexo配置search:path: search.xmlfield: postformat: htmllimit: 10000-butterfly-configbutterfly主题配置local_search:enable: truepreload: falseCDN:清理与生成
hexo clean hexo g评论系统添加
第三方评论系统我这里使用的是 Gitalk Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。使用 GitHub 登陆能支持多国语言至于他的原理其他博主有介绍。这里就不展开了如果有时间以后可能会整体介绍一下常用的第三方评论系统因为我还是希望评论能支持多种方式登陆的目前没有找到合适的就先选择 Gitalk。
注册应用账号 获取参数
注册成功后拿到 “Client ID” 和 “Client secrets”点击生成再复制其中注意的是 Homepage URL 要设置为 用户名.github.io 精确到 https 的地址。Authorization callback URL 填写注册的域名如果绑定了个性化域名就填自己的域名也是要精确到 https 的位置。 修改 Butterfly 配置
打开 butterfly 主题的配置文件第一个找到 “gitalk” 项将上面复制的 client id 和 client secrets 粘贴。
第二个找到 “comments”将 use 配置为 gitalk当然也可以用 valine、Disqus 之类的第三方评论系统。
comments:use: # 使用的第三方评论系统名称text: true # 是否在按钮旁显示评论名称# If you set it to true, the comment count will be invalidlazyload: false # 是否设置评论窗为懒加载count: true # 是否设置评论数统计card_post_count: true # 是否将评论数显示到首页gitalk:client_id: # github应用IDclient_secret: # github应用密钥repo: 用户名.github.ioowner: 用户名admin: 用户名博客仓库设置
进入仓库点击 “Settings”找到 “Features” 将 “Issues” 勾选。 文章置顶功能添加
打开 hexo 配置文件 _config.yml如果前面有 per_page 的关闭使用的是 hexo-generator-index 插件排序可以自定义序号和日期排序。
如何要置顶文章只需在文章 md 的 front-matter 里添加一个 top 参数数值自定。文章列表会出现一个钉子图标要看到效果则要 hexo 先清理再生成。
添加配置
index_generator:path: per_page: 5 # 每页条数order_by: top: -1 # 置顶 -1.倒序 1.顺序date: -1 # 日期 -1.倒序 1.顺序md 文章设置 清理与生成
hexo clean hexo gRSS 配置
对于 RSS 输出功能需要安装 hexo-generator-feed 插件。最后使用 hexo 清理再生成博客根目录就会生成 atom.xml
插件安装
npm install hexo-generator-feed --save添加配置
feed:type: atompath: atom.xmllimit: 20设置 RSS 地址
rss: /atom.xml设置 404 页面
在 hexo 的_config.yml 找到或添加 error_404设置开启分别添加标题和背景图。
error_404:enable: truesubtitle: Page Not Foundbackground: /img/404.jpg添加百度统计
先登陆或注册百度统计平台找到 “使用设置” - “代码获取” - “新版统计代码获取”然后会看到一段 js 代码只需要复制如下的一个 32 位长度的字符串。最后将该字符串粘贴到 butterfly 的 config.yml 中的 baidu_analytics 中部署后一天就可以在后台查看统计报表了。 MarketDown 用法
关于新建的文章我希望本地能备份一份有 md 文件和图片方便上传到其他平台博客。那要怎么做呢这里我用一个免费的 md 工具 ——Typora 为例。
创建文件和文件夹
创建一个以文章标题的文件夹里面再分别创建一 img 文件夹和同文章标题的 md 文件img 下再创建一个与文章标题同名的文件夹。 Typora 设置
依次找到 “文件” - “偏好设置” - 图像 , 将插入图片时的下拉选中 “复制到指定路径”填入下面的值。
./img/${filename}/第二步找到 “格式” - 图像 - “设置图片根目录”选择 markdown 文件同级的目录最后复制图片时就会复制到 img 下的文章同名目录下。 为什么要这样设置因为 Hexo 的图片在打包前都是在主题包 /source/img 里而为了方便本地能按文章存储也方便将本地的文章图片直接丢到 img 下然后 md 文件放到_post 中。打包之后就能以仓库图片展示而且按文章分类存储以后删除起来也一目了然。 写在最后
这次的优化看起来好像是面面俱到了但其实关于 Hexo 主题还有更细节的处理。比如可以添加博客看板精灵酷炫的动态大背景还有鼠标跟随或点击特效等等。但是我这博客目前定位主要以内容为主所以暂时就就演示了当然如果有用户喜欢也可以马上加上去的。
最后呢就是三部曲的第二篇结束了那下次就自然地要开始进入 Hexo 章最后一篇。现在是计划介绍一下怎么让博客被各大搜索引擎收录以及一些推广心得等等。具体的详细内容未定更新时间也还不知道因为在等我那个小游戏的软著下来下来后我一定要好好写一篇软著申请避坑的文章可实在是太难等了
