环境要求
- PHP >= 7.0.0
- OpenSSL PHP Extension
- PDO PHP Extension
- Mbstring PHP Extension
- Tokenizer PHP Extension
- XML PHP Extension
同时,还需要安装好 Composer 和 Node.js® 。
安装
从 GitHub 下载:
git clone https://github.com/lufficc/Xblog.git blog --depth 1
cd blog
安装:
composer install
cp .env.example .env
php artisan key:generate
在.env
文件中填好数据库连接,例如:
DB_CONNECTION="mysql"
DB_HOST="127.0.0.1"
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=123456
运行数据库迁移:
php artisan migrate
安装前端框架:
npm install
编译前端:
npm run dev # 开发模式, 不会压缩 js 和 css, 因此速度很快.
npm run prod # 生产模式, 会压缩 js 和 css.
至此,全部安装完毕,你可以启动服务器来访问 http://127.0.0.1:8000:
php artisan serve
默认情况下,用户 id 为 1 的为管理员,因此首先进入 http://127.0.0.1:8000/register 注册一个用户作为管理员(只有管理员可以写作、进入后台)。
为了不让网站看起来空荡荡的,你可以生产一些假数据:
php artisan db:seed
到这一步,网站大概看起来就是这个样子了(没有其他任何个性化设置):
Features
文章方面
支持 Markdown, 编辑器支持粘贴板、拖拽上传图片,全屏写作模式, 实时预览, 快捷键, 自动保存。
文章的多状态管理(发布,撤回,软删除,永久删除,恢复,草稿)
单篇文章支持修改评论类型(原生、Disqus),支持关闭、禁止或不显示评论,支持关闭或者显示目录(TOC)。
评论系统
支持原生自带、Disqus评论系统。支持全站关闭评论, 文章(或者页面)关闭评论,为某一篇文章(或者页面)关闭评论,强制开启评论。原生自带评论登录未登录均可评论,但是需要管理员审核后才会显示在前端界面。
以及评论管理系统:
评论邮件提醒功能:
Block IP
会记录访问你博客用户的 IP,可以禁止某一 IP 访问你的博客。
分类, 多标签
每个文章须有一个分类,可以有0个或多个标签。
后台管理
后台界面。
图片管理
图片集中管理、上传。
赞赏功能
赞赏功能,可关闭,赞赏语可配置。
写作
Xblog 采用 Markdown 格式来存储文章。Markdown 简洁、高效,很容易上手。
快捷键
编辑器采用 sparksuite/simplemde-markdown-editor ,支持 SimpleMDE 支持的所有快捷键,同时文章会自动保存在本地,防止关闭网页导致内容丢失。
快捷键 | 动作 |
---|---|
Cmd-' | "toggleBlockquote" |
Cmd-B | "toggleBold" |
Cmd-E | "cleanBlock" |
Cmd-H | "toggleHeadingSmaller" |
Cmd-I | "toggleItalic" |
Cmd-K | "drawLink" |
Cmd-L | "toggleUnorderedList" |
Cmd-P | "togglePreview" |
Cmd-Alt-C | "toggleCodeBlock" |
Cmd-Alt-I | "drawImage" |
Cmd-Alt-L | "toggleOrderedList" |
Shift-Cmd-H | "toggleHeadingBigger" |
F9 | "toggleSideBySide" |
F11 | "toggleFullScreen" |
上传图片
扩展了 SimpleMDE,你可直接拖拽图片到编辑器或者直接将粘贴板的图片粘贴到编辑器,编辑器可以自动上传图片,并将图片链接以 Markdown 的方式插入到当前光标位置。

图题
你可以给图片添加 figure
类让其显示题图,因为采用了 Markdown Extra ,因此在图片链接后面添加{.figure}
即可,效果如下图所示。
{.figure}
画廊
你可以点击编辑器画廊按钮来插入画廊,会插入如下代码:
<div markdown="1" class="figure third" caption="画廊标题">




</div>
然后可以在中间插入图片。另外,除了三列画廊,还支持两列、四列、五列画廊,只需要分别把 third
类改为half
、fourth
、fifth
即可。其展示效果如下图:
两列画廊
<div markdown="1" class="figure half" caption="两列画廊">




