建站 on 醉后的星星

Hugo博客搭建及stack主题设置

Sun, 06 Jul 2025 08:38:00 +0000

安装Hugo

Hugo有标准版、扩展版（extended），还有一个部署版（extended_withdeploy）,扩展板多了图像和Sass处理器，部署版支持直接部署到google、AWS云等。

直接下载扩展版：https://github.com/gohugoio/hugo/releases/

解压后将hugo.exe目录添加到全局环境变量中。

新建站点

hugo new site quickstart

初始化git

git init

hugo命令见官方指南：https://hugo.opendocs.io/getting-started/

安装主题

hugo主题网站：https://themes.gohugo.com.cn/

这里使用stack主题：https://stack.jimmycai.com/

安装主题

直接使用git命令或者手动下载放到themes目录下

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

主题设置

stack主题设置参考：https://stack.jimmycai.com/config/

以下本站设置：

baseURL = 'http://kizx.gitee.io/'
languageCode = 'zh-cn'
title = '醉后的星星'
theme = 'hugo-theme-stack'
copyright = 'kizx'
DefaultContentLanguage = 'zh-cn'


[params]
favicon = "/favicon.ico"

[params.sidebar]
#compact = true
emoji = '🔞'
subtitle = "我好菜啊"
avatar.enabled = true
avatar.local = true
avatar.src = "img/avatar.gif"

[params.Footer]
since = 2019
#customText = ""

[params.Article]
headingAnchor = true
math = true
readingTime = false

[params.widgets]
homepage = [
 {type = 'search'},
 {type = 'archives'},
 {type = 'tag-cloud'},
]
page = [
 {type = 'toc'},
 {type = 'categories'},
]

[params.opengraph]
twitter.site = "kizx"
twitter.card = "summary"
enabled = true
src = "img/default.jpg"
local = true

[menu]
[[menu.social]]
identifier = 'github'
url = 'https://github.com/kizx'
params.icon = 'brand-github'

[[menu.social]]
identifier = 'bilibili'
url = 'https://space.bilibili.com/22411920'
params.icon = 'brand-bilibili'

左侧菜单页设置：

直接将hugo-theme-stack\exampleSite\content\page拷贝到网页的content\page中

需要出现在菜单栏中的页面通过在md文件的Front Matter中添加：

menu:
 main:
 name: title (optional)
 weight: -90
 params:
 icon: icon-name

或者直接在配置文件中添加，但在配置文件中添加会缺少当前惨淡选中高亮显示。

参考

使用hugo stack主题快速搭建博客

【Hugo】配置 (stack 主题)

图标下载

如何用 GitHub Pages + Hugo 搭建个人博客

阿里云OSS自动上传部署静态网站

Sat, 29 May 2021 13:44:00 +0000

准备

现要利用阿里云OSS部署一个静态网页，通过本地编译生成静态网页后实现自动上传更新部署。

首先开通阿里OSS服务，然后新建一个存储桶，权限设为公共可读，地域选择香港，因为国内域名需备案。
去存储桶基础设置->静态页面设置首页为index.html；然后去传输管理->绑定域名，最后去DNS设置cname，也可以自行配置CDN加速。
然后去阿里云控制台新建一个RAM访问控制用户，记住accessKeyId和accessKeySecret，然后为该用户添加OSS权限。

本地上传代码

本地安装npm i ali-oss -D，我们要实现将本地dist目录下所有的文件原封不动的上传至OSS上，为了保持OSS文件清洁，上传前最好先清空OSS，最终代码如下。

const OSS = require("ali-oss");
const path = require("path");
var fs = require("fs");

const client = new OSS({
 region: "oss-cn-hongkong",
 accessKeyId: "xxxxxxxxxxxx",
 accessKeySecret: "xxxxxxxxxxxx",
 bucket: "xxxxxx",
});

async function list() {
 try {
 let result = await client.list();
 result = result.objects || [];
 let file_list = result.map(i => i.name);
 return file_list;
 } catch (err) {
 console.log(err);
 }
}

async function deleteMulti(filelist) {
 try {
 let result = await client.deleteMulti(filelist, {
 verbose: true,
 });
 console.log("deleted:\n", result.deleted);
 } catch (e) {
 console.log(e);
 }
}

async function put(filename) {
 try {
 let result = await client.put(
 filename.slice(5).replace(/\\/g, "/"),
 path.normalize(filename)
 );
 console.log("upload: ", result.name);
 } catch (e) {
 console.log(e);
 }
}
function getAllfiles(dir, filelist) {
 let files = fs.readdirSync(dir);
 files.forEach(file => {
 let filepath = path.join(dir, file);
 let stat = fs.statSync(filepath);
 if (stat.isFile()) filelist.push(filepath);
 if (stat.isDirectory()) {
 filelist = filelist.concat(getAllfiles(filepath, []));
 }
 });
 return filelist;
}
async function main() {
 const file_list = await list();
 console.log("quire result:\n", file_list);
 if (file_list.length > 0) {
 await deleteMulti(file_list);
 }
 let files = getAllfiles("./dist", []);
 files.forEach(file => {
 put(file);
 });
}
main();

运行结果

参考

https://help.aliyun.com/document_detail/32068.html?spm=a2c4g.11186623.6.1058.42b92a220SHC2F https://help.aliyun.com/document_detail/39630.html?spm=a2c4g.11186623.6.666.1b263331Q5jiQY

Onedrive云盘程序——OneManager小白设置指南

Sun, 24 May 2020 08:06:00 +0000

OneManager是什么

