Loading... <strong>说明：</strong>应昨天某位同学的要求，研究了下<code>Opage</code>，<code>Opage</code>是一个客制化上网首页，基于<code>Material Design & Vue.js</code>，集成搜索，网站，天气，<code>TODO</code>(备忘录)，完美的支持<code>PC</code>端和手机端，由于源码的天气接口和某个文件链接出现了问题，博主就小小的修改了下，这里分享下。 <div data-unique="截图"></div> <h2>截图</h2> <a class="light-link" href="http://www.502435.com/usr/uploads/2020/04/f33cc-opage_.png" data-fancybox="gallery" data-type="image" data-caption="请输入图片描述"><img title="请输入图片描述" src="http://www.502435.com/usr/uploads/2020/04/f33cc-opage_.png" alt="请输入图片描述" style=""></a> <div data-unique="功能"></div> <h2>功能</h2> <ul> <li>搜索：<code>Google</code> + <code>Bing</code> + 百度。</li> <li>网站：可自定义网站列表。</li> <li>天气：全国城市 + <code>4</code>天预测。</li> <li><code>TODO</code>：简单的<code>Todo</code>列表。</li> </ul> <div data-unique="安装"></div> <h2>安装</h2> <strong>Github原地址：</strong><a href="https://github.com/viosey/opage" target="_blank" rel="noopener noreferrer">https://github.com/viosey/opage</a> <strong>系统要求：</strong><code>CentOS</code>、<code>Debian</code>、<code>Ubuntu</code> <strong>1、安装npm等依赖</strong> <pre><code class="hljs cs"><span class="hljs-meta">#Ubuntu系统</span> curl -sL https:<span class="hljs-comment">//deb.nodesource.com/setup_9.x | sudo -E bash -</span> sudo apt-<span class="hljs-keyword">get</span> install -y nodejs git screen <span class="hljs-meta">#Debian系统</span> curl -sL https:<span class="hljs-comment">//deb.nodesource.com/setup_9.x | bash -</span> apt-<span class="hljs-keyword">get</span> install -y nodejs git screen <span class="hljs-meta">#Centos系统</span> curl -sL https:<span class="hljs-comment">//rpm.nodesource.com/setup_9.x | bash -</span> yum install nodejs -y git screen </code></pre> <strong>2、下载源码并安装</strong> <pre><code class="hljs nginx"><span class="hljs-attribute">git</span> clone https://github.com/iiiiiii1/opage cd opage && npm install </code></pre> <strong>3、后台运行</strong> <pre><code class="hljs nginx"><span class="hljs-attribute">screen</span> -S opage npm run dev</code></pre> 运行了后先按<code>Ctrl+A</code>，再按<code>D</code>隐藏并保留当前窗口。然后可以通过<code>http://ip:8080</code>进行查看，由于博主只倾向于<code>https</code>，所以天气功能不能在<code>http</code>上使用。要使用该功能的可以用域名（<code>https</code>）进行反代，下面会用最简单的<code>Caddy</code>进行反代。 <div data-unique="域名反代"></div> <h2>域名反代</h2> 这里需要准备<code>2</code>个(二级)域名，一个用来反代主页面，一个反代天气接口地址，且<code>2</code>个域名需提前解析到服务器。 <strong>1、安装Caddy</strong> 使用命令： <pre><code class="hljs nginx"><span class="hljs-attribute">wget</span> -N --<span class="hljs-literal">no</span>-check-certificate https://raw.githubusercontent.com/ToyoDAdoubiBackup/doubi/master/caddy_install.sh && chmod +x caddy_install.sh && bash caddy_install.sh <span class="hljs-comment">#备用地址</span> wget -N --<span class="hljs-literal">no</span>-check-certificate https://www.502435.com/download/shell/caddy_install.sh && chmod +x caddy_install.sh && bash caddy_install.sh </code></pre> <strong>2、配置Caddy</strong> <pre><code class="hljs nginx"><span class="hljs-comment">#以下全部内容是一个整体，修改2个域名、IP、邮箱后一起复制到SSH运行！</span> <span class="hljs-attribute">echo</span> <span class="hljs-string">"www.<span class="hljs-variable">502435</span>.com { gzip tls www<span class="hljs-variable">@502435</span>.com proxy / 1.1.1.1:8080 } tianqi.<span class="hljs-variable">502435</span>.com { gzip tls tianqi<span class="hljs-variable">@502435</span>.com proxy / www.94994.com }"</span> > /usr/local/caddy/Caddyfile </code></pre> <code>tls</code>参数会自动帮你签发<code>ssl</code>证书，如果你要使用自己的<code>ssl</code>，改为<code>tls /root/xx.crt /root/xx.key</code>即可。后面为<code>ssl</code>证书路径。 <strong>3、修改源码天气接口</strong> <pre><code class="hljs nginx"><span class="hljs-comment">#将天气反代域名修改成自己的再运行</span> <span class="hljs-attribute">sed</span> -i <span class="hljs-string">'s/www.94994.com/tianqi.moerats.com/g'</span> <span class="hljs-string">'/root/opage/src/App.vue'</span> </code></pre> <strong>4、启动Caddy</strong> <pre><code class="hljs sql">/etc/init.d/caddy <span class="hljs-keyword">start</span> </code></pre> 最后可以打开反代主页面的域名就可以访问了，这时候右上角的天气就会显示了。 如果你想经常用该首页，可以在浏览器将默认主页修改成该首页地址。 最后说明下，该工具好像是根据<code>Cookie</code>来识别个人的，所以别乱清空<code>Cookie</code>，不然会复原的。 <div id="gtx-trans" style="position: absolute; left: 357px; top: 2624.33px;"> <div class="gtx-trans-icon"></div> </div> 最后修改：2022 年 08 月 02 日 © 允许规范转载 打赏 赞赏作者 赞 0 如果觉得我的文章对你有用，请随意赞赏