https://onedayxyy.cn/2023/10/17/2023.10.17-%E6%89%93%E9%80%A0%E4%B8%80%E4%B8%AA%E5%BC%80%E7%AE%B1%E5%8D%B3%E7%94%A8%E7%9A%84%E8%B6%85%E7%BA%A7%E4%B8%9D%E6%BB%91%E7%9A%84%E6%BC%82%E4%BA%AEhexo%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/
文章来源:
感谢大佬开源的这么优秀的博客主题!
大佬:http://blinkfox.com/
English Document | 国内访问示例 (http://blinkfox.com) | Github 部署演示示例 (https://blinkfox.github.io) | QQ 交流群1(已满): 926552981
| QQ 交流群2(推荐): 971887688
这是一个采用
Material Design
和响应式设计的 Hexo 博客主题。
https://onedayxyy.cn/
Banner
图片24
张漂亮的图片代替)MathJax
TOC
目录Gitalk
)Google Analytics
)和文章字数统计等功能emoji
表情,用markdown emoji
语法书写直接生成对应的能跳跃的表情。参见 CHANGELOG.md
hexo-prism-plugin
插件的依赖,可直接使用自带的 prismjs
插件;Artitalk
等评论或说说功能;kbd
样式;miniValine
中的一些配置;Gitee
);MiniValine
评论系统;jsdelivr
的支持;keywords
的功能;false
;description
的 meta 属性优先读取文章的 summary
属性;div
改成了 h1
标题;setTimeout
代码;emoji
的支持;Twitter
、Facebook
、知乎的社交链接;Valine
的版本为最新版;summary
不显示的问题;TOC
展开、收缩的按钮和相关配置,默认显示此按钮;1.0.0
,重构和修改了升级过程中的部分文件或问题;css
、js
的文件请求路径在主题的_config.yml
中配置,便于你更快捷的配置自己的 CDN;TOC
功能,并新增为某篇文章关闭 TOC
的 Front-matter
配置选项;IOS
下移除搜索框自动获得焦点属性,防止自动获得焦点后导致视图上移;v2.0.0-hexo-theme-matery-2023.10.18 -m “功能基本满足博客需求,使用体验极度丝滑”
v2.0.0-hexo-theme-matery-2023.10.18 -m “将推送最新数据到公开库输出为一个脚本,可以一键执行”
具体步骤见如下步骤:
x
感谢下面列出的贡献者,没有他们,hexo-theme-matery 不会这么完美。
本主题推荐你使用 Hexo 5.0.0 及以上的版本。如果,你已经有一个自己的 Hexo 博客了,建议你将 Hexo 升级到最新稳定的版本。
点击 这里 下载 master
分支的最新稳定版的代码,解压缩后,将 hexo-theme-matery
的文件夹复制到你 Hexo 的 themes
文件夹中即可。
当然你也可以在你的 themes
文件夹下使用 git clone
命令来下载:
git clone https://github.com/blinkfox/hexo-theme-matery.git
更新于:2023年10月17日15:12:20
hexo 5.3.0
node v18.18.0
win10
链接:https://pan.baidu.com/s/1cQ-u6eIDwLYLta9xUKkQUw?pwd=0820
提取码:0820
2023.10.18-hexo-theme-matery-实验软件
在任何地方,单击鼠标右键,选择“git Bash”,然后在命令行里面输入npm install hexo -g:
npm install hexo -g
次小部分,仅仅作为测试自己本地hexo的可用性,具体本次主题涉及配置,请看后文。
然后,选择一个位置(例如D盘),新建一个文件夹,例如“blog_github”,这个文件夹将是你的博客的根目录,以后与博客有关的所有文件都是存放在这里。进入你新建的这个文件夹,然后单击鼠标右键,打开git命令行(知道怎么打开吧,选择”git Bash”),输入hexo init,这个时候,你会发现多了很多文件夹。如下所示:
hexo 初始化:
hexo init
安装插件:,在刚才打开的命令行里面输入npm install:
见证奇迹的时刻:
接着我们输入hexo g生成静态网页,然后输入hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以预览我们的博客啦,如图:
显示以下信息说明操作正确:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
常用命令:
Create a new post:
$ hexo new "My New Post"
Generate static files:
$ hexo generate == 简写hexo g
Run server:
$ hexo server == 简写hexo s
Deploy to remote sites:
$ hexo deploy == 简写hexo d
我们以后常用到的Hexo命令:
$ hexo s等价于 hexo server #Hexo 会监视文件变动并自动更新,除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。
$ hexo g 等价于 hexo generate #生成静态网页 (执行 $ hexo g后会在站点根目录下生成public文件夹, hexo会将”/blog/source/“ 下面的.md后缀的文件编译为.html后缀的文件,存放在”/blog/public/ “ 路径下)
$ hexo d 等价于 hexo deploy #将本地数据部署到远端服务器(如github)
$ hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹
按ctrl+c关闭本地服务器。
到目前为止,我们在本地创建博客框架的过程就完成了。
rsync使用背景
rsync在云服务器和本地pc端都要安装下,方面后续推送下本地pc的静态数据。
winodws pc写好的东西,同步到linux服务器上,单向同步需求。
# 检查是否安装了 rsync
rpm -qa|grep rsync
# 如果没有安装的话,进行安装
yum install rsync
# 将 rsync 设置成开启自启,并启动
systemctl enable rsyncd
systemctl start rsyncd
[root@mkdocs-server html]# vim /etc/rsyncd.conf
# /etc/rsyncd: configuration file for rsync daemon mode
# See rsyncd.conf man page for more options.
# 进行通信的端口,如果 firewall 打开的话,需要将对应的端口添加进去
port=8730
# 日志文件
log file=/var/log/rsync.log
# rsync 的进程 id
pid file=/var/run/rsync.pid
# 要同步的模块,这里一般以项目名命名
[cmi]
# 同步的目标文件夹
path=/root/rsync
# rsync daemon 在传输前是否切换到指定的 path 目录下,并将其监禁在内,用于增加传输的安全性
use chroot=no
# 指定最大的连接数
max connections=4
# yes 表示只读本地文件无法同步到服务器
read only=no
# 客户端请求显示模块列表时,该模块是否显示出来
list=true
# 服务运行时的用户
uid=root
# 服务运行时的用户组
gid=root
# 进行验证时的用户名,必须是系统存在的用户
auth users = root
# 连接用户时的密码
secrets file=/etc/rsyncd.passwd
# 允许的 ip
hosts allow=*
[root@mkdocs-server html]#
注意:
# 同步的目标文件夹
path=/root/rsync
# 连接用户时的密码
secrets file=/etc/rsyncd.passwd
# 1、创建目标的文件夹
mkdir /root/rsync
# 2、创建密码
# 创建文件夹
vim /etc/rsyncd.passwd
# 写入密码
echo "root:123456" > /etc/rsyncd.passwd #这里写入你自己云服务器的密码就行!!!
#更改文件权限
chmod 600 /etc/rsyncd.passwd
https://www.itefix.net/cwrsync-client
双击安装。(将次软件的.exe文件路径添加到自己pc的PATH里。)
rsync.exe -avPzruh --delete --port 8730 --password-file=/cygdrive/D/password.txt /cygdrive/D/mkdocs/site [email protected]::cmi/
说明:
#最新命令:
rsync.exe -avPzruh --delete --port 8730 --password-file=/cygdrive/D/password.txt /cygdrive/D/mkdocs/site [email protected]::cmi/
-a:归档模式,用于保持文件的属性、权限、时间戳等。
-v:显示详细输出,让您了解文件同步的进度和操作。
-p:显示文件传输的进度条和实时速度。
-z:在传输过程中压缩数据,减少网络带宽的使用。
-r:递归复制目录及其内容。
-u:只复制源中更新或新增的文件到目标目录。
-h:可读性大小。
--delete:删除目标目录中不在源中存在的文件和目录。
# cmi_password.txt 密码文件 写入 Linux 端配置的密码即可
# cmi 指代模块,我们这边正好按照
⚠️ 注意:
下面就是 在 windows server 创建计划任务定时执行了。(目前暂不需要)
自己的需求是:编写完文档后,一键执行上传操作。
最新的推送命令见下文。
::添加自己要执行的任务
echo Push winodws hexo static data to ecs...
rsync.exe -avPzruh --delete --port 8730 --password-file=/cygdrive/D/password.txt /cygdrive/D/hexo/public [email protected]::cmi/
https://blog.csdn.net/qq_39007838/article/details/127562636
在ecs上配置。
yum install nginx -y
systemctl enable nginx
systemctl start nginx
http配置:
[root@mkdocs-server ~]# vim /etc/nginx/nginx.conf
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4096;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
server {
listen 80;
listen [::]:80;
server_name onedayxyy.cn;
#root /usr/share/nginx/html;
root /root/rsync/public;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2;
# listen [::]:443 ssl http2;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}
https配置:
注意:我这里的配置为最终版,配置了https、强制跳转https登配置,大家可以参考。
配置效果如下图所示:
完整配置如下:
[root@hexo-blog ~]# cat /etc/nginx/nginx.conf
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4096;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
# server {
# listen 80;
# listen [::]:80;
# server_name onedayxyy.cn;
# #root /usr/share/nginx/html;
# root /root/rsync/public;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# error_page 404 /404.html;
# location = /404.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
#
# #将所有HTTP请求通过rewrite指令重定向到HTTPS。
# rewrite ^(.*)$ https://$host$1;
# location / {
# index index.html index.htm;
# }
#
# }
# Settings for a TLS enabled server.
#
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name www.onedayxyy.cn;
root /root/rsync/public;
ssl_certificate "cert/www.onedayxyy.cn.pem";
ssl_certificate_key "cert/www.onedayxyy.cn.key";
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
#ssl_ciphers HIGH:!aNULL:!MD5;
#自定义设置使用的TLS协议的类型以及加密套件(以下为配置示例,请您自行评估是否需要配置)
#TLS协议版本越高,HTTPS通信的安全性越高,但是相较于低版本TLS协议,高版本TLS协议对浏览器的兼容性较差。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 80;
#填写证书绑定的域名
server_name www.onedayxyy.cn;
root /root/rsync/public;
#将所有HTTP请求通过rewrite指令重定向到HTTPS。
rewrite ^(.*)$ https://$host$1;
location / {
index index.html index.htm;
}
}
}
[root@hexo-blog ~]#
修改完成后,按Esc键、输入**:wq并按Enter**键,保存修改后的配置文件并退出编辑模式。
执行以下命令,重启Nginx服务。
systemctl reload nginx
hexo-theme-matery-github-public
类型仓库[email protected]:OnlyOnexl/hexo-theme-matery-github-public.git
专门存放公开分享给别人的本主题最新配置,别人clone次仓库后,按照这个hexo博客部署
文档,立马可以部署属于自己的一个博客。
拉取代码:
git clone [email protected]:OnlyOnexl/hexo-theme-matery-github-public.git
node_modules
内容node_modules
内容初始化命令:hexo init
node_modules
拷贝到hexo根目录下:/d/hexo
cd /d/hexo-theme-matery-github-public
npm install hexo-generator-search --save
npm install hexo-filter-github-emojis --save
npm install hexo-generator-feed --save
注意:这里一定要提前安装好这3个插件,不然hexo-theme-matery里配置了插件内容,pc端没安装的话,这里运行会报错的!
hexo s
命令进行测试github-hexo-blog-private
私有仓库注意:这里利用github的是有仓库来保存自己的本地所有博客元数据、hexo配置数据。
echo "# github-hexo-blog-private" >> README.md
git init
git add -A
git commit -m "first commit"
git branch -M main
git remote add origin [email protected]:OnlyOnexl/github-hexo-blog-private.git
git push -u origin main
虽然要手动操作一些,但是还可以接受的。
将如下/d/hexo
目录下涉及文件全部拷贝到/d/hexo-theme-matery-github-public
目录下,然后删除D:\hexo-theme-matery-github-public\source\_posts
目录下多余的文件,删除D:\hexo-theme-matery-github-public\source\images
目录里自己原来的md本地图片,提交即可。
提交:
git pull
git add -A
git commit -m "push-hexo-theme-matery"
git push
在github仓库里做好tag:
$ git tag -a v1-hexo-theme-matery-2023.10.17 -m "v1-hexo-theme-matery-2023.10.17"
$ git push origin v1-hexo-theme-matery-2023.10.17
验证:
次部分代码汇总:
cd /d/hexo-theme-matery-github-public
git pull
git add -A
git commit -m "push-hexo-theme-matery"
git push
git tag -a v2-hexo-theme-matery-2023.10.17 -m "v2-hexo-theme-matery-2023.10.17"
git push origin v2-hexo-theme-matery-2023.10.17
以下脚本可以实现的需求是:
我能够一键将本地博客源代码推送到自己的公开库,特别方便。
mkdir -p /d/hexo-tmp
/etc/profile
里#hexo-theme-matery-github-public推送命令
alias pp="""
#mkdir -p /d/hexo-tmp
rm -rf /d/hexo-tmp/*
cd /d/hexo-theme-matery-github-public
cp /d/hexo/_config.landscape.yml /d/hexo-tmp
cp /d/hexo/_config.yml /d/hexo-tmp
cp /d/hexo/CNAME /d/hexo-tmp
cp /d/hexo/db.json /d/hexo-tmp
cp /d/hexo/package.json /d/hexo-tmp
cp /d/hexo/package-lock.json /d/hexo-tmp
cp -R /d/hexo/public /d/hexo-tmp
cp -R /d/hexo/resource /d/hexo-tmp
cp -R /d/hexo/scaffolds /d/hexo-tmp
cp -R /d/hexo/source /d/hexo-tmp
cp -R /d/hexo/themes /d/hexo-tmp
cp -R /d/hexo/xyy /d/hexo-tmp
cd /d/hexo-theme-matery-github-public
rm -rf /d/hexo-theme-matery-github-public/_config.landscape.yml
rm -rf /d/hexo-theme-matery-github-public/_config.yml
rm -rf /d/hexo-theme-matery-github-public/CNAME
rm -rf /d/hexo-theme-matery-github-public/db.json
rm -rf /d/hexo-theme-matery-github-public/package.json
rm -rf /d/hexo-theme-matery-github-public/package-lock.json
rm -rf /d/hexo-theme-matery-github-public/public
rm -rf /d/hexo-theme-matery-github-public/resource
rm -rf /d/hexo-theme-matery-github-public/scaffolds
rm -rf /d/hexo-theme-matery-github-public/source
rm -rf /d/hexo-theme-matery-github-public/themes
rm -rf /d/hexo-theme-matery-github-public/xyy
rm -rf /d/hexo-theme-matery-github-public/README.md
mv /d/hexo-tmp/* /d/hexo-theme-matery-github-public/
rm -rf /d/hexo-theme-matery-github-public/source/_posts/*
rm -rf /d/hexo-theme-matery-github-public/source/images/*
mv /d/hexo-theme-matery-github-public/resource/README.md /d/hexo-theme-matery-github-public
mv /d/hexo-theme-matery-github-public/resource/2022.1.25-我如果爱你.md /d/hexo-theme-matery-github-public/source/_posts
mv /d/hexo-theme-matery-github-public/resource/xyy.png /d/hexo-theme-matery-github-public/source/images
cd /d/hexo-theme-matery-github-public
git pull
git add -A
git commit -m "push-hexo-theme-matery"
git push
git tag -d v2.0.0-hexo-theme-matery-2023.10.18
git push --delete origin v2.0.0-hexo-theme-matery-2023.10.18
git tag -a v2.0.0-hexo-theme-matery-2023.10.18 -m "功能基本满足博客需求,使用体验极度丝滑"
git push origin v2.0.0-hexo-theme-matery-2023.10.18
"""
本次新创建如下资源文件:
执行pp命令
:
完美实现需求。
在hexo根目录下创建如下脚本文件:
hexo.bat
:
::添加自己要执行的任务
echo Push winodws hexo static data to ecs...
rsync.exe -avPzruh --delete --port 8730 --password-file=/cygdrive/D/password.txt /cygdrive/D/hexo/public [email protected]::cmi/
profile.sh
:
$ vim /etc/profile
#一键推送并上传
alias xyy='''
sh /d/hexo/xyy/xyy.sh
'''
#本地构建hexo静态数据
alias hg='''
cd /d/hexo
hexo g
'''
#本地构建hexo
alias hs='''
cd /d/hexo
hexo s
'''
alias push="""
cd /d/hexo
git status
echo "!"
git pull
echo "!"
git add -A
git commit -m "push-hexo-blog-metadata"
git push
echo "!"
xyy
git status
echo "!"
xyy
"""
alias pull="""
cd /d/hexo
git pull
"""
alias gs="""
cd /d/hexo
git status
"""
xyy.sh
:
#!/bin/sh
cd /d/hexo/ && hexo g
echo "hexo: hexo本地数据拷贝&构建成功!"
echo ""
echo ""
echo "推送winodws site数据到ecs:"
echo "-------------------------------------------------------------------"
echo "x"
echo "y"
echo "y"
echo "我"
echo "想"
echo "你"
echo "-------------------------------------------------------------------"
/d/hexo/xyy/hexo.bat
echo "rsync: rsync数据winodws-->ecs推送成功!"
echo ""
echo ""
echo "重新加载ecs上nginx进程:"
echo "-------------------------------------------------------------------"
echo "x"
echo "y"
echo "y"
echo "我"
echo "想"
echo "你"
echo "-------------------------------------------------------------------"
ssh [email protected] 'systemctl reload nginx'
echo "hexo: ecs上部署站点成功!"
echo " "
echo " "
echo "汇总hexo数据目录大小:"
echo "winodws上hexo元数据总大小:"
du -sh /d/hexo/source|awk '{print $1}'
echo "!"
echo "winodws上site大小:"
du -sh /d/hexo/public|awk '{print $1}'
echo "ecs上hexo静态数据大小:"
ssh [email protected] du -sh /root/rsync/public |awk '{print $1}'
echo "-------------------------------------------------------------------"
echo "xyy, i miss you!"
echo "-------------------------------------------------------------------"
echo "推送结束!"
记得在自己的winodws的linux环境下配置/etc/profile
文件:
https://onedayxyy.cn/
至此,部署完成,欢迎享用。
修改 Hexo 根目录下的 _config.yml
的 theme
的值:theme: hexo-theme-matery
_config.yml
文件的其它修改建议:_config.yml
的 url
的值为你的网站主 URL
(如:http://xxx.github.io
)。per_page
的分页条数值为 6
的倍数,如:12
、18
等,这样文章列表在各个屏幕下都能较好的显示。language
的值为 zh-CN
。categories
页是用来展示所有分类的页面,如果在你的博客 source
目录下还没有 categories/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md
,至少需要以下内容:
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
tags
页是用来展示所有标签的页面,如果在你的博客 source
目录下还没有 tags/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md
,至少需要以下内容:
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
about
页是用来展示关于我和我的博客信息的页面,如果在你的博客 source
目录下还没有 about/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md
,至少需要以下内容:
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
contact
页是用来展示留言板信息的页面,如果在你的博客 source
目录下还没有 contact/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "contact"
编辑你刚刚新建的页面文件 /source/contact/index.md
,至少需要以下内容:
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---
注:本留言板功能依赖于第三方评论系统,请激活你的评论系统才有效果。并且在主题的
_config.yml
文件中,第19
至21
行的“菜单”配置,取消关于留言板的注释即可。
friends
页是用来展示友情链接信息的页面,如果在你的博客 source
目录下还没有 friends/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md
,至少需要以下内容:
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
同时,在你的博客 source
目录下新建 _data
目录,在 _data
目录中新建 friends.json
文件,文件内容如下所示:
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬,只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬,技术牛,人还特别好,不懂的都可以请教大佬",
"url": "https://blinkfox.github.io/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]
如果在你的博客 source
目录下还没有 404.md
文件,那么你就需要新建一个
hexo new page 404
编辑你刚刚新建的页面文件 /source/404/index.md
,至少需要以下内容:
---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops~,我崩溃了!找不到你想要的页面 :("
---
1.菜单导航名称可以是中文也可以是英文(如:Index
或主页
)
2.图标icon 可以在Font Awesome 中查找
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
children
关键字(如:About
菜单下添加children
)children
下创建二级菜单的 名称name,路径url和图标icon.-
.menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Music
url: /music
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image
执行 hexo clean && hexo g
重新生成博客文件,然后就可以在文章中对应位置看到你用emoji
语法写的表情了。
从 Hexo5.0 版本开始自带了 prismjs
代码语法高亮的支持,本主题对此进行了改造支持。
如果你的博客中曾经安装过 hexo-prism-plugin
的插件,那么你须要执行 npm uninstall hexo-prism-plugin
来卸载掉它,否则生成的代码中会有 {
和 }
的转义字符。
然后,修改 Hexo 根目录下 _config.yml
文件中 highlight.enable
的值为 false
,并将 prismjs.enable
的值设置为 true
,主要配置如下:
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''
主题中默认的 prismjs
主题是 Tomorrow Night
,如果你想定制自己的主题,可以前往 prismjs 下载页面 定制下载自己喜欢的主题 css
文件,然后将此 css 主题文件取名为 prism.css
,替换掉 hexo-theme-matery
主题文件夹中的 source/libs/prism/prism.css
文件即可。
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
search:
path: search.xml
field: post
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO
,且 gitment
评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后只需在本主题下的 _config.yml
文件中,将各个文章字数相关的配置激活即可:
postInfo:
date: true
update: false
wordCount: false # 设置文章字数统计为 true.
totalCount: false # 设置站点文章总字数统计为 true.
min2read: false # 阅读时长.
readCount: false # 阅读次数.
本主题新增了对emoji
表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji
表情的生成,把对应的markdown emoji
语法(::
,例如::smile:
)转变成会跳跃的emoji
表情,安装命令如下:
npm install hexo-filter-github-emojis --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS
,安装命令如下:
npm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
执行 hexo clean && hexo g
重新生成博客文件,然后在 public
文件夹中即可看到 atom.xml
文件,说明你已经安装成功了。
前往 DaoVoice 官网注册并且获取 app_id
,并将 app_id
填入主题的 _config.yml
文件中。
前往 Tidio 官网注册并且获取 Public Key
,并将 Public Key
填入主题的 _config.yml
文件中。
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs
文件中,包括站点、使用的主题、访问量等。
在主题的 _config.yml
文件中,默认支持 QQ
、GitHub
和邮箱等的配置,你可以在主题文件的 /layout/_partial/social-link.ejs
文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:
<% if (theme.socialLink.github) { %>
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
<i class="fab fa-github">i>
a>
<% } %>
其中,社交图标(如:fa-github
)你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识,供你参考:
fab fa-facebook
fab fa-twitter
fab fa-google-plus
fab fa-linkedin
fab fa-tumblr
fab fa-medium
fab fa-slack
fab fa-weibo
fab fa-weixin
fab fa-qq
fab fa-zhihu
注意: 本主题中使用的
Font Awesome
版本为5.11.0
。
在主题文件的 source/medias/reward
文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。
要支持音乐播放,在主题的 _config.yml
配置文件中激活music配置即可:
# 是否在首页显示音乐
music:
enable: true
title: # 非吸底模式有效
enable: true
show: 听听音乐
server: netease # require music platform: netease, tencent, kugou, xiami, baidu
type: playlist # require song, playlist, album, search, artist
id: 503838841 # require song id / playlist id / album id / search keyword
fixed: false # 开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
listFolded: true # 列表默认折叠
server
可选netease
(网易云音乐),tencent
(QQ音乐),kugou
(酷狗音乐),xiami
(虾米音乐),
baidu
(百度音乐)。
type
可选song
(歌曲),playlist
(歌单),album
(专辑),search
(搜索关键字),artist
(歌手)
id
获取方法示例: 浏览器打开网易云音乐,点击我喜欢的音乐歌单,浏览器地址栏后面会有一串数字,playlist
的id
即为这串数字。
Front-matter
选项中的所有内容均为非必填的。但我仍然建议至少填写 title
和 date
的值。
配置选项 | 默认值 | 描述 |
---|---|---|
title | Markdown 的文件标题 |
文章标题,强烈建议填写此选项 |
date | 文件创建时的日期时间 | 发布时间,强烈建议填写此选项,且最好保证全局唯一 |
author | 根 _config.yml 中的 author |
文章作者 |
img | featureImages 中的某个值 |
文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg |
top | true |
推荐文章(文章是否置顶),如果 top 值为 true ,则会作为首页推荐文章 |
cover | false |
v1.0.2 版本新增,表示该文章是否需要加入到首页轮播封面中 |
coverImg | 无 | v1.0.2 版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片 |
password | 无 | 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 |
toc | true |
是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 |
mathjax | false |
是否开启数学公式支持 ,本文章是否开启 mathjax ,且需要在主题的 _config.yml 文件中也需要开启才行 |
summary | 无 | 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要 |
categories | 无 | 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类 |
tags | 无 | 文章标签,一篇文章可以多个标签 |
keywords | 文章标题 | 文章关键字,SEO 时需要 |
reprintPolicy | cc_by | 文章转载规则, 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 |
注意:
- 如果
img
属性不填写的话,文章特色图会根据文章标题的hashcode
的值取余,然后选取主题中对应的特色图片,从而达到让所有文章的特色图各有特色。date
的值尽量保证每篇文章是唯一的,因为本主题中Gitalk
和Gitment
识别id
是通过date
的值来作为唯一标识的。- 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的
_config.yml
中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具、chahuo、站长工具。- 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的 Front-matter
示例。
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
在本主题的 _config.yml
中可以修改部分自定义信息,有以下几个部分:
favicon
和 Logo
Gitalk
、Gitment
、Valine
和 disqus
评论配置Google Analytics
)hashcode
值取余,来选择展示对应的特色图我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意,可以在主题中自定义修改,很多更自由的功能和细节点的修改难以在主题的 _config.yml
中完成,需要修改源代码才来完成。以下列出了可能对你有用的地方:
在主题文件的 /source/css/matery.css
文件中,搜索 .bg-color
来修改背景颜色:
/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
你可以直接在 /source/medias/banner
文件夹中更换你喜欢的 banner
图片,主题代码中是每天动态切换一张,只需 7
张即可。
如果你会 JavaScript
代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner
切换的代码位置在 /layout/_partial/bg-cover-content.ejs
文件的 代码中:
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
在 /source/medias/featureimages
文件夹中默认有 24 张特色图片,你可以再增加或者减少,并需要在 _config.yml
做同步修改。
hexo博客刚初始化完成,最基础数据文件如下:
已成功测试。(2023年10月18日)
要利用npm升级Hexo版本,可以按照以下步骤进行操作:
打开命令行终端,并进入你的Hexo博客项目的根目录。
运行以下命令来检查当前Hexo版本以及可用的Hexo版本:
hexo version
npm show hexo version
确定可用的Hexo版本后,运行以下命令来安装最新版本的Hexo:
npm install hexo@最新版本号 --save
#本次执行命令:
npm install [email protected] --save
把"最新版本号"替换为你希望安装的Hexo版本号。
等待npm安装完毕,安装过程可能会花费一些时间。
安装完成后,运行以下命令来验证Hexo是否成功升级:
hexo version
如果输出显示了你刚刚安装的Hexo版本号,则说明升级成功。
请注意,升级Hexo版本可能对你的博客项目造成一定影响,建议在升级前备份你的项目文件以防止意外情况发生。
这里开始回退版本。
要查看 Hexo 5.x 的具体版本号,您可以使用 npm 的 version 命令来获取所有可用的版本列表。请按照以下步骤进行操作:
打开终端或命令提示符窗口。
输入以下命令并按回车键运行:
npm show hexo@5 versions
等待片刻,npm 将显示 Hexo 5.x 的所有可用版本号。
示例输出:
[
'5.0.0',
'5.0.1',
'5.1.0',
'5.2.0',
...
]
以上命令将列出 Hexo 5.x 的所有版本号。您可以基于此列表选择您想要回退到的特定版本。
npm如何回退hexo到指定的5.x版本?
要回退到指定的 Hexo 5.x 版本,您可以使用 npm 命令来实现。首先,您需要打开终端或命令提示符窗口,并确保您的计算机上已安装了 Node.js 和 npm。
然后,执行以下命令以安装指定版本的 Hexo:
npm install -g [email protected]
请将 “5.x.x” 替换为您想要安装的具体版本号,例如 “5.3.0”。
此命令将全局安装指定版本的 Hexo。安装完成后,您就可以使用新安装的 Hexo 版本了。
注意:请确保你了解要回退到的具体版本的功能和兼容性,并且根据您的项目需求进行选择。
本次先回退到5.3.0:
查看当前版本:
回退:
npm install -g [email protected]
验证:没有效果。。。
如果您按照上述步骤成功安装了指定版本的 Hexo,但回退后没有生效,可能是因为在全局安装的 Hexo 版本与项目本地安装的 Hexo 版本冲突了。
在这种情况下,您需要确保在项目目录中使用与全局安装的 Hexo 版本相匹配的本地版本。您可以按照以下步骤执行:
进入您的 Hexo 项目目录:
cd /path/to/hexo-project
在项目目录中,使用以下命令安装或更新 Hexo 5.x 版本:
npm install [email protected]
这里的 “5.x.x” 应替换为您想要安装的具体版本号。
确保在项目目录中使用的是正确的 Hexo 版本,而不是全局安装的版本。
请注意,在项目目录中安装 Hexo 后,您可能需要更新或重新配置一些 Hexo 插件或主题,以确保与所选择的 Hexo 版本兼容。
我当时就是在项目下回退的。。。
npm install -g [email protected]
验证:
还是这样,没生效。。。
7.0.0-rc2
,然后安装hexo老版本5.3.0
如何利用npm卸载hexo软件?
要使用 npm 进行 Hexo 软件的卸载,您可以按照以下步骤进行操作:
打开终端或命令提示符窗口。
通过以下命令进入您的 Hexo 项目目录:
cd /path/to/hexo-project
这里的 “/path/to/hexo-project” 应替换为您实际 Hexo 项目所在的路径。
在项目目录中,使用以下命令卸载 Hexo:
npm uninstall hexo
确认卸载操作后,npm 将开始卸载 Hexo 软件及其相关依赖。
等待卸载过程完成。这可能需要一些时间,具体时间取决于您的计算机性能和 Hexo 软件的大小。
卸载完成后,您可以关闭终端或命令提示符窗口。
请注意,使用 npm 卸载 Hexo 仅会移除 Hexo 的包及其依赖,这不会删除您的项目文件和数据。如果您想要完全删除 Hexo 项目,请手动删除项目文件夹。另外,如果您在全局范围内安装了 Hexo,请使用
npm uninstall -g hexo
命令来卸载全局安装的 Hexo 软件。
开始卸载:
全局卸载:
项目下卸载:
5.3.0
npm install -g [email protected]
全局安装hexo后,进到hexo项目根目录后,查看hexo版本时,此时报错:
按所给命令执行,查看效果:
还是报错,这里在项目根目录下继续手动安装下hexo5.3.0版本:
还是报错。。。大无语了。
/d/hexo
目录,然后把刚才测试好的目录直接拷贝到/d/hexo
下,再次观察效果(注意这里我要把一直在持续编辑的博客源数据也一起拷贝过去
)拷贝后,再次执行hexo命令就正常了:
hexo s:
至此,以上问题已全部解决。
因此一定要注意:hexo版本和自己主题项目之间的兼容性,否则可能会报错!
我的博客主旨:
微信二维码
x2675263825 (舍得), qq:2675263825。
微信公众号
《云原生架构师实战》
个人博客站点
http://onedayxyy.cn/
语雀
https://www.yuque.com/xyy-onlyone
csdn
https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421
知乎
https://www.zhihu.com/people/foryouone
好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!