这是一个利用微软onedrive api将onedrive目录映射成一个云盘的程序，类似的程序有很多，比如OneIndex、Pyone、OnePoint等等。这个程序的特点是支持多种onedrive类型，可以部署在vps，heroku，以及腾讯云scf上。 [button color=“info” icon="" url=“https://github.com/qkqpttgf/OneManager-php” type=""]项目地址[/button] [button color=“info” icon="" url=“https://pan.2bboy.com/” type=""]我的Demo[/button]

部署教程

参考项目readme说明，网上一些博客也有不少教程，这不是本文的重点，本文主要讲的是部署好后的设置问题。部署成功后在设置->首页里添加相应的盘，可以添加多个盘，同一个盘也可以添加多次。

平台变量

登录后，在管理>设置里有一些自定义设置，有些人不清楚这些设置是干嘛的，这可以理解，毕竟项目的说明写的太简单了。注意本文的操作都是针对程序默认主题来说的，其他主题由于是第三方人员开发，不保证所有功能都能正常使用。

adminloginpage

自定义登录地址，设置后就会隐藏登录按钮(有些主题本来就没有登录按钮)，登录时需要手动在网盘地址后加上?你设置的值进行登录。比如设置为abc，那么你只能通过http://xxx.com/xxx?abc地址来登录。所以一旦设置就要记住你设置的值，不然连你自己也没法知道登录地址那就麻烦了。这个设置是为了防止别人通过默认的登录界面尝试登录你的网盘，设置本项后只要猜不到登录界面，即使别人知道登录密码也没用，多一道防护墙，让网盘更安全。

autoJumpFirstDisk

设置点击网盘标题时跳转到绑定的第一个盘还是当前绑定的网盘根目录。

background

自定义背景图片，填入一个图片的url地址，因为图片加载通常需要更多时间，为了速度考虑不建议放入大体积图片。

backgroundm

手机端显示的背景图片地址。

customCss

设置自定义css的地方，这里设置的css会作用于网盘所有页面。比如我想隐藏语言选项框：

<style>.changelanguage{display:none}</style>

同时隐藏复制下载链接按钮

<style>.file button{display:none}.changelanguage{display:none}</style>

customScript

设置自定义js，会作用于所有页面。比如设置http重定向到https：

<script type="text/javascript">
 var targetProtocol = "https:";
 if (window.location.protocol != targetProtocol)
 window.location.href = targetProtocol + window.location.href.substring(window.location.protocol.length);
</script>

customTheme

通过url的方式引用html主题，比如你可以通过设置下面的地址来使用我的主题。

https://cdn.jsdelivr.net/gh/kizx/onemoe-theme/onemoe.html

disableChangeTheme

设置为1后游客浏览时将不显示右下角的主题切换功能。

disableShowThumb

设置为1后将不显示缩略图的按钮和功能，对于云函数用户来说，建议设为1来关闭该功能，因为该功能可能点一下就是一分钱。

hideFunctionalityFile

设置为1后，游客浏览网盘时就会看不到read.md，head.md，head.ofm，foo.omf这些文件，这些文件是干嘛的后面会说。

passfile

设置密码文件名，比如这里设置为password.txt，那么在某一个目录下新建一个password.txt文件，其中写入密码，这样任何人在浏览这个网盘目录时都需要输入相应密码后才能访问。

sitename

设置网站名称。

theme

切换主题。

timezone

设置时区，国内可设置为8。

每个盘独立变量

diskname

多盘在网盘界面显示的名称。

domain_path

当绑定多个域名时，可以使不同域名打开时访问不同目录。当然如果你只有一个域名也可以用，通过这种方式可以使当前域名访问一个指定子目录，和后面的public_path起到一样的作用。下面是两个域名的设置方法，中间用|隔开，如果有多个域名只设置一个域名时，未设置的域名好像也会只访问该目录，要访问根目录dirname设置为/。

domain1.com:/dir1name|domain2.com:/dir2name

downloadencrypt

设置为1时启用该功能，这样在设置了密码的目录下的文件虽然无法在网页端浏览，但可以通过具体的文件链接进行下载。

guestup_path

设置图床路径或者叫游客上传路径，设置后游客只能看到上传按钮看不到目录下的文件。

public_path

设置该盘的显示的根目录，默认为/，换个说法就是可以显示指定的文件夹，默认显示全部。比如我们只想将网盘下的public文件夹内容作为网盘，可以设置为/public/。有了这个功能，即使只有一个onedrive账号，我们也可以通过重复绑定同一个账号来生成多盘，然后每个盘的public_path设置为不同的路径，这样可以将一个盘的功能分开。

还有一种特殊情况是我既想让游客上传文件，又想让游客看见上传后的文件目录，目前就只能通过这种方法将该目录设置到两个盘，一个盘作上传，一个盘作目录展示。

进阶设置

设置网站ico图标

将favicon.ico图片放在网盘根目录下，~~如果你设置了多盘的的话，则需要在每个盘的根目录下都放置一个favicon.ico文件~~，新版的html主题只需要在绑定的第一个盘下面设置就行了。当然你也可以在customCss或customScript中进行全局设置：

<link rel="icon" href="https://cloud.tencent.com/favicon.ico" type="image/x-icon">
这里我使用了腾讯云的网站图标，你应该改为自己的favicon.ico图片地址。

刷新自动切换背景图片

这个是通过设置特殊的图片api来实现的，这些api每次刷新都会返回一张不同的图片，将后台background设置为这些api的url即可。网上类似的api有很多，以下是群友收集的免费图片api：

https://api.ixiaowai.cn/api/api.php (二次元动漫)
http://www.dmoe.cc/random.php（二次元随机图）
https://api.ixiaowai.cn/mcapi/mcapi.php （menhera酱）
https://api.ixiaowai.cn/gqapi/gqapi.php （风景）
https://acg.yanwz.cn/wallpaper/api.php（二次元随机图）

利用index.html设置自定义页面

如果一个目录下有名为index.html的文件，则直接显示该文件，可以利用这个功能设置一个自定义页面或者用于隐藏一个特定页面，相当于部署了一个静态页面。

设置顶部和底部说明文字

在需要展示顶部说明的目录下新建一个head.md文件，在文件里写入说明内容即可，这是一个markdown文件，可以使用markdown语言进行书写。底部说明说明文字对应的是readme.md文件，规则与顶部文字一样。

利用head.omf设置一言

head.omf作用和head.md一样，区别是他不支持markdonw语言，但是支持html语言，可以写入html、css、js内容。在想展示一言的目录新建head.omf文件，然后写入以下内容：

<p id="hitokoto">:D 获取中...</p>
<script>
 fetch('https://v1.hitokoto.cn')
 .then(response => response.json())
 .then(data => {
 const hitokoto = document.getElementById('hitokoto')
 hitokoto.innerText = data.hitokoto
 })
 .catch(console.error)
</script>

以上是使用了https://developer.hitokoto.cn/ 的一言接口，你也可以尝试更换其他接口或者自建接口。

利用foot.omf设置Valine评论

使用Valine需要先注册LeanCloud并实名认证，然后新建应用获取AppID和AppKey。具体过程参考：https://valine.js.org/quickstart.html 然后新建foot.omf，写入以下内容（注意填入替换自己的AppID和AppKey）：

<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div id="vcomments"></div>
<script>
 new Valine({
 el: '#vcomments',
 appId: '你获取的AppID',
 appKey: '你获取的AppKey'
 })
</script>

ps: 上面的js用的是unpkg的cdn，国内速度完全不行，建议改用jsdelivr的cdn

<script src='//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>

展示Demo见：https://pan.2bboy.com/home/

如果对样式不满意，建议直接在omf文件写css美化。

设置动态背景

这里的动态背景指我们经常在一些网页见到的那种下雪、粒子线条、彩条等动态背景，一般是通过js实现的，可以自己在网上找找现成的教程，js我不会，这里只展示一种我找到的动态彩条背景。我将下面的代码写在了foot.omf中，可以访问 https://pan.2bboy.com/home/test/colored-ribbon/ 查看其效果。

<script size="90" alpha="0.5" zIndex="0" src="https://pan.2bboy.com/ppx/test/ribbon.js" type="text/javascript" charset="utf-8"></script>

其中最重要的是 ribbon.js 这个js文件，我将他放在网盘目录下，你应该下载该文件放在自己的云空间里，然后替换引用的地址。如果将代码放在omf文件里则只能在当前目录有效果，设置在后台的customScript中就可以全局生效了。

当然只要你懂点js，利用omf文件可以玩出很多东西，比我这里有一些示例：https://pan.2bboy.com/home/test/

美化自定义登录页面

修改common.php相应地方，添加style和br

$html .= '
 <style>body{background-image:linear-gradient(60deg,#343b44 0%,#485563 100%);background-attachment:fixed;color:#343b44}body>div{position:absolute;text-align:center;background-color:rgba(221,221,221,.5);border-radius:20px;width:75vw;max-width:500px;height:350px;margin:auto;top:25%;bottom:50%;left:0;right:0}body>div:hover{box-shadow:3px 3px 6px 3px rgba(0,0,0,.3)}h4{font-size:40px}input{font-size:20px;margin:2%auto;border:#343b44 2px solid;border-radius:10px;padding:10px;height:50px;text-align:center}input:last-of-type{color:#343b44;height:50px;width:80px;font-weight:800}input:hover:last-of-type{cursor:pointer;color:#ddd;background-color:#485563}</style>
 <body>
 <div>
 <center><h4>'.getconstStr('InputPassword').'</h4>
 <form action="" method="post">
 <div>
 <input name="password1" type="password"/>
 </br>
 <input type="submit" value="'.getconstStr('Login').'">
 </div>
 </form>
 </center>
 </div>
';

提示

游客上传文件时只能单个上传，不能批量上传。
由于scf的缓存系统，在scf上进行某项改动后有时候不会立马生效，或者刷新后时而生效时而不生效，只要多等一会儿，等旧缓存自己失效就好了。
php格式的主题为旧版主题，许多功能不支持，html格式的主题为新版主题，不同主题的作者更新频率和支持功能都可能不同，功能测试请以最新版本的默认主题为准。

使用百度统计和百度搜索为网站增加小功能

Thu, 21 May 2020 06:13:00 +0000

百度统计平台：https://tongji.baidu.com/web/28991244/welcome/login

其实对于个人网站来说，统计功能也就是看个乐，不过说实话百度的统计功能至少看起来还不错。

使用方法：在管理页面找到代码获取，handsome主题在后台将获取到的代码粘贴到自定义head里就行了，反正就是放在网站所有页面的head标签前，获取代码的地方有安装方式和检测是否安装成功的按钮。

而且百度统计还有高级统计代码，针对一些特别站点的特别功能，我是用不上也不会用啦。

小应用功能

在应用功能里可以看到一些应用功能，这才是百度统计有趣的地方。

置顶工具

开通后会在网站右下角出现一个返回顶部的按钮，当然大部分主题基本都有这个功能了，不过不失为一种添加返回顶部按钮的方法

地图名片

开通后会在网站右下角出现，但我试了由于包含非https请求地图没显示出来，不过这功能感觉一般人也用不到。

反馈工具

添加后在网站右下角添加一个建议反馈的功能，这个功能经常能在一些文档页面能看到，感觉还是很不错的，但是我试了收不到邮件(╯°A°)╯︵○○○。

专题推送

类似公告功能，可以推送一个指定页面或一张二维码，如果有微信公众号的话挂个二维码在这里不错。

百度推荐

应该是一个类似随机文章推荐的功能，可以像弹窗广告一样弹出来，看起来很有意思不过我没开通成功。φ(￣?￣o)

百度搜索

这是一个由百度提供的网站页面搜索工具：https://ziyuan.baidu.com/cse/wiki/index?category_id=17 可以在网站页面提供一个搜索框，搜索框可以是浮动的，也可以是嵌入页面的，点击搜索后会跳转到一个类似百度搜索的页面，这些页面都是可以进行一定自定义的，使用起来很方便，如果你的网站还没有搜索功能的话，用这个也不是不可以，很多论坛的搜索功能就和这个有点像。不过默认生成的链接包含http链接，https站点需要想办法将中间的链接替换下。

利用腾讯云SCF免费搭建自己的一言API接口

Thu, 16 Apr 2020 14:11:00 +0000

通常我们如果想要搭建一个API服务，最起码都需要一个服务器，但是即使是最便宜的虚拟主机价格也不一定便宜，而且就算你会用自己的语言写API接口，服务器的响应环境配置也是相当麻烦。而利用云函数则完美避开了这些坑，腾讯云函数的免费额度个人用的话基本等于免费。关于云函数的使用我之前也略微了解过，下面就用Python搭建一个简单的一言API接口来实际操作下。 [post cid=“143” /]

搭建过程

首先新建函数，这里我选择python3.6环境函数创建完成后，去触发方式里添加一个触发方式，这里要保持默认不勾选集成响应，因为我们返回的不是网页触发方式创建后会生成一个链接，这个链接就是我们的API接口，现在点击这个链接应该会返回"Hello World" 下面我们开始写我们自己的函数，如果你看了官方文档会本地部署的话，比如用vscode云函数插件，可以用插件把当前项目下载到本地，不会本地的话直接在网页上操作也是可以的。新建一个yiyan.py和yiyan.txt

import random


def yiyan():
 with open("yiyan.txt", 'r', encoding='utf-8') as f:
 lines = f.readlines()
 line = random.sample(lines, 1)[0]
 line = line.strip()
 return line


if __name__ == "__main__":
 print(yiyan())

yiyan.txt里写入所有一言语句，比如我写的燕双鹰语录

你太情绪化，也不大冷静，不习惯用大脑思考问题。
在行动面前，语言永远是苍白无力的。
老子是你祖宗！
我说过，你们会付出十倍的代价！
为什么总有人觉得自己能够杀得了我？
恐吓是最低级的手段，是外强中干的表现。
你通常都会把自己爱的人，引进伏击圈吗？说实话，这种表达爱情的方式太与众不同，也太令人毛骨悚然了你的心！
不要再大喊大叫了，心疼心疼自己可怜的肺吧！
你喜欢死吗？
不要做个破坏气场的人，这样会受到自然的惩罚。
我会让你看到自己的脑浆。
回答我！
我总是很快。
谁要低估女人的能力，一定吃大亏！
要站在敌人的背后，让敌人变成睁眼瞎。
能够让你轻易背叛的，绝不是你真正的信仰。
即使你拿枪对准了我的后背，我也可以在一秒钟之内让你看到自己的脑浆。
你没听到我说的话吗？
我赌你的枪里没有子弹。
谁要是低估女人的能力，一定会吃大亏！
手段并不能说明什么，只有目的才能分得出正义和邪恶。
小心背后啊。
一个善良的人，不管他的信仰是什么，也不管他是不是有信仰，至少会做出善良的事情。
不要制造自己解决不了的麻烦，也不要许下无法兑现的诺言。
自信总不是坏事，只要不是盲目的。
意志并不是空穴来风，想有就有，那里面闪烁着正义和人性的光芒。
不要用枪指着我的头，否则你会看到自己的脑浆！
这一点已经不重要了。
别让我再说第二遍。
你的眼睛会欺骗你，你的直觉会误导你，只有心才是最可靠的！
你信不信，我可以在一秒钟内让你看到自己的脑浆！
你只需要知道，我所知道的比你们知道的要多得多！
你已经死了，死人能杀人吗？
你真的不会讲故事！
这种死法，真的是很惨。
我有个习惯，会杀死向自己开枪的人，哪怕他的枪里没有子弹。
速度不是靠双臂和力量达到的，而是靠心。
我的枪口再低半寸，你们就会看到自己老大的脑浆！
这种试探才可怕是在拿自己弟兄的生命开玩笑，这种不信任更加可怕很难想象今后你我双方能够精诚合作。
你相信自己的眼睛吗？有时眼睛会欺骗你。
像你这样的人要怎么改变，嗯？你不会改变，只有死！
休息是养精蓄锐，睡觉则是懒惰松散！

然后重写index.py

# -*- coding: utf8 -*-
import logging
from yiyan import yiyan
logger = logging.getLogger()


def main_handler(event, context):
 result = yiyan()
 logger.info(result)
 return result

上传部署或者点击完成后，点击测试或者打开前面生成的API链接，应该就可以返回一言了

自定义域名

这个默认链接太长了，我们可以自定义域名。回到上面的触发方式那里，点击这个服务名点击自定义域名，然后点击新建根据页面提示自行添加域名解析，如果选择https的话，还需要自行添加证书，建议在腾讯云申请证书，这样就不用再添加一遍证书密钥什么的了，最后别忘了自定义路径映射，否则访问链接都得带/release/样的后缀现在我们访问[域名]/[云函数的名称]（比如http://api.2bboy.com/api）就能访问到你的一言啦！如果你不想要后面这个云函数的名称或者想换一个，还是那个服务界面，选择管理API，点击编辑就能自定义后缀了，修改后按照提示下一步然后重新发布就行了，现在就能通过http://api.2bboy.com/访问了

OneDrive-OneManager云盘程序onemoe主题

Wed, 19 Feb 2020 13:28:00 +0000

假期刚看了一点css教程，就花了两个晚上给onedrive-OneManager重新写了个样式当作练手了，本来是想在原有的基础上做一点美化，但程序原样式都是内部样式，而且还有许多内联样式，改起来超级麻烦，所以干脆就从头开始重写了。

下载地址

[scode type=“green”]下载地址[/scode]

预览

[scode type=“green”]在线预览[/scode] 虽然本人的审美不咋地，但是原主题那个超大的圆角我已经忍了很久了┻━┻ ヘ╰( ??ε?? ╰)，主题的配色我不是很懂，你要是不喜欢反正在我css的基础上改起来也简单。

使用说明

[tabs] [tab name="~~旧版本~~"]

简单点就是直接把下载的onemoe.php复制到theme文件夹下然后网站后台切换主题即可。
我的onemoe.php其实是在classic.php基础上改的，本着尽量不改动内部的原则（其实是我不会php,另一个是改动的越少主程序更新时就修改的越少），改动的地方是把head里所有内部样式删除，然后替换成下面这句。 <link rel="stylesheet" href="[onemoe.css的地址]" type="text/css" />
更新多盘后发现多了个div不好定位，无奈只好在内部加了两个onemoe的class，一个位于底部readme，一个位于多盘位置，另外删除了文件大小和时间两个标题的内联样式。所以如果你用这个主题出现什么问题，除了显示样式上的问题，其余的bug肯定与我无瓜。
现在我把onemoe.css文件放在我的网站上并提供了百度cdn加速，如果你想修改主题配色什么的，可以直接在我的css上进行修改，然后把你修改的css文件放在自己的onedrive目录或者别的cdn处，然后把上面的链接替换下就可以了，主题更新时同理也只需把新的css文件链接替换下就行。 [/tab] [tab name=“新版本” active=“true”]
程序已内置本主题，后台切换主题即可使用。
或者可以手动下载onemoe.html放在程序theme文件夹下后台启用主题，以此来获取最新主题。
本主题只是基于classic主题的css重写，并未改动原主题任何主体内容。
css文件默认从 https://cdn.jsdelivr.net/gh/kizx/onemoe-theme/onemoe.min.css 加载，你也可以自行修改上述地址，改成自己的cdn地址。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kizx/onemoe-theme/onemoe.min.css" type="text/css" />

[/tab] [/tabs]

Typecho+Handsome主题美化

Sat, 28 Dec 2019 06:06:00 +0000

美化教程

handsome使用文档

handsome社区分享

史上最全的handsome美化，没有之一！

typecho文章挂载Bilibili视频

弹窗提醒以及个性化提示

插件

代码高亮插件Code Prettify

Typecho炫彩鼠标插件:HoerMouse

EditorMD + handsome 编辑器插件整合

WowScroll动感元素插件

WenYu特效管理插件

博主的介绍

<!--博主介绍的闪字特效-->
<span class="text-muted text-xs block">
 <div id="chakhsu"></div>
 <script>
 var chakhsu = function (r) {
 function t() {
 return b[Math.floor(Math.random() * b.length)]
 }

 function e() {
 return String.fromCharCode(94 * Math.random() + 33)
 }

 function n(r) {
 for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
 var l = document.createElement("span");
 l.textContent = e(), l.style.color = t(), n.appendChild(l)
 }
 return n
 }

 function i() {
 var t = o[c.skillI];
 c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]),
 c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP],
 c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP >
 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c
 .direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
 Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
 } /*以下内容自定义修改*/
 var l = "",
 o = ["我好菜啊"].map(function (r) {
 return r + ""
 }),
 a = 2,
 g = 1,
 s = 5,
 d = 75,
 b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
 "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)",
 "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)",
 "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
 ],
 c = {
 text: "",
 prefixP: -s,
 skillI: 0,
 skillP: 0,
 direction: "forward",
 delay: a,
 step: g
 };
 i()
 };
 chakhsu(document.getElementById('chakhsu'));
 </script>
