用halo创建博客

首先在阿里云购买服务器，我买的按需计量服务器，接着我有购买阿里云的域名

我装的ubuntu系统，然后通过ssh连接输入1panel的下载命令来安装1panel，然后可以在控制面板进行安装插件，例如mysql和halo和OpenResty，这三个是首先得装的插件

接着就可以在网站那进行配置，配置为halo应用，并且域名设置为你的公网ip先，后续自定义域名你可以修改。

然后浏览器输入你的公网ip便可以进行配置主题发布文章等

修改域名

我的域名是购买于阿里云，进行解析到你的公网ip，加一个@记录值为公网ip，还加个www记录值也为公网ip，然后还得去阿里云领取免费的SSL证书用于https加密，然后下载下来对应服务器的密匙和pem，输入到OpenResty内的https加密配置中，还有域名配置添加域名，我的为www.bradomcol.me和bradomcol.me，到这大功告成了，切记要备份halo应用文件，之前改了个参数不会改全部重新来过

折腾了半天，刚配好还行，结果后面域名要备案。否则无法解析到国内的服务器

关于halo博客配置

我修改了hao主题的个人信息头像显示，添加了头像

/opt/1panel/apps/halo/halo/data/themes/theme-hao/settings.yaml，在此文件中的sidebar组里children下添加如下配置

            - $formkit: attachment
              name: avatarImg
              label: 头像图片
              if: $get(profileStyle).value == 'one'
              value: /themes/theme-hao/assets/images/avatar.jpg
              placeholder: 请输入头像图片路径或地址（建议圆形图片）

接着修改 /opt/1panel/apps/halo/halo/data/themes/theme-hao/templates/modules/widgets/aside/profile.html文件中样式一的配置

这是修改前的

            <div class="avatar-img-group">
                <img class="avatar-img" alt="avatar"
                     th:with="img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"

                     th:src="${isLazyload ? loadingImg : img}"
                     th:data-lazy-src="${ isLazyload ? img : ''}">
                <div class="avatar-sticker">
                    <img class="avatar-sticker-img" alt="avatar"
                         th:with="img = @{${theme.config.sidebar.profile.stickerImg}}"

                         th:src="${isLazyload ? loadingImg : img}"
                         th:data-lazy-src="${ isLazyload ? img : ''}">
                </div>

这是修改后的

            <div class="avatar-img-group">
                <img class="avatar-img" alt="avatar"
                     th:with="img = @{${#strings.isEmpty(theme.config.sidebar.profile.avatarImg) ? assets_link + '/images/hao-logo.jpg' : theme.config.sidebar.profile.avatarImg}}"

                     th:src="${isLazyload ? loadingImg : img}"
                     th:data-lazy-src="${ isLazyload ? img : ''}">
                <div class="avatar-sticker">
                    <img class="avatar-sticker-img" alt="avatar"
                         th:with="img = @{${theme.config.sidebar.profile.stickerImg}}"

                         th:src="${isLazyload ? loadingImg : img}"
                         th:data-lazy-src="${ isLazyload ? img : ''}">
                </div>

发现修改控制台没起效果，然后才得知是读取数据库的配置不会有控制台界面更改

那么就直接写死，就完成了此效果

                     th:src="${isLazyload ? loadingImg : '/attachments/upload/yeah.jpg'}"
                     th:data-lazy-src="${isLazyload ? '/attachments/upload/yeah.jpg' : ''}">

修改样式一的背景图片

将content类标签改为如下，就可以自定义背景图片

<div class="card-content" th:style="${#strings.isEmpty(theme.config.sidebar.profile.backgroundImg)} ? '' : |background-image: url(${theme.config.sidebar.profile.backgroundImg});|">

将下面这段注释掉，可以取消背景显示成主题颜色

        /*取消固定的主题颜色显示*/
        /*
        #aside-content>.card-widget.card-info::before {
            background: linear-gradient(-25deg, var(--heo-main), var(--heo-main-op-deep), var(--heo-main), var(--heo-main-op-deep));
            background-size: 400%;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            content: '';
            animation: gradient 15s ease infinite;
        }
        */

修改加载动画大小

由于gif动画主体小，需要放大

修改下面文件中的内容

- /opt/1panel/apps/halo/halo/data/themes/theme-hao/templates/modules/loading-box.html

        #loading-box .loading-img {
            width: 500px;   /*修改这段*/
            margin: auto;
            animation-duration: 0.2s;
            animation-name: loadingAction;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

非常头大的问题

我在使用halo博客时不知道在console界面改了哪里导致我在console界面内的选择框里选择内容不会有效果，并且在1panel界面内进入halo主题文件夹时似乎不能编辑，按道理来说鼠标双击文件内容便能修改，我尝试更新新版本，甚至是重装Linux系统都没能解决，最后换个浏览器可以了，浪费了我将近三四个小时，最终原因查出来了，是浏览器启动了强制复制扩展导致我无法更改，真的很头疼。艹