|
* E5 }2 L( \ v. i& f) q& R
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:, g/ N* \. |& k" q
1 C$ }! D; P5 l* ~0 F/ F0 G; Q1.下载主题文件
: S8 y1 R# _6 O& m# Z3 T' ?+ x' K# G) X7 t" G5 n
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
* ?) P1 a5 l( n
# }. }; a' Y3 g$ u; E% Y2.创建 Typecho 主题目录
5 `- T0 `, ]6 ]6 G% n% M: r ]+ t0 E7 g* p) D# g! R5 m
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
2 ]8 i% r3 A" m+ P# S2 k6 X5 }- O/ D" k4 E
3.解压主题文件) B3 x4 D; j2 v3 ?/ S
- s8 x2 J: |7 R/ j将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
2 K/ A6 q8 w8 g" |+ ^* O( g
, \. u8 d- e. P- n3 T vassets/+ B$ k5 z1 e+ Q$ d8 v$ a% K7 e- y
dist/5 v7 w: d- j& @$ a; A7 ]! w9 @
inc/
) I/ m/ u+ Q8 {, t/ W U0 Ynode_modules/" w! ?. b6 @% Y" |0 K7 z
partials/- U& K/ O4 x& M
templates/
. \& i( r3 E. K* C, S7 k, B.babelrc4 _( z2 ]2 a+ C$ M( B
.eslintrc.js
7 c2 V4 ~" e) |gulpfile.js: O. ^* F3 J, C
package.json0 J! g: P# k- X: k" t2 s# W5 x* o; F
webpack.config.js1 U S! m7 ?. n3 k3 z
4.修改主题样式表文件
; T/ y( O5 g2 B4 m/ x8 }) V# J7 i9 z) F5 S! [: z0 f; F3 _3 A$ b* V0 J4 ]* _
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
* I8 e6 I2 Q& j u$ n F3 d% h, }* F4 M1 |7 M& x4 b& O
css
0 ?' @' g+ E! K$ ~. Cbackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');* f- t5 L. L" y$ G
修改为:# f* Q+ a: W6 Y. X
5 X' D: b$ E# m. M% f; G2 {, f' K$ `
css
* J; S2 r6 S' |9 h# nbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
; I8 J6 n5 e5 U. T5 l5.创建 Typecho 主题配置文件
' G7 T1 ^9 K! ^5 A& e8 P0 M5 i+ w9 R% ~$ U4 @2 B
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:- k4 X2 Q$ L5 \
3 K2 x; _4 K) h9 f7 E9 wphp0 i" \2 A1 s2 f
<?php" A+ ] @ o0 u+ J7 M3 C& p, Q
return array(( c: K: c1 T5 J! `- c# O& J
'name' => 'Heropress Pro',- j) V, F4 w6 R) L/ K
'description' => 'Typecho adaptation of Heropress Pro theme',' m6 u- t6 i8 A* O6 t. l3 v
'version' => '1.0',- B2 t% L! ], {! o
'author' =>'Your Name',
5 |. I& z4 L/ b0 e) C& E);4 ?# Q! X! |+ ]6 k# G, z% p
6.配置主题布局文件1 a( a6 _* I f3 @3 v
) I1 q) J% [# n" M& A& n2 I在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
, y* _1 Z0 |0 ~ ?2 H) l. L2 w- M) s- z- O: h4 {
php
+ z0 t; o0 Z2 P<?php while ($this->next()): ?>3 g7 ?. y& l4 n8 W% C
<div class="post">) w0 K. ~7 Y" G! _" T- p0 a6 W' V
<h2 class="post-title">
0 ^: G( h& x* w- s <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>7 f3 J( Z {2 f7 ~9 n
</h2>
1 r) y0 L0 U4 E# q1 q <div class="post-meta">
. \$ N4 `1 ^7 x <span><?php $this->date('F j, Y'); ?></span>8 @/ ]* _# s) Y4 r; j" Q# ~/ @+ R6 N
<?php if($this->tags): ?>
3 V# z, c/ G9 D* |& W <span class="post-tags">
5 {9 s1 h1 E. \6 M/ u, p <?php $this->tags(', ', true, 'none'); ?>9 N4 s- K% i9 k- U! X7 _
</span>- C3 i1 v2 u% \, P2 R0 ^
<?php endif; ?># g; O& n) K8 H) C" z* ^/ y
</div>* L/ j# o9 R5 z6 L+ ^* S# v
<div class="post-content">
( V) }/ U: D+ { T* X <?php $this->content('Read more »'); ?>. o6 Z, d1 [' j
</div>
, `% j* ~6 D) s1 ~# t1 \4 u</div>- u. \# K2 K* S% a$ m3 T% F m( N
<?php endwhile; ?>
) g( f# x$ O; V" ?2 ^' ?& g/ G9 g u7.调用 Typecho 函数
1 G4 o, t6 c0 p I6 G, r; _( g# S
+ ^$ s6 N0 }$ i* w$ `在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
. f! W+ ], M3 s1 i
# R6 B# @1 ]. `/ I0 j( g- q7 x用 the_title() 替换 get_the_title()。( M4 F$ ^9 A) b
; l2 W7 U, i+ C8 `! I9 n( `
用 the_permalink() 替换 get_permalink()。
6 d% l/ n6 X6 A& g, F0 b& X o# }1 G. y5 L$ f
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。1 H& [ d. Q/ t4 q- n8 x
4 _/ W) Z. ~ K& R$ ?1 e) g$ q
用 $this->content('Read more »'); 替换 the_content('Read more »')。9 \0 p" F& f; A9 c* g s! Y
* E8 o6 c+ V3 B8.添加 Typecho 标记$ G8 N8 z2 ?$ O+ `
3 |/ O5 e/ O8 B& O" ~4 \9 x在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
( G8 x( N" ^5 Q# I- Z8 B% n2 m5 n# D, x+ c9 e# _0 c
php5 B3 t$ P1 S2 ~; T
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
1 W" N3 B2 z, l<?php $this->need('header.php'); ?>! A S9 u2 `5 R* k$ N, t
<div id="main" class="container">4 n) U1 P7 @! o, q+ ]
<div id="content" class="row">2 B0 a" ~; s U7 G; W- g' Y
<?php while ($this->next()): ?>/ z* `& U* H# B }2 g& b% e
<div class="col-md-8 col-md-offset-2">6 N* x: h4 k9 s2 V' \
<div class="post">) b& r) s7 E0 G, x1 Q
<h2 class="post-title">6 \# A& q* N+ W0 F, F* Y6 L
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>% U- m6 N) z6 D7 ^: N: C# B
</h2>. W6 ?& K; }* X! G3 u8 M
<div class="post-meta">
! X* _6 U* {6 r <span><?php $this->date('F j, Y'); ?></span>% b* u% u; r, k$ q+ B- S# r
<?php if($this->tags): ?>. ^% p" l. @4 c- u$ N, y# E9 L
<span class="post-tags">
# s% H2 H* V2 `% O <?php $this->tags(', ', true, 'none'); ?>
- h; n% e! F% o0 q5 b# W </span>
7 k9 w6 d E, \! [2 ~. i9 Q <?php endif; ?>" V* }# N. V! ]/ T( _7 g4 z/ Q: x+ I" _
</div>: i! z5 d* x) ]3 Q( | n1 s
<div class="post-content">
& G: J" a" A0 a <?php $this->content('Read more »'); ?>$ N! Y6 m9 \# Z! ]6 K7 _' I
</div>
4 f9 \4 s9 j% U' d& c </div>
7 b5 r9 |7 b3 k' C8 M* d% y </div>
7 j3 B* G8 \% v; O1 Z- a: n8 L( C: Y <?php endwhile; ?>
9 m- O6 i! L+ c0 r# \- r: w8 e </div>
) d7 o1 w; n4 q) L- P</div>0 T, V6 _0 S/ e+ Z# D
<?php $this->need('footer.php'); ?>5 P l7 ~4 V$ ^
9.调整其他可能需要的文件和代码
" [2 J5 L! ?- R _+ k
6 ~; c: ?1 G8 k/ r# M根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
# I0 s9 M0 _+ k; d8 ^* m5 \, |
9 w" {/ A$ C' xhtml3 V2 Z# A9 v& h
<title><?php $this->archiveTitle(array(
+ p. j0 x3 |; R2 q( r 'category' => _t('%s'),; e+ y/ f/ L, m2 B
'search' => _t('Search "%s"'),0 k# x- F3 r( \5 T% u6 y, I' k) g A
'tag' => _t('Tag "%s"'),' ~3 e# f' x8 j
'author' => _t('Author "%s"'),/ s# H# a' M- Q/ A1 s6 M; g( U ?
'date' => _t('Archive "%s"'),
! L% C9 F$ }' o# `: X2 L: h 'default' => ''8 {9 E; G6 @) A& Y; U
), '', ' - '); ?><?php $this->options->title(); ?>! C7 ?; ^' {/ ^
</title>8 p& T9 o: h2 F7 y# ^4 t
10.使用主题1 z; s8 x- m U. @# b7 w9 M: q) V
$ F* ]- A b3 o: p2 n8 `' W) n
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。9 t! e, G' l, i9 e
L8 R2 f. ?8 o, b- X+ J& s$ s
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
* |( | h- j" @7 [# c
) r) @ B6 T. g$ j1 P* k |
|