</span>

左侧边栏导航

{"name":"留言板","class":"iconfont icon-liuyan","link":"https://www.2bboy.com/guestbook.html","target":"_self"},
{"name":"动态","class":"iconfont icon-dongtai2","link":"https://www.2bboy.com/cross.html","target":"_self"},
{"name":"归档","class":"iconfont icon-rili2","link":"https://www.2bboy.com/file.html","target":"_self"},
{"name":"追番","class":"iconfont icon-pgc_bangumi","link":"https://www.2bboy.com/bangumi.html","target":"_self"},
{"name":"云盘","class":"iconfont icon-yun","link":"https://pan.2bboy.com/Public"},
{"name":"home","status":"hide"}

顶部导航

{"name":"bilibili","class":"iconfont icon-bilibili-fill","link":"https://space.bilibili.com/22411920"},
{"name":"github","class":"iconfont icon-github","link":"https://github.com/kizx"},
{"name":"steam","class":"iconfont icon-steam","link":"https://steamcommunity.com/id/kizxmoe"},
{"name":"talk","status":"hide"}

时光机社交按钮

{"name":"微博","class":"fontello fontello-weibo","link":"https://weibo.com/u/5938819173"},
{"name":"github","class":"fa fa-github","link":"https://github.com/kizx"},
{"name":"gitee","class":"fa fa-git","link":"https://gitee.com/kizx"},
{"name":"steam","class":"fa fa-steam","link":"https://steamcommunity.com/id/kizxmoe"},
{"name":"bilibili","status":"single","link":"https://space.bilibili.com/22411920"},
{"name":"网易云","status":"single","link":"https://music.163.com/#/user/home?id=111496719"},
{"name":"bangumi","status":"single","class":"fa fa-heartbeat","link":"http://bangumi.tv/user/305237"}

