|
|
* f3 c" I7 V" {+ r可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:6 }4 s4 P- [0 D6 X, |4 K, H9 H5 x
1 l& \: w" w) S' M8 k4 j4 O1.下载主题文件
/ ^! C H' a8 k- J2 z- w* u
- e5 Y8 t' N0 v0 r在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。& ^5 L Y6 Q. e% n. Q$ I) P
; ?5 p. K4 L6 v5 e4 f0 w
2.创建 Typecho 主题目录7 z3 V. x3 V+ _) u
& |, B+ |6 c, _# k
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
7 U. n0 z( R8 ~* E" A) \1 U
' ~4 w A+ }( W2 \$ j8 b; } s. a3.解压主题文件& F$ c9 G! p: j, P) Z
0 E: u. G+ f! x s
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
/ k& }+ f) I! a+ E5 }' H) T
& ~5 q) W+ m: e: cassets/
1 _. `8 q. j: [& v N9 _dist/
9 \5 ]. B+ m3 I7 v* g) a. d# rinc/5 b5 y' k. e. t; `' C8 s7 O# S
node_modules/2 f! _+ z5 e" v5 s0 y0 c' n; U
partials/
" r. G! g% I' u- L$ B3 r% [. J# atemplates/: C+ b( I* g9 f0 S5 l& C- b
.babelrc
) h4 ?. _( y1 P.eslintrc.js
! D% T( E1 c' }gulpfile.js" n/ J! B' q* b! T2 Y9 Z" r% r$ |
package.json
) N; ~+ ]" j: b# awebpack.config.js
+ @1 _+ O# _ G s. r4.修改主题样式表文件4 u: R6 C% l8 D
0 O- ^7 j( s: x
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
% ~7 ~( W1 z* ~( X" m
% a ?" R ]. {8 c. N; s& y; ]css. w$ f" i6 P4 P; L: y* e: F' @" p* Y7 s
background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
' V/ N; v, l2 v4 L( T% m7 b1 o修改为:* f, e+ H+ q. e, N8 K7 n* `5 Y, e4 r) a
/ w" Q9 I( F+ `- {& {4 i
css
+ ~; | J. C2 k! |. s; zbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
o) m: L. `( |1 r0 x5.创建 Typecho 主题配置文件+ l5 b* S% e" n R& N
7 c' c5 y: v% q6 G( N, K K在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
/ H* h! n6 z# h; L# ?# w, ]6 k& Q* u" P
php
: O/ e: i3 K. o$ z+ Y<?php
* M H/ d% R( C& K9 v7 Greturn array(
1 ?) E+ R# Y( ]# E0 q. x: R0 _! g 'name' => 'Heropress Pro',
. k/ j2 s& p. l4 N! i. G, ] 'description' => 'Typecho adaptation of Heropress Pro theme',
6 M+ V5 Q$ \* D' s" I1 p 'version' => '1.0',0 B4 y; \1 j9 m8 d9 L3 i" z
'author' =>'Your Name',9 ^. }* T8 T' @
);. v9 L# o2 w4 J6 S( Q2 x
6.配置主题布局文件
% P! p$ u' u* N0 o. |2 N
; I, c$ L9 _3 _% B z7 G0 t在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
! y5 C4 o8 [8 V
% o7 `( Q" W5 k" l! pphp% ^4 K3 l' K, n2 m& u( u
<?php while ($this->next()): ?>
$ m; N! f" C7 \- ?<div class="post"> V m' S5 `7 K) C
<h2 class="post-title">
0 D: c- M% m2 X. B' V4 o9 | <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>. W5 q% R! |& n, ]
</h2>
% ]- Z: \+ Z- G. [: g' R J <div class="post-meta">
# ~" C3 B, R p n. i0 ? <span><?php $this->date('F j, Y'); ?></span>! k' w6 F% }2 z7 W1 I7 A! N
<?php if($this->tags): ?>
1 ]* V8 e8 W5 E2 \ <span class="post-tags">
: [6 _! G5 Y8 c! d9 s <?php $this->tags(', ', true, 'none'); ?>' D( n* @0 u) m, l3 X
</span>
- w0 @4 T- A4 q( B/ w <?php endif; ?>/ E p* D) X: p1 q' m
</div>" B) P1 @1 m+ t5 z) @7 }$ h
<div class="post-content">) `$ A" ^. V9 i$ A
<?php $this->content('Read more »'); ?>
; u3 G# q# C& ^% T4 Y+ ?8 O </div>5 w7 n" u& T2 W4 m6 s
</div>
( c* o$ a4 X( I& N4 Q1 r<?php endwhile; ?>/ U3 \& ~$ a, T; U: d
7.调用 Typecho 函数7 b8 [, {4 i; f5 e' v
% M& t' G1 w! }3 H* E- m
在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:( \. W- A: Z: `1 c( m2 U
8 o$ c' a8 w" t8 J# Q1 n+ ?1 u用 the_title() 替换 get_the_title()。
# B0 {3 `3 [, m" p* D7 [
% c4 c6 }' O1 v2 G0 X8 }( q9 G用 the_permalink() 替换 get_permalink()。 Z; O% ]$ V" O8 l, E* g0 o
, W; G+ p3 n6 b6 L0 t# `; S6 |8 H& O用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
1 j+ u! S; b1 ~9 r+ z0 ?& C
6 g4 Z( k9 G4 B0 }用 $this->content('Read more »'); 替换 the_content('Read more »')。5 h8 r- |- g4 j- z( _
" q( c( r) }: k% `0 M$ m! ]
8.添加 Typecho 标记
( @9 V2 k j) I" ~8 Y/ B
- V, m7 ^- e- w% h* D9 c7 i在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:3 M% @9 H; y* k7 X- N' R- H$ }
) d+ c) e' g) l2 p8 L6 ~* H: f" p" H( Vphp/ h5 E' `1 q9 Y5 `; N& N
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>1 Y. @# l% w" V7 t' S0 }
<?php $this->need('header.php'); ?>! X1 t8 e7 o, M' m( s' t
<div id="main" class="container">+ J% P9 j8 V' ^, q
<div id="content" class="row">$ q1 R- k' a& S1 n
<?php while ($this->next()): ?> R2 ~6 X }. k- V
<div class="col-md-8 col-md-offset-2">
7 i' X1 R( V0 w, Q6 r. P9 e <div class="post">
1 G7 t y3 {# ~6 M: i <h2 class="post-title">
% U$ Z! f. t- E( R5 D <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>$ A2 ^/ ^- Z N+ k+ S' J; p8 O3 Q
</h2>; s: V4 [ y0 q
<div class="post-meta">, K* B* w/ L2 _/ N% Y
<span><?php $this->date('F j, Y'); ?></span>
4 s; p& `: K; ]' m <?php if($this->tags): ?>
, N( F* c: H( r; L. i/ Q- ]9 q* Y/ ] <span class="post-tags">
5 r' f5 l, U0 N5 K1 ]0 P <?php $this->tags(', ', true, 'none'); ?>
- l' z8 s+ `! _ </span>( H$ q6 B* a5 ]4 H* f
<?php endif; ?>
' v9 c% R+ T1 }. m/ D. X </div>
4 T6 T4 d3 j1 P <div class="post-content">2 o1 [' ^# M" C Q
<?php $this->content('Read more »'); ?>% J; X# C1 e) d4 u1 m5 u
</div>
; F) _% d z {6 F9 {' O! h </div>3 {' d9 u; \7 e b/ ^
</div>
4 E9 K+ x0 K5 ]& S& q- p# Y <?php endwhile; ?>
! I( M' ^3 [0 f1 E </div>
* u8 H& N+ t- I' G, L</div>
" u2 ~. K7 u; r$ c6 G0 E& _4 c<?php $this->need('footer.php'); ?>
3 |: d2 d( R: ~# g9.调整其他可能需要的文件和代码
% X5 G# x% S# Q$ D2 J& X
7 g# T7 ^5 F1 h根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
" g+ B0 c6 l1 ~ q, u: N
3 j- X" m- B: Q+ y% |html
+ ^' m8 L1 X) K' j" K% O3 Z- B<title><?php $this->archiveTitle(array(4 C7 j0 m6 [2 j; ?" H! M3 {
'category' => _t('%s'),
0 q& L# w* f5 T% s1 o' P 'search' => _t('Search "%s"'),! \0 h2 M1 X! b1 ^+ n. Z! r3 l
'tag' => _t('Tag "%s"'),6 {5 V+ g& `9 t7 O0 D/ i" G' t* N4 Q
'author' => _t('Author "%s"'),
# n/ ^* Y2 U' t! c2 J+ Q! A 'date' => _t('Archive "%s"'),! f3 d. j0 b, \
'default' => ''- G$ a( I6 _# i& {1 c0 O
), '', ' - '); ?><?php $this->options->title(); ?>
$ X! a, Z# ]6 k1 Q3 m6 ^</title>4 H5 U, ^7 g" a- o5 H% @( M1 Y
10.使用主题
( d6 o) P H2 T" B: @
# i: {$ T- H! ]- ]登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
& O X% |7 A1 t( E- V
" o/ }* p& V9 u$ f8 r6 ~2 Y以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
( U6 O1 U8 L+ f$ s
$ P. m( Q% x, \ P. m9 @- }! K9 q |
|