</div>




三列画廊
<div markdown="1" class="figure third" caption="三列画廊">









</div>









四列画廊
<div markdown="1" class="figure fourth" caption="四列画廊">










</div>










五列画廊
<div markdown="1" class="figure fifth" caption="五列画廊">













</div>













同时,这些画廊全都是响应式的,在移动设备上会显示为单列。如果 caption
为空的话,画廊图题会设置为所有图片的 alt
中不为空的第一个。
提示信息
点击编辑器的提示按钮,来插入提示。
<div markdown="1" class="alert alert-info">
</div>
例如:
<div markdown="1" class="alert alert-info">
**NOTE:** 我是海贼迷,点击[这里](http://comic.lufficc.com/)看漫画。
</div>
<div markdown="1" class="alert alert-success">
**NOTE:** 我是海贼迷,点击[这里](http://comic.lufficc.com/)看漫画。
</div>
<div markdown="1" class="alert alert-danger">
**NOTE:** 我不是海贼迷,不要点击[这里](http://comic.lufficc.com/)看漫画。
</div>
<div markdown="1" class="alert alert-warning">
**NOTE:** 我是海贼迷,点击[这里](http://comic.lufficc.com/)看漫画。
</div>
<div markdown="1" class="alert alert-dark">
**NOTE:** 我是海贼迷,点击[这里](http://comic.lufficc.com/)看漫画。
</div>
NOTE: 我是海贼迷,点击这里看漫画。
NOTE: 我是海贼迷,点击这里看漫画。
NOTE: 我不是海贼迷,不要点击这里看漫画。
NOTE: 我是海贼迷,点击这里看漫画。
NOTE: 我是海贼迷,点击这里看漫画。
Markdown Extra
Xblog 支持 php Markdown Extra,例如:
Markdown Inside HTML Blocks
<div markdown="1">
<div markdown="1"> This is *true* **markdown** text. </div>
</div>
This is true markdown text.
Footnotes
这个效果的实现具体原理参见原理[^1]。
[^1]: 这是原理1。
这个效果的实现具体原理参见原理1。
Abbreviations
The HTML specification is maintained by the W3C.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.
更多效果可以查看 php Markdown Extra。
数学公式
数学公式采用 MathJax,使用 $
包裹行内元素,$$
包裹块元素即可,例如:
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
When $a \ne 0$, there are two solutions to (ax^2 + bx + c = 0) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
图床(File Storage)
Xblog 默认支持本地、七牛云、Amazon S3、Dropbox 等图床。并且图片与图床独立,你可以随便随时修改图床配置,而不影响图片(文件)的删除等功能,修改 .env
的 DISK
属性只会影响当前上传图片(文件)的位置,因为图片(文件)信息也存储了图床信息到数据库。
本地
使用本地图床,只需要将修改.env
中 的 DISK=local
或者 DISK=public
即可。
public
修改 .env
中 的 DISK=public
,此时上传文件会存储到 storage/app/public
文件夹,为了使前端可见,需要创建一个链接,从public/storage
到 storage/app/public
,运行
php artisan storage:link
即可。
local
修改 .env
中 的 DISK=local
,此时上传文件会存储到 storage/app
文件夹,为了使前端可见,需要创建一个链接,从public/storage
到 storage/app
,运行
ln -s <project_root>/storage/app <project_root>/public/storage
即可。
七牛云
修改 .env
中 的 DISK=qiniu
,同时填写七牛云相关信息即可。
DISK=qiniu
QINIU_AK=
QINIU_SK=
QINIU_BUCKET=
QINIU_DOMAIN= # 结尾不带 ‘/’
Amazon S3
首先需要安装依赖,composer require league/flysystem-aws-s3-v3 ~1.0
,然后修改 .env
中 的 DISK=s3
,同时填写 Amazon S3 相关信息即可。
DISK=s3
S3_KEY=
S3_SECRET=
S3_REGION=
S3_BUCKET=
Dropbox
首先需要安装依赖,composer require spatie/flysystem-dropbox
,然后将App\Providers\DropboxServiceProvider::class
添加到 config/app.php
的providers
数组,最后修改 .env
中 的 DISK=dropbox
,同时填写 Dropbox 相关信息即可。如何生成 access token?看这里。
DISK=dropbox
DROPBOX_ACCESS_TOKEN=
其他图床
参考官方文档 File Storage,然后在 .env
中填写相关信息即可,无需其他多余改动。
缓存
Xblog 支持使用 Redis 来加速你的博客,默认是没有使用缓存的。如果想使用,首先安装 Redis:
sudo apt-get install redis-server
然后在 .env
中设置 CACHE_ENABLE='true'
即可。
个性化
首页
首页动态墙纸,在 Settings > 图片 > Home背景图片里面填写,每行为一个图片链接。然后首页会随机循环播放这些图片。
Logo
Logo 在 Settings > 网站 > Logo 设置,可以为纯文本或者 HTML。例如 Bootstrap Logo 的 SVG:
<svg class="d-block" width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
<title>Bootstrap</title>
<path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path>
<path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path>
</svg>
其效果为:
Header 图片
在 Settings > 网站 > Header背景图片 设置,可以设置一个固定图片地址,也可以设置为动态更新的,如何必应搜索每日壁纸保持同步,或者定期随机从 Picsum 选择一张图片。
你如果使用了动态更新,需要在服务器添加配置,运行 crontab -e
,然后添加
* * * * * php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1
即可,详见 Task Scheduling 官方文档。
个人信息
在 Settings > 个人信息 设置你的头像、用户名、社交链接等信息,会显示在首页和博客右边栏。同时,其他信息 栏可以为 HTML,其最终会拼接到博客右边栏(博客右边栏实际为 Bootstrap 的一个 card
,因此自定义 HTML 最好用 card-body
类包裹,来获取相同 pad。),如设置为 DigitalOcean 的邀请链接:
<div class="card-body border-top">
<div class="media">
<a class="align-self-center d-flex mr-3" href="https://m.do.co/c/fd4deae8d4f4" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><title>DigitalOcean</title><g fill="#0080FF" fill-rule="evenodd"><path d="M24.9153 50v-9.661c10.226 0 18.1638-10.1413 14.2372-20.904-1.4406-3.983-4.6327-7.1751-8.6158-8.6158C19.774 6.921 9.6327 14.8305 9.6327 25.0565H0C0 8.7571 15.7627-3.9548 32.8531 1.3842c7.4576 2.3446 13.418 8.2768 15.7345 15.7344C53.9266 34.2373 41.2429 50 24.9153 50"></path><path d="M15.339 40.3672h9.6045v-9.6045H15.339zM7.9379 47.7684h7.401v-7.4012H7.938zM1.7514 40.3672H7.938v-6.1864H1.7514z"></path></g></svg>
</a>
<div class="media-body">
<p class="card-text">Easily deploy an SSD cloud server on DigitalOcean in 55 seconds. Sign up using my link and receive $10 in credit.</p>
</div>
</div>
</div>
其效果为:
其他
还有很多其他个性化设置,如每页数量、热门文章数量、备案号、赞赏描述等等,就不一一详细介绍了,在后台很容易就看到啦。
- <p>这是原理1。 <a href="#fnref1:1" rev="footnote" class="footnote-backref">↩</a></p>
写的不错,帮助到了您,赞助一下主机费~


感谢博主的共享,正在学习lara框架。
@zdj999123 一块学习
前阵子在phphub看到,今天决定用博主的这个项目搭建自己的博客,特意来感谢一下,感谢分享
@troubleman 多谢支持,目前正在开发第二个把版本,等稳定了就放出来哈
我也用博主的博客!期待博主的第二版本,是否留下个联系方式
@jason 额 关于里面有啊
QINIU的https这个为什么必须要配置啊。。。我的就只有http
@xhh110 不用配置HTTPS也可,主要是站点用到HTTPS的话尽量要配置。你更新一下,
git pull origin master
.@lufficc 期待~~
评论的时候提示Cannot send message without a sender address是怎么回事呢,谢谢
@frankzgzhou 你@别人的时候,会给那个注册的用户发送提醒邮件,他邮箱可能不正确,就会提示这个信息。。。
另外This cache store does not support tagging是bug吗,cache_drive=array就可以
我马上更新,利用contracts可以在不改动代码的情况下不使用缓存。
既然你用了缓存,为啥不用专业的呢?比如redis,memcache,这两个都支持tag
@lufficc 不太会配置redis和memcache,博主大大顺便出个教程嘛T T
额。。。几乎不用配置,你是什么操作系统,什么开发环境?
楼主没有用户模块的管理,是否可以造一个?或者我来改造下
@jason 欢迎pr,不过用户管理这一块儿不是重点,毕竟只是个博客~~ 另外2.0版本快
released
了@lufficc win7 64位,用了一个laragon的环境,已经有了redis和memcache了,另外关注2.0中
@nick 你具体环境是什么?我好像没遇到这样的问题。。
win10,php70n
@lufficc
应该是laravel sql parser的bug,把"App\User"的引号去掉了
解决没?在我这儿好像没问题。。。
@lufficc

这是数据库,直接执行sql不是group的问题,App\User加上引号就没问题了
\Illuminate\Database\Query\Builder::runSelect
定位到这里,where条件中App\User还是有引号的
应该是select 中bindValue里
@lufficc
还没
$me->bindValues($statement, $me->prepareBindings($bindings));
到这里就是pdo了,是不是pdo不支持App\User这种
@nick 你这是什么数据库?应该不是 MySQL吧?
@lufficc
加我下扣扣求指导
NzM2ODg2ODY0
@lufficc
是mysql
@nick 现在在上课,没办法开电脑。
群号是多少
@frankzgzhou 没有群哦 群我已经解散~
@lufficc xblog是2.0版本吗
@frankzgzhou 是的,现在最新版本,昨天released的。composer和git clone的都是最新稳定版2.0.0~
这个是什么问题?

@frankzgzhou
"php": ">=5.6.4"
,你的php版本是多少?作者你好,我按照文档将xblog安装在云服务器上,但是存在一个问题,点击登陆或者注册之类的按钮,会报500错误,我是将代码绑定到我的子域名上的,服务器上同时还有别的项目,我怀疑是不是session的问题,但是没有头绪,你有没有遇到过这个问题?
@codefly 截图发给我一下?
@lufficc 邮箱?
@codefly 都行,你也可用markdown插入到这里让大家看看,遇到类似问题可以解决。
发你邮箱吧,我这用markdown不方便
@codefly ok
博主你好,安装完成后报错。
@franky 把
config\database
里面的mysql
中的strict
改为false
解决了@nick @lufficc 在后面加上->groupBy('type');
@franky OK
图片上传失败,去七牛云申请了key,secret,bucket,domain,但是上传总是提示上传失败额。
@franky 我看看你的配置,或者出错信息
@lufficc 为什么我本地输入 “域名/admin” 不能登录后台,报404错误
@maimai 你需要登录并且是管理员才能进。先不要
db:seed
,你首先自己注册个账号,第一个用户才是管理员。你db:seed
之后第一个用户是随机的。。。。。。@lufficc 可以了,图片上传需要注册七牛吗,需要钱吗
@maimai 不要钱,注册吧,图片一般不保存到本地
这个评论系统有没有发送邮件的?
@lufficc
发了,不然我哪会回那么快

@maimai 噢 非注册用户现在还没有提醒
本地项目支持邮箱吗,我本地的评论测试一下没有收到邮箱
@maimai
.env
文件的配置得正确@lufficc 报错 stream_socket_enable_crypto(): SSL: Handshake timed out
@maimai 善于使用搜索引擎啊。。。。,这问题一Google就出来了
http://stackoverflow.com/questions/14978459/warning-stream-socket-enable-crypto-this-stream-does-not-support-ssl-crypto
@maimai 你的
QINIU_BUCKET
填对没?@lufficc

我注册了七牛,填写了QINIU_AK QINIU_SK 上传图片不成功,我追溯上传代码,打印出来,不知道是哪里错了,是七牛哪里错了
@lufficc

是maimai吗
对,就是maimai
@lufficc
七牛的问题,我是华南的,代买没有z2地区,于是我更改sdk代码添加这一段就解决了
@maimai 可以 很强势。。
楼主你的qq邮箱是怎么配置的,我配置不行啊
可以了 改成ssl
我从github上git下来部署到服务器上,修改了相应的配置,但是只有根目录打得开,其他页面都是404
nginx 未配置好,所以导致出错
@franky 解决了就好
站长,都已经 php artisan migrate 生成数据表了 为什么还报
@hezhizheng 你配置信息没填对,密码没填
@lufficc 是提示密码没填 但我配置信息都填了的 不然 php artisan migrate也没法生存数据表呀,
真的是无语了 ,还有其他什么原因吗。。。。。。
@hezhizheng 是不是配置信息没生效?还是说你用的homestead,两个环境弄混了?
为什么上传用户头像的时候,显示修改成功,数据库也有数据,但图片会显示失败,我也没看到有上传成功
头像显示上传成功实际没成功
我想问一下支持wordpress的文章搬家进来么 ..以前的文章
@tian 支持markdown 和 html ,只要是这两种格式的文章都行
@lufficc 建议后台编辑器加入实时预览。
@大东 以后会考虑的
github授权登录报错了
AbstractProvider.php 中session()->set 改成session()->put 本地的就好了
昵称是php1108注册时显示
Username can only contains letter,number or -,_ 字母加数字不能注册
都弄好后,
http://localhost/xblog/public/
样式乱了 不知道怎么回事
$author
$description
$profile_image
这些是在哪里定义的
请问博主的项目主页(http://mind.lufficc.com/Xblog/)是通过什么制作的?写文档很赞 :)
@BING 使用的 Hexo 的模板
我想问一下,安装成功后出现这样的错误,不知道是哪里的原因?
(3/3) ErrorException
The Mix manifest does not exist.
这套系统是要自己建立数据库的吗?然后在.env文件里配置DB_HOST等?
@MoMo 是的
博主,手机端背景图片不显示,应该修改哪里的配置
@Potato 已经修复了,不用修改
@_OneTake 你应该是对的,我应该是写了一个 Bug o(╥﹏╥)o
请问博主,侧边栏,怎么加上去的
@dreamer123 个人信息
@lufficc 写的文章旁边的导航栏 怎么整上去的
@dreamer123 写文章的时候将“是否显示TOC”开启即可
还有那个画廊 不太好使,是需要装特定插件么
@dreamer123 不需要啊,你按照我说明的格式插入图片, 前端就显示画廊了
@lufficc 感谢博主
对 node 和 npm 有版本要求么
@whhong 没,按照 bootstrap 的要求就行
Good day
Thank you for the wonderful project. How do i display images in my views? I managed to upload images in my admin/images. They just don't display
I am failing to display images in my views please help.
And thank you
博主,现在访问8000端口报错, Undefined index: /css/home.css (View: /var/www/html/blog/resources/views/layouts/home.blade.php) , lavavel不熟悉,可以指教一下么, 可以访问 potatosmith.com查看错误
为什么我本地输入 “域名/admin” 不能登录后台,报404错误
请问博主 我安装完 评论功能报错{"status":500,"msg":"reCAPTCHA incorrect !"}是什么问题
@小曾 是不是你没配置 reCAPTCHA?或者配置了服务器访问不了 Google?
@lufficc 应该是服务器访问不了谷歌,这要怎么解决呢?报了reCAPTCHA incorrect !
reCAPTCHA incorrect ! 评论报这个错误是什么原因 ?
能否加我QQ646154866解答一下 感谢博主
膜拜大佬
博主 是不是服务器访问不了google的原因?这里提交才报reCAPTCHA incorrect ! 还是啥原因?在.env文件配合了密钥了 还有在哪里配置吗?求解答 谢谢
/ if ($validator->fails()) {
return response()->json(
['status' => 500, 'msg' => 'reCAPTCHA incorrect !']
);
}/
我把控制器这代码注释了 是能接收到留言的 但也是会报reCAPTCHA incorrect这个错误??是哪里配置的原因呢?博主
@小曾 更新了最新的,使用 reCAPTCHA v3,不填写不会报错。
看一下