pjax回调函数

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
 tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
 tag.style.backgroundColor = tagsColor;
});
<!--代码高亮-->
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
<!--复制提示-->
kaygb_copy();

博客底部左侧

<div class="github-badge">
<a href="./" title="?2019 kizx">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">?2019 kizx</span>
</a>
</div>
 |
<div class="github-badge">
<a href="http://beian.miit.gov.cn" target="_blank" title="陕ICP备19016973号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">陕ICP备</span><span class="badge-value bg-green">19016973号</span>
</a>
</div>

博客底部右侧

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="Handsome主题" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

自定义css

/* 首页文章列表悬停上浮 */

.blog-post .panel:not(article) {
 transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
 transform: translateY(-10px);
 box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

/* 头像呼吸光环和鼠标悬停旋转放大 */

.img-full {
 width: 100px;
 border-radius: 50%;
 animation: light 4s ease-in-out infinite;
 transition: 0.5s;
}

.img-square, .img-circle {
 transition: 0.5s;
}

.img-square:hover, .img-circle:hover {
 transform: scale(1.15) rotate(360deg);
}

.img-full:hover {
 transform: scale(1.15) rotate(720deg);
}

@keyframes light {
 0% {
 box-shadow: 0 0 4px #f00;
 }
 25% {
 box-shadow: 0 0 16px #0f0;
 }
 50% {
 box-shadow: 0 0 4px #00f;
 }
 75% {
 box-shadow: 0 0 16px #0f0;
 }
 100% {
 box-shadow: 0 0 4px #f00;
 }
}

/*底部页脚*/

.github-badge {
 display: inline-block;
 border-radius: 4px;
 text-shadow: none;
 font-size: 12px;
 color: #fff;
 line-height: 15px;
 background-color: #abbac3;
 margin-bottom: 5px;
}

.github-badge .badge-subject {
 display: inline-block;
 background-color: #4d4d4d;
 padding: 4px 4px 4px 6px;
 border-top-left-radius: 4px;
 border-bottom-left-radius: 4px;
}

.github-badge .badge-value {
 display: inline-block;
 padding: 4px 6px 4px 4px;
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
}

.github-badge .bg-blue {
 background-color: #007ec6;
}

.github-badge .bg-orange {
 background-color: #ffa500;
}

.github-badge .bg-red {
 background-color: #f00;
}

.github-badge .bg-green {
 background-color: #3bca6e;
}

.github-badge .bg-purple {
 background-color: #ab34e9;
}

/*Bilibili视频挂载*/

.iframe_video {
 position: relative;
 width: 100%;
}

@media only screen and (max-width: 767px) {
 .iframe_video {
 height: 15em;
 }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
 .iframe_video {
 height: 20em;
 }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
 .iframe_video {
 height: 30em;
 }
}

@media only screen and (min-width: 1200px) {
 .iframe_video {
 height: 40em;
 }
}

.iframe_cross {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 75%;
}

.iframe_cross iframe {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
}

自定义javascript

/* 彩色标签云 */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
 tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
 tag.style.backgroundColor = tagsColor;
})
/* 复制提示 */
kaygb_copy();
function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
 message: "尊重原创，转载请注明出处！<br> 本文作者：醉后的星星<br>原文链接：<br>"+sitesurl,
 title: "复制成功",
 type: "success",
 autoHide: !1,
 time: "15000"
 })
}}

