B3log Solo 第三方皮肤 - 子兮子兮 - README

本贴最后更新于 1918 天前,其中的信息可能已经沧海桑田

B3log Solo 第三方皮肤 - 子兮子兮

本皮肤是基于官方版 yilia 皮肤进行美化修改的第三方皮肤,主色调修改为黑、白、灰(高冷三原色 😜 )、蓝(超链接)。
名称为 iMobile 的原因是,本人使用的此皮肤是直接把原 mobile 皮肤删除,将此皮肤的目录名和 skin.properties 中的配置改为 mobile,这样使用手机访问时也会使用此皮肤(原 mobile 皮肤实在无法欣赏 n(≧▽≦)n )。
此皮肤采用响应式布局,不用担心用手机访问会出现样式错乱。也建议使用者直接将此皮肤文件覆盖原 mobile 皮肤。

注意事项

此皮肤有些个性化的地方需要使用者自己去修改 ftl 模板文件,具体如下:

1. 自定义 ABOUT ME 介绍信息

点击博客标题会弹出 ABOUT ME 的窗口,当然若不想使用此弹窗你也可以在 side.ftl 中搜索 clickme 并删除相关代码。

效果图

关于我效果图

相关代码

ABOUT 代码

2. 自定义左侧个人导航链接

左侧新增的个人导航链接分别为 Github、微博、微信(可以是公众号)二维码、QQ 会话(需要在 QQ 推广 中开通)。

效果图

个人导航效果图

相关代码

从 side.ftl 第 47 行开始的注释,若使用请打开注释并将链接修改为自己的链接,包括下面的反馈邮箱链接。

个人链接代码
邮箱链接代码

3. 添加移动端顶部背景图

在屏幕宽度小于 750px(在 yilia7.min.css 中修改)时当做是移动端,由左右布局变为上下布局,顶部显示背景图,图片位置为 solo 根目录/images/bg.jpg,需要使用者将自己的图片放置于此。

相关代码

@media only screen and (max-width:750px) {
    .side {
        height: 400px;
        width: 100%;
        background: #666 url('/images/bg.jpg') center -40px;
    }
}

效果图

2018021061950jpg

4. 搜索页面

目前 Solo 的搜索页面还比较简陋,本人根据 yilia 的样式修改了一个搜索页面,放在 搜索页面(覆盖至根目录) 目录中,顾名思义,直接将目录中的文件剪切到 Solo 根目录即可。特别要注意的是里面的 opensearch.xml 文件,需要根据自己的实际情况进行修改,格式是在 hacpai 扒下来的,是用来在谷歌浏览器中通过输入域名加空格直接在地址栏实现站内搜索的。

特别注意需要在 WEB-INF/static-resources.xml 文件中添加一行 <include path="/opensearch.xml"/>,不然无法获取此静态资源。

相关代码

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" mlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>子兮子兮</ShortName>
  <Description>子兮子兮风兮寒,三江七泽情洄沿。</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">https://res.zixizixi.cn/izcn.png</Image>
  <Url type="text/html" method="get" template="https://zixizixi.cn/search?keyword={searchTerms}"/>
</OpenSearchDescription>

效果图

搜索页面

地址栏搜索

5. 其他

为了搭配此皮肤,建议对 WEB-INF/classes 目录下的 lang_zh_CN.properties 参数文件做适当的修改,以及替换此目录下的验证码文件 captcha_static.zip(从 Solo 2.7.0 版开始验证码改版,不用替换此文件)。

修改 lang_zh_CN 参数文件

viewCount1Label=\u6D4F\u89C8\u6B21\u6570\uFF1A
# (浏览次数:)修改为(浏览:)
viewCount1Label=\u6D4F\u89C8\uFF1A

articleCount1Label=\u6587\u7AE0\u603B\u6570\uFF1A
# (文章总数:)修改为(文章:)
articleCount1Label=\u6587\u7AE0\uFF1A

commentCount1Label=\u8BC4\u8BBA\u603B\u6570\uFF1A
# (评论总数:)修改为(评论:)
commentCount1Label=\u8BC4\u8BBA\uFF1A

onlineVisitor1Label=\u5F53\u524D\u8BBF\u5BA2\uFF1A
# (当前访客:)修改为(在线:)
onlineVisitor1Label=\u5728\u7ebf\uFF1A

linkLabel=\u53CB\u60C5\u94FE\u63A5
# (友情链接)修改为(链接)
linkLabel=\u94FE\u63A5

需要使用者注意并自己修改代码的地方大概就这些。 另外建议与皮肤无关的 H2 数据 JDBC 连接配置: jdbc.URL=jdbc:h2:~/solo_h2/db;AUTO_SERVER=TRUE;DB_CLOSE_ON_EXIT=FALSE


整体效果

1. 首页

首页

2. 存档

存档

3. 标签墙

标签墙

4. 动态

动态

5. 链接

链接

6. 文章详情

文章详情

7. 评论回复

评论回复

特别鸣谢

此皮肤的发布离不开 D 大(@88250)和 V 姐(@Vanessa)对 Solo 的辛勤耕耘,以及 V 姐 对此皮肤的的热情,本来此皮肤的代码被我改的乱七八糟,代码本来看不下去,开始 V 姐 提出 PR 一份的时候我是拒绝的,因为弄起来真的很麻烦,事实也的确如此 😂 ,即使现在也这代码也不一定有多整洁。写完了此 README 感觉用这个皮肤真的好麻烦呀,应该不会有人用吧 O(∩_∩)O~

第三方项目

此改版皮肤的诞生要特别感谢以下这些第三方项目:

  1. layer:一款美观易用的 jQuery 弹出层;
  2. OwO:萌萌哒评论框表情内容输入工具(Revised OwO);
  3. iconfont:阿里巴巴功能强大且图标内容很丰富的矢量图标库。

... 好吧只记得这 3 个了,可能也只有这三个 😂 。


平等,自由,奔放

Equality, Freedom, Passion

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1090 引用 • 3467 回帖 • 296 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1424 引用 • 10041 回帖 • 470 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • 文档
    56 引用 • 1288 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • iTanken

    代码块你怎么写的?

    3 回复
  • 其他回帖
  • ningjianguo

    楼主,那个代码段底色无法显示的 bug,我已解决。我说一下解决方法,望后来人少入点坑。
    原因:因为有一个页面无法加载 OWO 表情插件,导致 OWO 对象无法生成、报错,从何影响后续代码的执行,问题页面 macro-comments.ftl

    解决方法:找个 macro-comments.ftl 页面删除

     var OwO_demo = new OwO({ |
     logo: 'OωO表情', api: '/skins/${skinDirName}/js/lib/OwO/OwO.js', |
     container: document.getElementsByClassName('OwO')[0], target: document.getElementsByClassName('OwO-textarea')[0], |
     position: 'up', width: '100%', maxHeight: '250px', useMarkdown: true, usedSize: 'h_150', addClass: 'itip', |
     appendContent:' 使用OωO表情更生动形象的表达情感' |
     }); |
    

    即可。我全局搜索了一下好像这个 OwO_demo 对象任何地方都没有用到,不晓得干嘛用的~~~

  • someone

    这些你可以去 Github 上查看源码:

    imagepng

  • someone

    这个皮肤的 macro-comments.ftl 里是有 ${miniPostfix}
    imagepng

    但是我在你的博客里并没有看到 .minOwO.js 是 json 格式的数据, OwO.min.jsOwO.dev.js 才是这个插件
    imagepng

    还有里面 api: 后面的地址需要修改成自己的
    imagepng

  • 查看全部回帖