自定义Head

<!--图标-->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!--分享内容-->
<meta itemprop="name" content="醉后的星星" />
<meta itemprop="image" content="https://www.2bboy.com/usr/uploads/txmk.jpg" />
<meta name="description" itemprop="description" content="我好菜啊" />
<!--百度统计-->

<!--动态标题-->
<script>document.addEventListener('visibilitychange', function () { if (document.visibilityState == 'hidden') { normal_title = document.title; document.title = '人呢？快回来！'; } else { document.title = normal_title; } });</script>

pio插件设置

{
 "welcome": ["你好，欢迎来到本站！", "有问题欢迎留言"],
 "touch": [
 "你这个绅士！",
 "别碰我！",
 "你在干什么？",
 "再摸我就报警了！",
 "HENTAI!",
 "你够了喔！",
 "萝莉是什么呀"
 ],
 "skin": ["想看看我的新服装吗？", "新衣服真漂亮~"],
 "home": "点击这里回到首页",
 "link": "https://docs.paul.ren/pio/#/",
 "referer": "Hi，欢迎来自 %t 的朋友",
 "close": "QWQ 下次再见吧~",
 "custom": [
 {
 "type": "read",
 "selector": ".post-meta>h2 a"
 },
 {
 "selector": ".music-box",
 "text": "你想听歌吗o((;=? 3? =))o～?"
 },
 {
 "selector": ".comment-form-comment",
 "text": "填写真实邮箱可以收到回复通知哦(??ω-)～"
 },
 {
 "selector": ".searchform",
 "text": "会搜索的人运气不会太差o(≧▽≦)o"
 },
 {
 "selector": ".dropdown:nth-last-child(4)",
 "text": "想关注我的bilibili频道吗"
 },
 {
 "selector": ".dropdown:nth-last-child(3)",
 "text": "人生苦短"
 },
 {
 "selector": ".dropdown:nth-last-child(2)",
 "text": "可以不玩，不能没有"
 }
 ]
}

利用windows自带的网络位置进行ftp登录

Sun, 15 Dec 2019 06:21:00 +0000

使用方法

打开我的电脑，空白处右键添加网络位置，点下一步然后参照示例添加ftp地址后面就是设置些名称和登录密码，总之要啥填啥就是了，然后就可以点击资源浏览器里新添加的网络位置来连接了。 [scode type=“blue”]其实这就是个快捷方式，在资源管理器地址栏直接输入ftp地址就可以直接登陆。另外，在浏览器里直接输入ftp地址也是可以进行访问的。[/scode]

利用QQ机器人发送时光机

Fri, 15 Nov 2019 12:38:00 +0000

现在handsome主题已经有了微信公众号和浏览器拓展两种方式向时光机发送消息，那么自然就想到QQ端是否也可以做到，所以我就通过对浏览器扩展发送时光机进行抓包，然后基于酷Q和nonebot，实现了通过向QQ小号发送消息的方式向时光机发送消息。 [scode type=“share”]代码见github[/scode]

使用方法

和微信公众号的用法大同小异，所有消息需要私聊机器人

发送帮助时光机查看帮助信息发送绑定然后根据提示输入绑定信息，发送解绑取消绑定发送时光鸡然后根据提示输入你要发送的消息（也可以一次性输入时光鸡你要发送的消息中间加空格即可）发送开始然后可以逐条发送消息，发送结束结束混合消息，发送取消取消发送发送的第一条消息如果以#开头即为私密消息发送博客获取博客地址发送图床更改图床

如有需要，可以直接加群体验我已经搭建好的QQ机器人 [button color=“success” icon=“fa fa-qq” url="//shang.qq.com/wpa/qunwpa?idkey=786f97195ca56ef0a1888eef7e803fabee0b70cb01d6dbf0c2295454797d803b"]QQ群 642739195[/button]

已知问题

由于QQ可以在一条消息里同时塞进文字和图片，所以发送单条消息也可以达到混合消息的效果，但经我测试在QQ手机客户端如果一条消息同时包含文字和图片，那么图片会无法解析，但是电脑的TIM客户端不存在这个问题。这个问题出在酷Q上，所以要同时发送文字和图片，在手机客户端最好采用逐条发送的模式。
由于handsome_6.0对上传的图片进行了压缩，所以上传gif图片会被压缩成jpg图片，因此图片增加图床功能并默认采用QQ图片的源地址，省去了下载和上传操作，速度更快，但QQ源图片腾讯可能采取限制而无法引用，而且目前已知腾讯对这些图片的缓存会过一段时间就清掉，所以QQ源图床慎用。最好的当然是接入自己的图床，暂时先懒得弄。

安装方法（Windows）

你可以先在自己的电脑上安装和熟悉使用

1. 准备

所有需要下载的东西已打包->点击下载因为是基于酷Q和Python运行的，所以需要先安装酷Q Air->下载地址，然后打开酷Q，登陆你的作为QQ机器人的QQ小号，熟悉酷Q的使用，尤其是插件的安装和启用，酷Q论坛里也有许多其他插件可供玩耍。然后下载安装python，建议下载安装Python 3.7.x 32位版本，因为我是基于这个版本开发的，别的版本尤其是最新的3.8版本可能会有未知的不兼容的bug。安装的时候记得勾选环境变量。

2. 安装插件

这里可以参考CoolQ HTTP API官方说明将io.github.richardchien.coolqhttpapi.cpk移动至酷Q的app文件下，然后重启酷Q或者在应用管理里重载应用，在应用管理里选中HTTP API插件，点击启用，接下来几个弹窗统统选是。启用成功后会弹出控制台窗口。 [scode type=“yellow”]如果弹窗提示应用加载失败，先安装[ Visual C++ 可再发行软件包]( Visual C++ 可再发行软件包)[/scode]

3.启用nonebot

这里可以参考Nonebot官方说明如果你之前成功开启了插件，那么酷Q的data/app/io.github.richardchien.coolqhttpapi/config/目录中应该已经有了一个名为 .json 的文件（为你登录的 QQ 账号），修改其中的内容如下： [collapse status=“false” title=“json文件内容”]

{
 "host": "[::]",
 "port": 5700,
 "use_http": true,
 "ws_host": "[::]",
 "ws_port": 6700,
 "use_ws": false,
 "ws_reverse_url": "",
 "ws_reverse_api_url": "ws://127.0.0.1:8080/ws/api/",
 "ws_reverse_event_url": "ws://127.0.0.1:8080/ws/event/",
 "ws_reverse_reconnect_interval": 3000,
 "ws_reverse_reconnect_on_code_1000": true,
 "use_ws_reverse": true,
 "post_url": "",
 "access_token": "",
 "secret": "",
 "post_message_format": "string",
 "serve_data_files": false,
 "update_source": "github",
 "update_channel": "stable",
 "auto_check_update": false,
 "auto_perform_update": false,
 "show_log_console": true,
 "log_level": "info"
}

[/collapse]

然后下载找到我写的coolq-cross-bot文件，用python运行该文件夹下的bot.py文件，运行前要先安装依赖库。

[tabs] [tab name=“运行方式” active=“true”] 打开命令提示符窗口，执行以下命令：

pip install nonebot
pip install aiohttp

然后在控制台进入coolq-cross-bot文件夹内，输入python bot.py运行该文件，当然也可以用IDE运行。 [/tab] [/tabs] [scode type=“yellow”]阿里云服务器如果一直卡在下载图片且ping不通c2cpicdw.qpic.cn可能是因为节点问题，需添加host记录113.96.232.144 c2cpicdw.qpic.cn [/scode] 最后重启酷Q软件或者重载插件，弹出来的控制台如下显示成功字样则代表配置成功，这时你就可以私聊机器人发送初始化创建一个数据库后就可以使用了（初始化命令只需执行一次，用于在文件目录下新建bind_info.sqlite文件用于记录绑定信息）,最后要注意两个控制台窗口都不能关闭，你可以选择新建一个桌面单独用于运行他们。

安装方法（Linux）

详细参考：CoolQ HTTP API官方说明 Linux系统需要在docker中运行酷Q，所以要先安装docker，安装教程请自行百度，以下仅供参考，以我的Ubuntu16.04 64位为例，ssh连上服务器后运行以下命令安装docker

$ curl -fsSL https://get.docker.com -o get-docker.sh
$ sudo sh get-docker.sh

然后安装酷Q和HTTP API插件（配置参数无所谓，后面手动替换）

$ docker pull richardchien/cqhttp:latest
$ mkdir coolq # 用于存储 酷Q 的程序文件
$ docker run -ti --rm --name cqhttp-test \
 -v $(pwd)/coolq:/home/user/coolq \  # 将宿主目录挂载到容器内用于持久化 酷Q 的程序文件
 -p 9000:9000 \  # noVNC 端口，用于从浏览器控制 酷Q
 -p 5700:5700 \  # HTTP API 插件开放的端口
 -e COOLQ_ACCOUNT=123456 \ # 要登录的 QQ 账号，可选但建议填
 -e CQHTTP_POST_URL=http://example.com:8080 \  # 事件上报地址
 -e CQHTTP_SERVE_DATA_FILES=yes \  # 允许通过 HTTP 接口访问 酷Q 数据文件
 richardchien/cqhttp:latest

然后访问 http://[你的服务器IP]:9000/ 进入 noVNC（默认密码 MAX8char），登录酷Q，即可开始使用（插件已自动启用，配置文件也根据启动命令的环境变量自动生成了） [scode type=“yellow”]如果阿里云主机注意要先开放相应的端口，默认是9000端口[/scode] 把coolq-cross-bot文件夹上传至服务器，将之前的json文件也上传至服务器并替换掉app/io.github.richardchien.coolqhttpapi/下的ini配置文件（注意将配置文件中127.0.0.1换成172.17.0.1），然后用python3命令运行文件下的bot.py，重启插件

进阶自定义修改（可选）

1. 自定义命令

其实时光机的触发命令不仅可以是‘时光机’，也可以是‘时光鸡’、‘时光姬’等，具体可以在 coolq-cross-bot/plugins/handsome/timeji.py 源码中找到类似下面的语句自行进行修改。 @on_command('timeji', aliases=('时光鸡', '时光机', '时光姬', '动态', '说说')) 其他命令类似。

2. 添加消息来源

如上图所示，在时光机消息的来源处，如果不对handsome的源码进行修改，就会显示来自未知浏览器，找到handsome/libs/UA.php文件，在文件的最后加入如下所示的QQ的来源，名称可以自定义。

public function returnTimeUa(){
 if ($this->ua == "weixin" || $this->ua == "weChat"){
 return array("title"=>_mt("微信公众号"),
 "icon"=>"compass");
 }elseif ($this->ua == "crx"){
 return array("title"=>_mt("Chrome扩展"),
 "icon"=>"chrome");
 }elseif ($this->ua == "qq"){
 return array("title"=>_mt("QQ时光姬"),
 "icon"=>"compass");
 }else{
 $ua = $this->returnOS();
 $ua["icon"] = "disc";
 return $ua;
 }
 }

3.添加消息来源前的图标（6.0主题不需要了）

主题默认呈现出来的都是清一色的小圆点图标，要更改消息来源前的小图标，首先要添加fontawesome图标，然后找到handsome/component/say.php，找到下面第一条语句，改成第二句。

# 找到下面这一句
<i class="glyphicon glyphicon-record m-l-sm"></i>&nbsp;
# 改成下面这样
<i class="<?php echo $ua->returnTimeUa()['icon'] ?> m-l-sm"></i>&nbsp;

OneDrive使用指南

Mon, 23 Sep 2019 03:35:00 +0000

1. 获取5T空间

OneDrive当云盘的好处是不限速，但实际速度并不会跑满带宽，具体速度以实际情况为准，我的速度用客户端上传的话最快能跑到7M/s，网页下载配合idm的话有时能跑满带宽，还是相当给力的。其次还有一个优点就是内容不会被和谐。

但普通邮箱注册只有5G的免费空间，教育邮箱注册可以获得5T的免费空间，但一般正规教育邮箱注册只有1T的可用空间，不过1T也基本上够用了，如果没有教育邮箱可以选择花几块钱买一个5T账号省的麻烦。

注意我们这里注册的是office365的账号和微软账号通用，可以通过以下方法查看空间大小：登录到office365，进入OneDrive，选择右上角设置->OneDrive设置，继续选择其他设置->存储标准即可看到空间大小，或者打开onedrive桌面客户端也可以进行查看。

2. 桌面客户端使用

win10系统是自带Onedrive客户端的，搜索打开OneDrive并登录后，设置一个文件夹为同步文件夹。

OneDrive不同于国内的网盘，和国内的坚果云有点类似。他是一个同步云盘，同步文件夹里所有文件都是和云端同步的，上传文件只需把文件拖进同步文件夹内即可。

但由于是同步的如果本地删除文件云端也会删除，云端删除文件本地也会删除，这点就很坑了，可能国人更喜欢把云盘当一个存储资料的硬盘来使用，我本地删除了云端也没了那还存个屁啊。在这一点上国内云盘就很人性化了，单独有一个同步文件夹可供使用。

所以微软是怎么解决这个问题的呢，OneDrive有个文件随选功能，具体见官方说明通过适用于 Windows 10 的 OneDrive 文件随选节省磁盘空间。通过右键文件选择释放空间，文件就会被标注为在联机时下载使用，也就是本地就是一个快捷方式一样的东西，在打开使用这个文件时就会下载这个文件。但要注意的是如果你删除这个“快捷方式”，云端同样会删除文件，坑啊。

还有一个办法是打开OneDrive设置，找到一个同步选项，去掉你想删除的文件使其不同步，这样一来本地文件就自动删除了而云端数据仍然保留，也就是使这个文件在本地不同步。但这个做法你想要再下载这个文件的话，要么去云端再下载，要么重新勾上同步，这就有点小麻烦了。

3. 搭建云盘

使用OneDrive还有一个好处就是可以用来搭建个人云盘，也可以用来搭建个人图床，如果你有一台服务器的话，那么你可以选择OneIndex,OLAINDEX,PyOne,CuteOne等方案来部署你的个人云盘，搭建过程和你安装博客程序差不多。

如果你手头没有空闲的主机，那么也可通过下面的方式利用腾讯云的云函数服务来搭建一个。我当初是参考这个教程的：https://logi.im/back-end/scf-onedrive-filelistor.html 项目地址：https://github.com/qkqpttgf/OneManager-php 顺便说下学校教育邮箱申请的onedrive可能无法使用这个项目，好像是无法开通api的缘故，但可以用下面的方案通过分享的方式来访问。

和上面的类似，可以尝试另一个云函数网盘方案onepoint。这里是使用说明：https://www.onesrc.cn/p/onepoint-configuration-process.html

附onedrive种类示意图

Typecho主题推荐

Sun, 15 Sep 2019 14:05:00 +0000

Typecho主题推荐

1. PureLoveForTypecho

2. Pinghsu Theme

3. Rinvay Theme

4. VOID

5. ArmxMod

6. AL_lolimeow

7. DUX主题

8. Miracles

9. Typecho-Theme-RAW

10. hufman

百度云虚拟主机BCH + Typecho的一些坑

Fri, 13 Sep 2019 17:31:00 +0000

1. SSL配置

默认情况下使用SSL浏览器会提示有危险加载项，而且后台也进不去，这时只需要在后台将在目录下的 config.inc.php文件中添加一下代码即可一切正常

/** 开启HTTPS */
define('__TYPECHO_SECURE__',true);

2. 只显示首页

这个问题比较蛋疼，只有首页和后台可以显示，文章页和其他页面无法显示，点击任何文章或其他链接都只会显示首页，刚开始我还以为是安装过程出错，来回重装了好几次都还是这样，经过大量搜索查阅，都说是当前php不支持pathinfo的缘故，但我发现只要把设置里的永久链接自定义文章路径改成除默认路径以外的路径，点击文章就能够正常打开文章页了。
但问题是文章是可以显示了，还有其他页面比如下一页和分类页面还是无法跳转啊，于是我又继续研读了百度云虚拟主机的官方文档，在尝试了网上各种设置后均失败了。但经过大量尝试发现应该是网址中只要出现index.php就无法正常跳转，于是我灵机一动如果设置伪静态rewrite是不是就可以了，结果尝试了一下果然可以。设置也很简单，在后台开启地址重写，然后ftp登录网站空间，在webroot下新建bcloud_nginx_user.conf文件，并写入以下代码即可：

if (!-e $request_filename) {
rewrite ^(.*)$ /index.php$1 last;
}

参考

https://blog.csdn.net/enweitech/article/details/75108048

Hexo、WordPress、Zblog、Typecho比较

Fri, 06 Sep 2019 18:22:00 +0000

总览

方案	Hexo	WordPress	Zblog	Typecho
静态	是	否	否	否
后台	无	有	有	有
源生Markdown	是	否	否	是
操作简单	☆	☆☆	☆☆☆	☆☆☆
主题美观	☆☆☆☆	☆☆☆	☆☆	☆☆☆
风格简洁	☆☆☆	☆	☆☆☆	☆☆☆☆

评价

Hexo所有数据都在本地操作，操作完后本地生成静态页面，然后再通过git或者ftp部署上传到服务器空间，但是我试了官方的ftp插件根本就用不了，只能借助第三方的ftp工具或插件，而且上传速度还贼慢，故不建议ftp到服务器上。优点是完全静态的，故不需要数据库和任何语言运行环境，所以可以部署到github或者coding这样的免费数据托管空间。虽然Hexo对服务器的要求最低，但在本地的操作有点繁琐，需要敲一些代码，很有极客范。Hexo的主题大部分都是免费的，不乏很多漂亮的主题，我的Hexo主题搜集，Hexo的主题很时髦精致。
WordPress作为使用最广泛的建站方案，东西最多也最全，但这也造成其自身的臃肿，安装包有好几十兆，后台的操作也不是特别简洁好懂，对于追求简洁的人来说，WordPress并不是最好选择。WordPress的主题很多，但要想找到一个合适的主题并不容易，我的WordPress主题搜集。
Zblog在使用上和WordPress差不多，但是后台要更简洁明了，本身的体积也比WordPress小得多，只有几兆，运行效率据说也快得多，主题虽然不多但也很多不错的选择，而且Zblog的主题给人一种简洁感，我的Zblog主题搜集，Zblog的主题多偏向于扁平风格，不追求更多功能时在我看来是比WordPress更好地选择。
说到简介，Typecho显然更胜一筹，安装包只有几百kb大小，后台也简洁到没有一处多余功能，Typecho的主题大都也继承这种简洁风格，可供选择主题的主题还算是蛮多的，我的Typecho主题搜集，虽然简洁但也是五脏俱全，如果能懂一点网页编程的话就能更好的改造出适合自己的主题了。

Zblog主题推荐

Fri, 06 Sep 2019 17:20:00 +0000

Zblog主题推荐

1. filmlee

https://www.talklee.com/blog/162.html

2. 免费博客主题Blogs

https://app.zblogcn.com/?id=1405

3. 奇客

http://jiuwanwl.com/post/81.html

4. 博客CMS图片布局三合一主题

https://app.zblogcn.com/?id=1326

5. 业余爱好

https://app.zblogcn.com/?id=494

6. 博客模板

https://app.zblogcn.com/?id=1168

7. 简单格子列表主题

https://app.zblogcn.com/?id=877

WordPress主题推荐

Thu, 05 Sep 2019 17:19:00 +0000

WordPress主题推荐

1. Dobby

Download: https://github.com/Vtrois/Dobby

2. Git

Demo: https://gitcafe.net/
Download: https://gitee.com/yunluo/git

3. H-Siren

Demo: https://haremu.com/
Download: https://github.com/galnetwen/H-Siren

4. Kratos-pjax

Demo: https://moedog.org/787.html
Download: https://github.com/xb2016/kratos-pjax

5. lolimoe

Demo: https://www.boxmoe.com/
Download: https://github.com/baomihuahua/lolimeow

6. Sakura

Demo: https://2heng.xin/
Download: https://github.com/mashirozx/Sakura

7. Memory

Demo: http://memory.shawnzeng.com/
Download: https://shawnzeng.com/wordpress-theme-memory.html

8. Amativeness

Demo: https://diygod.me/
Download: https://github.com/DIYgod/Amativeness

Hexo主题推荐

Tue, 03 Sep 2019 17:18:00 +0000

Hexo主题推荐

双栏

1. A-ACE

Demo: http://www.sumoon.com/
Download：https://github.com/kinggozhang/hexo-theme-ace

卡片式

1. skapp

Demo: http://blog.minfive.com/
Download: https://github.com/Mrminfive/hexo-theme-skapp/blob/master/README-cn.md

2. flex-block

Demo: https://miiiku.xyz/
Download: https://github.com/miiiku/flex-block

3. Matery

4. Hueman

Demo: https://blog.zhangruipeng.me/hexo-theme-hueman/
Download: https://github.com/ppoffice/hexo-theme-hueman

5. Material Flow

Demo: https://kntan.coding.me/kntan/
Download: https://github.com/stkevintan/hexo-theme-material-flow

6. Mic

Demo: http://miccall.tech/
Download: https://github.com、miccall/hexo-theme-Mic_Theme

零基础不花一分钱建站之WordPress篇

Sat, 17 Aug 2019 17:17:00 +0000

前言

最近懒癌犯了，本来应该紧接着上一个hexo篇写的，这样也好做一个对比，但长时间不操作我也有点忘了，赶紧靠着仅存的记忆记一下wp建站的操作。

比起hexo建站，wp在操作上可以说是很简单了，但wp的功能和可玩性比hexo更强，毕竟是应用最广泛的建站方案，其主题数量和应用范围远远超过hexo，除了博客网站，各种新闻、商店、图片等网站也大量使用wp。

本篇主题为零基础不花一分钱建站，建站需要两样东西：主机空间和域名。我这里的不花一分钱主要指免费的主机空间，主机空间一般都有临时域名可以拿来用用，所以买域名的钱我就不算了，而且最便宜的域名也只要1块钱，也不算贵。

方案一：coding一键部署方案

没错还是hexo里用到的那个coding，依赖于腾讯的在线云平台cloud studio实现免费的主机空间，只需两步即可款速实现一键部署wp。

这是官方使用指南

第一步进入cloud studio从模板新建一个wordpress工作空间
第二步进入工作空间打开右侧的一键部署，点击一键部署，部署完毕后点击打开测试域名就进入到下图所示的wp的初始化界面了，然后填写相应信息网站即创建成功，数据库的信息在一键部署的资源面板里可以查到，注意信息不能填错了。

第二步补充，如果信息怎么填都不对的话，可以试试主动修改主目录下的wp-config-sample.php文件其中的四个参数，注意主机要填写 mysql.coding.io，填写好后另存为wp-config.php文件即可。
建议采用补充的方法，这样每次重新部署时就不需要重新再填一遍信息了，不过要注意相应的仓库不能公开，不然别人就知道你的数据库了。

第三步，如果你有域名的话，可以为域名添加解析，然后在一键部署面板里添加域名绑定，这样就可以用域名来访问网站了，添加解析的操作具体看官方指南这里略过。

评价

优点：操作简单无脑，在线操作不需要下载上传任何文件，只要cloud stidio不关门应该就能一直用，而且由于coding是香港服务器访问速度也比较快。

缺点：免费必然有限制，coding默认模板的wp版本较低且为英文版，没有中文，而且coding一键部署的网站不能连接外网，导致wp不能更新，更不能在线下载主题和插件，想要更新wp版本和安装主题只能单独下载新版本wp和自己喜欢的主题，然后自己在coding上新开一个仓库把自己下载解压后的wp和主题push到仓库中，然后以这个仓库为模板新建一个php环境的工作空间进行一键部署，还是比较麻烦的。

方案二：免费的网站服务器

虽然coding的一键部署很方便，但是还是有很多的限制，不如白嫖一个服务器来的实在，哎这里并不是在打广告，我之前找到一个叫强人网络的服务商，可以白嫖一年的网站服务器，凑合着玩玩还是相当不错的。注意这是真的免费而不是像国内有些服务商打着免费的旗号骗注册然后发现要免费使用还要帮它宣传，实在是太恶心了。

第一步：从wordpress官网下载最新安装包，上传到主机上，我白嫖的这个服务器有自己的控制台，所以连ftp都省了，直接从网页控制台上传压缩包然后在线解压就成了。
第二步：进入服务商提供的临时域名，后面就和方案一没差了，填写相关信息完成网站初始化，相关信息服务商应该会发邮件给你。
第三步：如果有域名的话，为域名添加解析，并在服务器控制台绑定域名，然后你就可以通过域名访问你创建的网站了。

评价：

优点：操作上由于有控制台，免去了ftp和解压的麻烦，还是相当方便的，最重要的是免费哈哈。

缺点：服务器在国外访问速度较慢，但也还能接受啦，只能免费用一年。

和Hexo比较

由于wordpress有自己的后台管理，在功能上比静态的hexo要强大不少，部署的操作上比较简单，但是部署后网站的后台维护和管理感觉会更麻烦，后台里一堆设置看得人眼花。虽然wp的主题多到数不过来，但是优秀的主题如大海捞针，而且好看的主题大部分都是收费的。从操作上我更喜欢wp，hexo每次都要部署实属麻烦，但hexo的主题我倒是更喜欢。一句话喜欢折腾搞花样的选择wp，喜欢轻便只写博客的选择hexo。

零基础不花一分钱建站之Hexo篇

Fri, 16 Aug 2019 17:15:00 +0000

前言

之前一个偶然的机会b站首页推荐了一个github+hexo建站的视频，虽然我对写博客没什么兴趣，但是对建站本身倒是很感兴趣，于是尝试做了一下，下面只宏观介绍下，不细节展开了。

建站流程

建站流程大致如下（这只是一般步骤，后面还有更简单的方案）

注册github账号并新建一个github.io仓库并进行相应设置
下载安装git并配置好ssh连接
下载安装node.js
开始建站

前两步对于大多数接触过github和git的人来说应该不难，但对于新手来说尤其是git操作其实是还蛮复杂的，但好在这方面的教程相当多，网上随便找找都是教程，b站也有很多视频教程，下面是一个写得很好的比较简洁的教程：另一个教程

后两步也可以参照下面hexo的官网步骤一步步来就好了：Hexo官方文档

视频教程的话推荐上面官方文档里的视频，视频在b站也有：官方视频教程B站链接

个人遇到的坑大概就是由于网络不佳，其中有些命令执行后在下载时经常卡住，多来几次就好了(可能需要fq)，建议命令都在git-bash里执行，cmd里可能会卡住。

然后就是让博客换个好看点的主题，官网提供了不少主题，而且都是免费的，主题的使用方法一般主题介绍里会有写。下面是官方所有主题地址：Hexo官方主题

完成上面的步骤，在浏览器里输入相应的github.io的博客网址应该就能看到属于自己的博客网站了，到这里也就大功告成了。

域名

如果你还想继续折腾的话，可以去注册一个域名，这个免费的域名我倒没见过，不过最便宜的域名也只要1块钱，去腾讯云、阿里云、百度云都可以，哪个便宜就选哪个。国内域名购买后首先需要上传身份证实名认证一下，由于github服务器在海外，备案就不需要了。然后按照教程给域名添加解析，并在github里添加绑定。如果这一趟下来无误的话，浏览器里输入你的域名就可以重定向到博客网站上了。

还有一点不得不提的就是github的国内访问速度较慢，可以使用国内的代码托管平台码云或者是coding。个人更推荐coding，因为码云免费版不支持自定义域名，要想绑定域名还得花钱升级pro版才行。而coding支持自定义域名，而且服务器在香港也不用备案。

一个更简单的方法

说到coding就不得不提一个更骚的操作，因为coding现在好像和腾讯合作，腾讯出了个cloud studio的云平台功能，可以直接用云平台码代码，这也就意味着只要我们有网络，什么环境都不用装，利用腾讯的cloud studio直接从第四步开始建站就行了，这个可以说是最简单的方法了，非常适合小白。具体教程见下面的链接，用云平台的话部署就不用hexo g命令了，因为平台已经向我们提供了一键部署的功能，具体可以看coding的帮助文档。最后在退出的时候别忘了将代码提交和推送，下次再继续写文章时前拉取一下就可以回到上次提交的进度了。

最快的 Hexo 博客搭建方法

Hexo搭配代码托管平台搭建博客网站的好处是轻量化，文章支持markdown格式，但只能搭建静态网页，没有后台，一切操作都在本地进行，本地编辑完了再生成网页并部署上传到代码托管平台，至于这是优点还是缺点就看个人偏好了。

建站 on 醉后的星星

Hugo博客搭建及stack主题设置

安装Hugo

安装主题

主题设置

参考

阿里云OSS自动上传部署静态网站

准备

本地上传代码

参考

Onedrive云盘程序——OneManager小白设置指南

OneManager是什么

部署教程

平台变量

adminloginpage

autoJumpFirstDisk

background

backgroundm

customCss

customScript

customTheme

disableChangeTheme

disableShowThumb

hideFunctionalityFile

passfile

sitename

theme

timezone

每个盘独立变量

diskname

domain_path

downloadencrypt

guestup_path

public_path

进阶设置

设置网站ico图标

刷新自动切换背景图片

利用index.html设置自定义页面

设置顶部和底部说明文字

利用head.omf设置一言

利用foot.omf设置Valine评论

设置动态背景

美化自定义登录页面

提示

使用百度统计和百度搜索为网站增加小功能

小应用功能

置顶工具

地图名片

反馈工具

专题推送

百度推荐

百度搜索

利用腾讯云SCF免费搭建自己的一言API接口

搭建过程

自定义域名

OneDrive-OneManager云盘程序onemoe主题

下载地址

预览

使用说明

更多关于OneManager的设置

Typecho+Handsome主题美化

美化教程

插件

博主的介绍

左侧边栏导航

顶部导航

时光机社交按钮

pjax回调函数

博客底部左侧

博客底部右侧

自定义css

自定义javascript

自定义Head

pio插件设置

利用windows自带的网络位置进行ftp登录

使用方法

利用QQ机器人发送时光机

使用方法

已知问题

安装方法（Windows）